Comment créer un ruban CSS
Nous parlons de Rubans CSS dans la conception Web quand un bande de boîte (appelé ruban) enveloppe une autre boîte. C'est une technique de conception assez utilisée pour décorer le texte, surtout les titres. Sur le site Web du W3C, vous pouvez voir comment des rubans CSS correctement utilisés peuvent vous aider. contenu de la structure de manière subtile.
Donc, dans ce post, nous allons voir comment créer un simple ruban CSS que vous pouvez utiliser pour améliorer les rubriques sur votre site web. Grâce à Transformations CSS, nous pouvons créer cette conception avec une base de code beaucoup plus simple qu'auparavant.
Vous pouvez jeter un coup d'oeil à la démo finale ci-dessous.
HTML et styles de base
Tout d'abord, nous créons un tag que nous marquons avec le .carte sélecteur qui représente un boîte rectangle le ruban sera emballage autour.
Nous avons également mis le dimensions de base et le Couleur de fond avec CSS.
.carte couleur de fond: beige; hauteur: 300px; marge: 40 px; largeur: 500px;
La partie médiane du ruban
Nous allons utiliser un Variable CSS (nous permet de stocker et de réutiliser une valeur CSS) appelée --p à stocker la valeur de remplissage. La valeur de la rembourrage la propriété utilise le var (- p) syntaxe pour les rembourrages gauche et droit du ruban afin qu'il puisse être facilement élargi. le --p variable plus tard sera réutilisé plusieurs fois; cela rend notre code flexible.
.ruban --p: 15px; couleur de fond: rgb (170,170,170); hauteur: 60px; remplissage: 0 var (- p); largeur: 100%;
Sur la capture d'écran ci-dessous, vous pouvez voir à quoi ressemblera votre démo à ce stade:
Centrer le ruban
Nous devons aussi centrer le ruban. nous poussez-le à gauche par la taille du rembourrage (marqué par le --p variable) en utilisant le positionnement relatif.
.ruban --p: 15px; couleur de fond: rgb (170,170,170); hauteur: 60px; remplissage: 0 var (- p); position: relative; à droite: var (- p); largeur: 100%;
La démo mise à jour:
Les côtés du ruban
Maintenant nous créons le côtés gauche et droit du ruban qui devrait apparemment se plier autour du bord de la carte. Pour ce faire, nous utilisons les deux :avant et :après pseudo-éléments de .ruban.
Les deux pseudo-éléments héritent de la couleur d'arrière-plan de .ruban, et nous utilisons le filtre: luminosité (.5) règle pour assombrir un peu leur couleur. Ils sont aussi absolument positionné au sein de leur parent (relativement positionné).
Leur largeur doit être la identique à la taille du rembourrage, et nous les plaçons aux extrémités gauche et droite du ruban en utilisant le à gauche: 0 et à droite: 0 règles de style.
.ruban: avant, .ribbon: après background-color: inherit; content: "; display: block; filtre: luminosité (.5); hauteur: 100%; position: absolu; largeur: var (- p); .ribbon: before left: 0; .ribbon: after à droite: 0;
Maintenant, le ruban avec les côtés que nous venons d'ajouter ressemble à ce qui suit:
Biaiser les côtés
Pour faire les côtés du ruban l'air penché, nous devons le faire incliner les côtés de 45 °. le transformer: skewy () Règle CSS incline les éléments verticalement.
.ruban: avant gauche: 0; transformer: asymétrique (45 °); .ribbon: après right: 0; transformer: asymétrique (-45 ° C);
Comme vous pouvez voir les bords des côtés ne pas aligner après la transformation, nous devons donc abaisse-les.
Aligner les côtés
À déterminer la bonne longueur par lequel nous devons déplacer les côtés vers le bas, nous nous tournons vers la trigonométrie. Ce qu'il faut trouver, c'est X, comme y est la largeur des côtés (égale à la taille de remplissage de .ruban) et l'angle θ est 45 ° (l'angle du biais).
La résultante X puis doit être réduit de moitié, comme il y a un côté gauche et un côté droit aussi bien.
Si vous utilisez un préprocesseur CSS, vérifiez s’il a une bronzer fonction, sinon se référer à un tableau tangent ou une calculatrice à trouver la valeur tangente de l'angle. Nous avons de la chance bronzage 45 ° est 1, ce qui signifie que la valeur de X est égal à y dans notre cas.
.ruban: avant, .ribbon: après background-color: inherit; content: "; affichage: bloc; filtre: luminosité (.5); hauteur: 100%; position: absolue; haut: calc (var (- p) / 2); largeur: var (- p);
Puisque X a dû être réduit de moitié, nous utilisons le calc () Fonction CSS pour effectuer la division de la --p variable.
Enfin nous devons aligner les côtés le long de l'axe z aussi, ajoutons le z-index: -1 règle aux côtés afin de placez-les derrière la partie médiane du ruban.
.ruban: avant, .ribbon: après background-color: inherit; contenu: "; affichage: bloc; filtre: luminosité (.5); hauteur: 100%; position: absolue; haut: calc (var (- p) / 2); largeur: var (- p); z- index: -1;
Maintenant que nous avons aligné les côtés, notre ruban CSS est terminé.
Ci-dessous, vous pouvez visionner la démo en direct à nouveau. Notez qu’elle utilise également des styles supplémentaires..
