Médiaforma

All posts tagged border

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Le langage CSS peut être utilisé pour réagir à certains événements. Par exemple, une action peut être effectuée  au survol d’un élément HTML par le pointeur de la souris. Cette prouesse réside dans l’utilisation de la pseudo-classe :hover. Les pseudo-classes sont faciles à repérer : elles commencent toujours par le sélecteur :. A titre d’exemple, je vais vous montrer comment modifier le contour d’une image lorsqu’elle est survolée par la souris.

Le document utilisé est des plus simples. Il contient une balise <img> d’identifiant montagne pour afficher l’image montagne.jpg.

Le code CSS se trouve dans la feuille de styles style5.css. Il est également très simple. Le seul style qui y est défini concerne l’identifiant montagne (et donc l’image affichée dans le document). La pseudo-classe hover applique le code CSS à l’image lorsque le pointeur de la souris se trouve au-dessus de l’image. Ce code modifie la bordure de l’image. Les trois valeurs passées à la propriété border sont :

–          L’épaisseur de la bordure en pixels. Ici 4 pixels.

–          Le style de la bordure. Ici, le mot dashed provoquera l’apparition de tirets. Vous auriez également pu utiliser les valeurs dotted (pointillés), solid (trait plein), double (bordure double), groove (rainure), ridge (relief), inset (relief intérieur) ou outset (relief extérieur).

–          La troisième valeur indique la couleur. Le nom de la couleur peut être pioché dans les seize couleurs de base, dans les couleurs étendues (reportez-vous à la page https://www.mediaforma.com/couleurs-html-etendues/ pour prendre connaissance des couleurs utilisables) ou encore codé en RVB avec une valeur hexadécimale. Dans cet exemple, la bordure sera rouge.

Il ne reste plus qu’à afficher le résultat dans un navigateur avec une des commandes Launch du menu Exécution. Comme vous le voyez, cette technique fonctionne à la perfection : la bordure apparaît lorsque le pointeur de la souris survole l’image. Elle disparaît lorsque le pointeur de la souris est placé en dehors de l’image.

Si vous regardez d’un peu plus prêt, vous verrez qu’un décalage de l’image assez désagréable se produit lors de l’affichage et de la disparition des pointillés. Nous allons voir comment le supprimer dans la rubrique suivante.


Cette rubrique est la suite logique d la précédente. Elle va vous montrer comment tracer un trapèze en affectant des bordures épaisses à une balise <div> vide de tout contenu et en masquant certaines de ces bordures. Dans un premier temps, nous allons tracer un carré de 100 pixels de côté et définir ses bordures pour obtenir le résultat suivant :

Voici le code utilisé :

Le code HTML définit une balise d’identifiant trapèze.

Le code CSS fixe la largeur de la balise <div> à 100 pixels et sa hauteur à 0 pixel. Si la hauteur n’avait pas été nulle, le tracé aurait eu une tout autre allure. Ici par exemple, nous fixons la hauteur à 100 pixels. Voici le résultat :

Cette zone correspond à la balise <div>, celle-ci à sa bordure inférieure et celles-ci à ses bordures gauche et droite. En fixant la hauteur à 0 pixel, le tracé donne un trapèze.

Il suffit maintenant d’affecter la valeur transparent aux bordures gauche et droite pour obtenir le résultat attendu.

Voici le code final :


Cette rubrique s’inspire de la précédente. Elle va vous montrer comment tracer des triangles en affectant des bordures épaisses à une balise <div> vide de tout contenu et en masquant certaines de ces bordures. Dans un premier temps, nous allons tracer un carré de 100 pixels de côté et définir ses bordures pour obtenir le résultat suivant :

triangles css3

Voici le code utilisé :

triangles css3

Le code HTML définit quatre balises <div> d’identifiants tr-bas, tr-haut, tr-gauche et tr-droite.

Examinons le code CSS.

La largeur de la balise d’identifiant #tr-bas est fixée à 0. Ainsi, le <div> corespondant aura une largeur fixe, indépendante de la taille de la fenêtre du navigateur.

En affectant la valeur 100px à la propriété border-top et la valeur 50px aux propriétés border-left et border-right, la balise <div> a une dimension de 100 pixels sur 100 pixels, et la bordure supérieure est deux fois plus grande que la bordure gauche ou que la bordure droite.

Pour transformer ce carré en une flèche orientée vers le bas, il suffit d’utiliser une couleur transparente pour les bordures gauche et droite, en affectant la valeur transparent aux propriétés border-left et border-right :

triangles css3

Les bordures gauche et droite disparaissent et seul un triangle orienté vers le bas est affiché :

triangles css3

En utilisant une technique similaire, il est facile de définir des triangles orientés vers le haut, vers la gauche ou vers la droite :

triangles css3

Voici le résultat :

triangles css3


Il existe plusieurs propriétés CSS relatives à l’arrière-plan :

  • border-width définit l’épaisseur de la bordure ;
  • border-style définit le style de la bordure :
    • none : aucune bordure ;
    • dotted : pointillés ;
    • dashed : tirets ;
    • solid : bordure continue ;
    • double : trait double ;
    • groove : bordure creuse ;
    • ridge : bordure en relief ;
    • inset : bordure 3D en relief intérieur ;
    • outset : bordure 3D en relief extérieur.
  • border-color définit la couleur de la borduure.

Dans cet exemple, le code HTML définit une balise <div> de classe box. Le code CSS détermine les dimensions de la balise, ainsi que l’épaisseur, le style et la couleur de la bordure.

Voici comment ce code est interprété dans Internet Explorer :

Nous allons maintenant remplacer les trois propriétés CSS relatives à la bordure par une seule :

Sauvegardez le nouveau code et affichez le résultat dans Internet Explorer.


Bien entendu, le résultat est le même …


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, nous allons voir comment définir une balise <div> à coins arrondis en CSS3. Plutôt que d’écrire le code CSS à la main, nous allons utiliser un générateur en ligne. Nous nous rendons sur la page http://border-radius.com/.

Il suffit d’entrer un rayon de courbure, en pixels, dans les cases qui apparaissent aux quatre angles du rectangle pour que le code CSS soit généré. Ici par exemple, nous choisissons un rayon de courbure général de 30 pixels et un rayon de courbure de 120 pixels pour le coin supérieur droit.

Remarquez qu’il est possible d’alléger le code en décochant une ou plusieurs cases. Mais attention, le code CSS ne fonctionnera plus dans les navigateurs décochés.

Il suffit maintenant de copier-coller le code CSS dans un document.

Voici le résultat de ce code dans Internet Explorer :