Médiaforma

Un trapèze ajustable en CSS3

Print Friendly

Dans cette rubrique, je vous propose d’ajouter un peu d’interactivité au code de la rubrique précédente en permettant à l’utilisateur de choisir l’épaisseur des bordures gauche et droite et donc, la pente du trapèze. Pour cela, nous allons utiliser une balise <input> de type range. Pour le moment, seuls les navigateurs Safari 5 et supérieur, Chrome 8 et supérieur et Opera 11 et supérieur représentent cette balise en utilisant un curseur. Dans un autre navigateur, cette balise se comportera comme uns simple zone de texte. Voici le rendu dans Google Chrome :

Voici le code utilisé :

Le code HTML contient une balise <div> pour représenter le trapèze et une balise <input type= »range »> pour représenter le curseur. Les attributs min, max, value et step permettent de définir (respectivement) la valeur minimale, la valeur maximale, la valeur par défaut et le pas de progression du curseur.

Le code CSS est identique à celui de la rubrique précédente. Nous n’y reviendrons pas.

Le code JavaScript est exécuté lorsque le curseur est modifié. La valeur transmise est this.value, c’est-à-dire la valeur courante du curseur, entre 0 et 200. Cette valeur sera manipulée sous le nom largeur dans la fonction JavaScript. Pour accéder aux bordures gauche et droite de la balise <div>, nous utilisons les propriétés JavaScript borderLeft et borderRight appliquées à l’élément trapeze. La valeur affectée à ces deux propriétés est identique. Elle est égale à la largeur transmise par le curseur complétée par l’aspect solide et transparent de la bordure.

C’est aussi simple que cela !

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply