Les div CSS3 n’auront plus de secret pour vous !

Voici la suite de l’article précédent sur les blocs div. Dans cette partie, vous allez en apprendre encore plus sur la personnalisation de vos blocs div grâce à CSS3. Commençons par les bordures.

La couleur de la bordure

Vous avez une bordure sur tous vos blocs. Vous avez déjà utilisé plusieurs exemples de code source. Vous allez (re)découvrir la propriété border-color qui permet de définir la couleur de la bordure d’un bloc.

Vous pouvez définir :

border-top-color la couleur de la bordure supérieure,

border-right-color la couleur de la bordure droite,

border-bottom-color la couleur de la bordure basse,

et border-left-color la couleur de la bordure gauche.

Vous avez même la valeur transparent, la couleur de la bordure est transparente donc vous ne la voyez pas, mais elle existe quand même.

Exemple :

div {
   border-style: solid;
   border-width: 10px;
   border-height: 5px;
   border-top-color: #ccc;
   border-bottom-color: #ccc;
   border-left-color: #eee;
   border-right-color: #eee;
}

Voici un exemple de code source pour une div encadrée avec des couleurs différentes :

top et bottom en gris, left et right en bleu.

L’épaisseur de la bordure

Vous pouvez définir l’épaisseur de la bordure d’un bloc, avec :

border-width, border-top-width, border-right-width, border-bottom-width et border-left-width.

Il s’agit de la largeur de la bordure, et ses dérivés pour les largeurs haute, droite, basse et gauche.

La valeur thin vous permet d’avoir une bordure très fine, medium pour une bordure moyenne et thick pour une bordure épaisse. Ces valeurs pourront cependant donner un rendu des bordures différent suivant les navigateurs.

Exemple :

p {
   border-width: thick;
   border-height: thin;
}

Le style de la bordure

Vous pouvez définir le style de la bordure : en pointillé, en trait plein, avec des points.

Utilisez la propriété border-style et bien évidemment, border-top-style pour la bordure haute, border-bottom-style pour la bordure basse, border-right-style pour la bordure droite, border-left-style pour la bordure gauche.

Vous avez compris le principe maintenant.

Vous pouvez définir des traits pleins avec solid, des tirets avec dashed, des pointillés avec dotted, des doubles traits pleins avec double.

Avec groove, vous obtenez un effet 3D, ridge un autre effet 3D, inset des bordures rentrantes incrustées, outset des bordures sortant de la page.

Avec ces propriétés, vous pouvez ajouter des effets sur les boutons.

Les propriétés inset, outset donnent des effets de profondeur sur le bouton. Avec hidden pas de bordure, cela influe sur la bordure adjacente, et none pour supprimer la bordure.

Exemple :

span { border-style: dotted solid dashed double; }

Conclusion

L’utilisation des blocs est fondamentale avec HTML 5 et CSS 3. Que ce soit une div, un span, un paragraphe p, les blocs vous seront très utiles et sont personnalisables à souhait. Dans cet article, vous avez vu comment ajouter une bordure et les mettre en valeur sur votre page.

Voila, vous pouvez maintenant briller en soirée …

Nous avons mis quelques cours en promo sur l’école du web de Develop4fun :
https://www.develop4fun.fr/tous-les-cours

Vous pouvez également nous retrouver sur Youtube :

Ici => https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q

Ou ici => https://www.youtube.com/channel/UCQlKs3ToaL8IKRbXtwtFnyA