hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Comment créer un ruban CSS

Nous parlons de rubans CSS dans la conception web quand une bande de boîte (appelée ruban) enveloppe une autre boîte . C'est une technique de conception assez utilisée pour décorer du texte, en particulier des en-têtes. Sur le site Web du W3C, vous pouvez vérifier comment les rubans CSS correctement utilisés peuvent aider à structurer le contenu de façon subtile.

Donc, dans ce post, nous allons voir comment créer un simple ruban CSS que vous pouvez utiliser pour améliorer les titres de votre site Web. Grâce aux transformations CSS, nous pouvons créer ce design avec une base de code beaucoup plus simple qu'auparavant.

Vous pouvez jeter un coup d'œil à la démonstration finale ci-dessous.

HTML et styles de base

D'abord, nous créons un

Élément HTML auquel nous ajouterons plus tard la conception du ruban . Nous le plaçons dans un
tag nous marquons avec le sélecteur .card qui représente une boîte de rectangle le ruban s'enroulera autour .

Nous définissons également les dimensions de base et la couleur d'arrière - plan avec CSS.

 .card {background-color: beige; hauteur: 300px; marge: 40px; largeur: 500px; } 

La partie médiane du ruban

Nous allons utiliser une variable CSS (nous permet de stocker et de réutiliser une valeur CSS) appelée --p pour stocker la valeur de remplissage . La valeur de la propriété padding utilise la syntaxe var(--p) pour les paddings gauche et droit du ruban afin qu'il puisse être facilement élargi . La variable - --p plus tard sera réutilisée plusieurs fois ; Cela rend notre code flexible.

 .ribbon {--p: 15px; couleur de fond: rgb (170, 170, 170); hauteur: 60px; padding: 0 var (- p); largeur: 100%; } 

Sur la capture d'écran ci-dessous, vous pouvez voir à quoi votre démo est censée ressembler à ce stade:

Centrer le ruban

Nous devons également centrer le ruban . Nous le poussons à gauche par la taille de remplissage (marquée par la variable --p ) en utilisant le positionnement relatif.

 .ribbon {--p: 15px; couleur de fond: rgb (170, 170, 170); hauteur: 60px; padding: 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 les côtés gauche et droit du ruban qui devrait se pencher autour du bord de la carte. Pour ce faire, nous utilisons les pseudo-éléments :before et :after de .ribbon .

Les deux pseudo-éléments héritent de la couleur de fond de .ribbon, et nous utilisons la règle filter: brightness(.5) pour assombrir un peu leur couleur. Ils sont également absolument positionnés au sein de leur parent (relativement positionné).

Leur largeur doit être la même que la taille du padding, et nous les plaçons aux extrémités gauche et droite du ruban en utilisant les règles de style left: 0 et right: 0 .

 .ribbon: avant, .ribbon: après {background-color: inherit; contenu:''; bloc de visualisation; filtre: luminosité (0, 5); hauteur: 100%; position: absolue; largeur: var (- p); } .ribbon: avant {left: 0; } .ribbon: après {right: 0; } 

Maintenant, le ruban avec les côtés que nous venons d'ajouter ressemble à ci-dessous:

Incliner les côtés

Pour faire pencher les côtés du ruban, il faut incliner les côtés de 45 ° . La règle CSS de la transform: skewy() verticalement les éléments .

 .ribbon: avant {left: 0; transformer: skewy (45deg); } .ribbon: après {right: 0; transformer: skewy (-45deg); } 

Comme vous pouvez voir les bords des côtés ne s'alignent pas après la transformation, nous devons donc les tirer vers le bas .

Aligner les côtés

Pour déterminer la longueur appropriée à laquelle nous devons déplacer les côtés, nous nous tournons vers la trigonométrie. Ce que nous devons trouver est x, car y est la largeur des côtés (égale à la taille de remplissage de .ribbon ), et l'angle θ est de 45 ° (l'angle de l'asymétrie).

Le x résultant doit ensuite être réduit de moitié, car il y a aussi un côté gauche et un côté droit.

Si vous utilisez un préprocesseur CSS, vérifiez s'il a une fonction tan, sinon reportez-vous à une courbe tangente ou une calculatrice pour trouver la valeur tangente de l'angle . Nous sommes chanceux car tan 45° est 1, ce qui signifie que la valeur de x est égale à y dans notre cas.

 .ribbon: avant, .ribbon: après {background-color: inherit; contenu:''; bloc de visualisation; filtre: luminosité (0, 5); hauteur: 100%; position: absolue; en haut: calc (var (- p) / 2); largeur: var (- p); } 

Puisque x devait être réduit de moitié, nous utilisons la fonction CSS calc() pour effectuer la division de la variable --p .

Enfin, nous devons également aligner les côtés le long de l'axe z, donc ajoutons la règle z-index: -1 sur les côtés afin de les placer derrière la partie médiane du ruban .

 .ribbon: avant, .ribbon: après {background-color: inherit; contenu:''; bloc de visualisation; filtre: luminosité (0, 5); hauteur: 100%; position: absolue; en haut: calc (var (- p) / 2); largeur: var (- p); indice z: -1; } 

Maintenant que nous avons aligné les côtés, notre ruban CSS est terminé.

Ci-dessous vous pouvez vérifier la démo en direct, s'il vous plaît noter qu'il utilise également des styles supplémentaires.

Utilisation des fichiers à la demande de OneDrive dans Windows 10 Insider

Utilisation des fichiers à la demande de OneDrive dans Windows 10 Insider

Retour à Build 2017, Microsoft a prévisualisé une nouvelle fonctionnalité OneDrive appelée Fichiers à la demande . Si vous êtes un participant du programme Windows 10 Insider, vous pouvez maintenant vous familiariser avec cette fonctionnalité car Microsoft a déployé les fichiers à la demande pour ceux qui font partie de l'anneau rapide du programme Windows 10 Insider.Avec Windo

(Conseils techniques et de conception)

Plus de 20 Calendriers gratuits à imprimer pour 2017

Plus de 20 Calendriers gratuits à imprimer pour 2017

Choisir et calendrier intéressant et créatif est la meilleure façon de commencer la nouvelle année. Il est important de choisir le bon calendrier pour l'année à venir parce que c'est quelque chose que vous regarderez toute l'année, et il devrait donc être assez inspirant pour susciter votre intérêt chaque fois que vous le voyez .Tout comm

(Conseils techniques et de conception)