Faire un encadrement en CSS

Voici un court tutoriel pour ajouter des cadres à vos contenus. Les cadres sont à ajouter en langage CSS .

Encadrer des éléments avec l'utilisation de l'outil dans les pages - bouton CSS

En bas de chaque ligne, vous trouverez en bas à gauche un bouton CSS. Cliquez dessus et dans class, ajoutez une class comme bordure1 (par exemple). Evitez les termes comme border, bordure, encadrement ; ils peuvent être déjà utiliser dans le thème. Ajoutez par exemple un 1. Cela permettra aussi de créer plusieurs style de bordures en CSS (bordure2, bordure3, etc.).

Voici le lien du tutoriel e-monsite : Utiliser l'option CSS pour créer des pages.

Ce texte est dans un cadre.

Encadrer des éléments avec le HTML et les class CSS

Comme le cadre au dessus, on voit que la class bordure1 est sommaire, le cadre étant collé au texte.

Pour la class CSS bordure2, j'ajoute une marge intérieure (padding) permettant de décaler un peu l'encadrement du texte.

La class CSS bordure3 a un effet arrondi. On ajoute juste un border-radius. Je suis fan du 5px, mais c'est modifiable à souhait

Allez, on flambe un peu et on change tout. Le solid (ligne pleine) passe en groove (relief), la couleur en vert, on met une ombre et on change la couleur de fond et la couleur du texte.

.bordure1{
border: solid 1px white;
}
.bordure2{
border: solid 1px white;
padding: 5px;
}
.bordure3{
border: solid 1px white;
padding: 5px;
border-radius: 5px;
}
.bordure4{
border: groove 5px green;
padding: 8px;
border-radius: 0 10px 10px 10px;
background-color : yellow;
color: black;
}

Les cadres pour les images

Insérez ce code dans le formulaire du bas de page de la personnalisation de l'apparence :

img{
border: solid 1px black;
}

Eviemment toutes les règles CSS de la propriété border sont modifiables.

Pour aller plus loin pour la création de vos bordures

Pour tout connaitre sur les bordures, je vous invite à consulter ce tutoriel plus complet sur Open Classroom : Les bordures et les ombres.


Pour toute demande de personnalisation 

Contactez-moi

Forum e-monsite

Ajouter un commentaire

 
×