Share
Bien sûr, nous connaissons tous les frontières. Y a-t-il quelque chose de nouveau qui pourrait éventuellement être introduit? Eh bien, je parie qu'il y a pas mal de choses dans cet article que vous n'avez jamais su!
CSS3 peut non seulement être utilisé pour créer des angles arrondis, mais le langage CSS simple peut également être utilisé pour afficher des formes personnalisées. C'est vrai; Dans le passé, avant que ces techniques aient été découvertes, nous aurions peut-être eu recours à des images d'arrière-plan en position absolue pour afficher des cercles ou des flèches. Heureusement, alors que nous nous éloignons un peu plus de Photoshop, ce n'est plus le cas.
Vous connaissez probablement l'utilisation la plus élémentaire des frontières.
bordure: 1px noir uni;
Le code ci-dessus va appliquer un 1px frontière à un élément. Clair et simple; mais on peut aussi modifier un peu la syntaxe.
largeur de la bordure: épaisse; style de bordure: solide; couleur de bordure: noir;
En plus de transmettre une valeur spécifique à largeur de la bordure, Trois mots-clés peuvent également être utilisés: mince, moyen, et épais.
Bien qu’il puisse au début sembler inutile de faire un jour appel à la écriture normale forme, il y a une poignée de cas où il est avantageux, par exemple lorsque vous devez mettre à jour un aspect d'une frontière lorsqu'un événement désigné se produit.
Peut-être devez-vous changer la couleur d'une bordure lorsque l'utilisateur survole un élément spécifique. L'utilisation de la forme abrégée nécessiterait que vous répétiez les valeurs de pixel.
.boîte bordure: 1px rouge solide; .box: hover border: 1px vert uni;
Une approche plus élégante et sèche consisterait à mettre spécifiquement à jour le couleur de la bordure propriété.
.boîte bordure: 1px rouge solide; .box: hover border-color: green;
De plus, comme vous le verrez bientôt, cette écriture normale technique est utile lors de la création de formes personnalisées avec CSS.
rayon de la frontière est l'enfant d'or de CSS3 - la première nouvelle propriété à être largement utilisée dans la communauté. Cela signifie que, à l’exception d’Internet Explorer 8 et inférieur, tous les navigateurs peuvent afficher des coins arrondis..
Auparavant, il était nécessaire d'utiliser des préfixes de fournisseur pour Webkit et Mozilla, afin que le style soit correctement appliqué..
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
Cependant, ces jours-ci, nous pouvons découper les versions des fournisseurs sans souci et nous en tenir simplement au formulaire officiel: rayon de la frontière.
Comme on pouvait s'y attendre, nous pouvons également spécifier des valeurs personnalisées pour chaque côté d'une boîte..
bord-haut-gauche-rayon: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; rayon en bas à gauche: 0;
Dans le code ci-dessus, paramètre bord-haut-droite-rayon et frontière-bas-gauche-rayon à zéro serait superflu, sauf si l'élément hérite de valeurs qui doivent être réinitialisées.
Un peu comme marge ou rembourrage, ces paramètres peuvent être condensés dans une seule propriété, si nécessaire.
/ * en haut à gauche, en haut à droite, en bas à droite, en bas à gauche * / border-radius: 20px 0 30px 0;
Par exemple (et comme le font les concepteurs Web alors souvent), la forme d’un citron peut être reproduite avec CSS et le rayon de la frontière propriété, comme si:
.citron largeur: 200px; hauteur: 200px; arrière-plan: # F5F240; bordure: solide 1px # F0D900; border-radius: 10px 150px 30px 150px;
De nombreux concepteurs s'en tiennent volontiers aux connaissances décrites jusqu'à présent dans ce chapitre. cependant, il y a plusieurs façons de pousser plus loin!
Il existe une variété de techniques auxquelles nous pouvons faire référence lorsque nous sommes chargés d'appliquer plusieurs bordures à un élément..
Tandis que solide, précipité, et à pois sont les valeurs les plus fréquentes pour le style de bordure la propriété, il y a aussi quelques autres que nous pouvons utiliser, y compris rainure et crête.
bordure: gorge 20px # e3e3e3;
Ou, avec la forme à main longue:
couleur de bordure: # e3e3e3; largeur de la bordure: 20px; style de bordure: rainure;
Bien que cela soit certainement utile, un crête ou rainure effet n'est pas vraiment plusieurs frontières.
La technique la plus populaire pour créer deux frontières consiste à tirer parti de la contour propriété.
.box border: 5px solid # 292929; contour: solide 5px # e3e3e3;
Cette méthode fonctionne à merveille, cependant, elle est limitée à deux frontières. Si vous avez besoin de créer un effet superposé, une approche différente sera nécessaire..
Quand le contour technique ne suffit pas, une autre approche consiste à tirer parti de la :avant et :après pseudo-éléments et appliquer les bordures supplémentaires nécessaires au contenu généré.
.box width: 200px; hauteur: 200px; arrière-plan: # e3e3e3; position: relative; bordure: 10px vert solide; / * Créez deux boîtes avec la même largeur que le conteneur * / .box: after, .box: before content: "; position: absolute; en haut: 0; à gauche: 0; en bas: 0; à droite: 0; .box: after frontière: 5px rouge uni; contour: 5px jaune uni; .box: avant bordure: 10px uni bleu;
Ce n’est peut-être pas l’approche la plus élégante, mais c’est certain. Une mise en garde est qu'il est facile de confondre l'ordre dans lequel les couleurs de bordure seront appliquées. Un certain niveau de "deviner et vérifier" est souvent nécessaire pour appliquer la séquence correcte.
le enfants cool façon de créer un nombre infini de frontières est de tirer parti de la propager paramètre dans le boîte ombre Propriété CSS3.
.boîte bordure: 5px rouge solide; boîte-ombre: 0 0 0 5px vert, 0 0 0 10px jaune, 0 0 0 15px orange;
Dans ce cas, nous sommes intelligents et utilisons boîte ombre d'une manière qui n'a peut-être pas nécessairement été prévue lorsque la spécification a été écrite à l'origine.
En mettant le X, y, et brouiller composants à 0, nous pouvons plutôt utiliser le propager valeur pour créer des frontières solides aux endroits souhaités. Parce que boîte ombres peut être empilé, en utilisant une virgule, le nombre de niveaux possibles est infini.
Cette technique se dégrade gracieusement assez bien. Dans les anciens navigateurs, qui ne reconnaissent pas la boîte ombre propriété, cela rendra simplement le rouge unique 5px frontière.
Rappelez-vous: les conceptions ne doivent pas nécessairement être identiques dans tous les navigateurs. Ecrivez votre CSS pour le navigateur le plus moderne, puis fournissez les solutions de rechange appropriées, en conséquence.
En plus de transmettre une valeur unique à rayon de la frontière, nous pouvons alternativement fournir deux - séparés par un / - spécifier des valeurs uniques pour les rayons horizontal et vertical.
Par exemple…
border-radius: 50px / 100px; / * rayon horizontal, rayon vertical * /
… est équivalent à:
bord-haut-gauche-rayon: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; bordure-bas-gauche-rayon: 50px 100px;
Cette technique est particulièrement utile lorsque vous devez imiter une courbe longue et subtile plutôt qu’un angle arrondi générique. Par exemple, le code suivant nous permet de rompre légèrement avec une forme carrée, ce qui crée un effet de papier gondolé..
.box width: 200px; hauteur: 200px; arrière-plan: # 666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em;
Peut-être que l'utilisation la plus judicieuse des bordures consiste à les appliquer intelligemment à des éléments de largeur et de hauteur nulles. Déroutant, hein? Voyons une démonstration.
Pour les exemples suivants, supposons le balisage suivant…
… Et les suivants base coiffant:
.box width: 200px; hauteur: 200px; fond: noir;
L’exemple le plus fréquemment cité, lors de la démonstration de l’utilisation des formes CSS dans un projet, consiste à créer la flèche obligatoire..
La clé pour comprendre comment une flèche peut être formée avec CSS est de définir un couleur de la bordure de chaque côté, puis réduire à la fois la largeur et la taille valeurs pour le conteneur à 0.
En supposant un div avec une classe de flèche comme conteneur:
.flèche largeur: 0; hauteur: 0; bord supérieur: 100px rouge uni; bordure droite: 100px vert solide; bordure inférieure: 100px bleu uni; bordure gauche: 100px jaune solide;
Comme cela a été démontré au début de ce chapitre, une syntaxe plus propre consisterait à: ne pas utilisez la version abrégée englobante:
.flèche largeur: 0; hauteur: 0; frontière: 100px solide; border-top-color: rouge; border-right-color: vert; couleur de bordure inférieure: bleu; border-left-color: jaune;
Nous pouvons même réduire cela davantage en regroupant les valeurs de couleur.
.flèche largeur: 0; hauteur: 0; frontière: 100px solide; couleur de bordure: rouge vert bleu jaune;
Intéressant, non? Cela a tout son sens quand on fait un pas en arrière. C’est le seul moyen possible d’aligner les couleurs, en supposant une largeur et la taille de zéro pour le conteneur. Maintenant, que se passe-t-il si nous définissons toutes les couleurs de bordure transparentes, sauf le côté bleu?
.flèche largeur: 0; hauteur: 0; frontière: 100px solide; couleur de bordure inférieure: bleu;
Excellent! Mais il ne semble pas trop sémantique de créer un .flèche div, tout dans le but d'ajouter une flèche à la page. Au lieu de cela, les pseudo-éléments peuvent être utilisés pour appliquer la flèche après ou avant l'élément associé.
Pour créer une bulle de dialogue 100% CSS, nous commençons par le balisage.
salut!
Ensuite, certains base le style devrait être appliqué.
.discours-bulle position: relative; couleur de fond: # 292929; largeur: 200px; hauteur: 150px; hauteur de ligne: 150px; / * verticalement centre * / couleur: blanc; text-align: center;
La flèche sera appliquée en utilisant le après élément pseudo.
.bulle: après contenu: ";
le
:avantet:aprèsLes éléments psuedo peuvent être utilisés pour insérer du contenu généré avant ou après le contenu d'un élément.
À ce stade, il s’agit simplement de reproduire la flèche et de la placer au bon endroit. Nous commençons par positionner absolument le contenu, en réinitialisant le largeur et la taille, et appliquer les couleurs de la bordure.
.bulle: après contenu: "; position: absolue; largeur: 0; hauteur: 0; bordure: 10px solide; couleur de la bordure: rouge vert bleu jaune;
Parce que nous savons que nous voulons que la flèche pointe vers le bas, l'image ci-dessus montre que toutes les bordures, à l'exception de la bordure rouge (ou supérieure), doivent être omises ou définies comme transparentes..
.bulle: après contenu: "; position: absolue; largeur: 0; hauteur: 0; bordure: 10px solide; border-top-color: rouge;
Lors de la création de formes CSS, car nous ne pouvons pas utiliser le largeur propriété pour spécifier la largeur de la flèche, la largeur de la bordure propriété devrait être utilisé à la place. Dans ce cas, la flèche devrait être légèrement plus grande; alors le largeur de la bordure peut être augmenté à 15px. Nous allons également positionner la flèche au bas et au centre du conteneur, en utilisant le Haut et la gauche propriétés, respectivement.
.bulle de dialogue: après contenu: "; position: absolue; largeur: 0; hauteur: 0; bordure: 15px solide; bord-en-haut-couleur: rouge; haut: 100%; gauche: 50%;
Presque là; la dernière étape consiste à mettre à jour la couleur de la flèche pour qu'elle corresponde à l'arrière-plan du conteneur. Le positionnement doit également être modifié pour tenir compte de la largeur des bordures (15px). Pendant que nous sommes ici, nous allons également appliquer une subtile rayon de la frontière pour donner l'impression que le contenant ressemble plus à une bulle.
.bulle de dialogue / *… autres styles * / border-radius: 10px; .speech-bubble: after content: "; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: # 292929; haut: 100%; gauche: 50%; margin- left: -15px; / * ajuster en fonction de la largeur de la bordure * /
Pas mal, oui? Résumez ce code à quelques classes réutilisables, et vous êtes prêt pour tous les projets futurs.
/ * Utilisation des bulles de dialogue: Appliquez une classe de .speech-bubble et .speech-bubble-DIRECTIONsalut* / .speech-bubble position: relative; couleur de fond: # 292929; largeur: 200px; hauteur: 150px; hauteur de ligne: 150px; / * verticalement centre * / couleur: blanc; text-align: center; border-radius: 10px; famille de polices: sans-serif; .speech-bubble: after content: "; position: absolute; width: 0; height: 0; border: 15px solid; / * Positionner la flèche * / .speech-bubble-top: after border-bottom- couleur: # 292929; à gauche: 50%; en bas: 100%; à gauche: -15px; .speech-bubble-right: après border-left-color: # 292929; à gauche: 100%; en haut: 50% ; margin-top: -15px; .speech-bubble-bottom: after border-top-color: # 292929; haut: 100%; gauche: 50%; margin-left: -15px; .speech-bubble- à gauche: après border-right-color: # 292929; en haut: 50%; à droite: 100%; margin-top: -15px;
Un inconvénient à utiliser hauteur de la ligne centrer verticalement le texte est que vous êtes limité à une seule ligne. Si le texte nécessite deux lignes ou plus, chaque hauteur de ligne sera beaucoup trop grande. Une solution intelligente consiste à définir un afficher de table à la bulle, et un afficher de cellule de table au paragraphe qui enveloppe le texte. Cela nous permet ensuite d’aligner le texte au milieu, en conséquence.
Le texte va ici.
Ensuite, le CSS modifié.
.bulle de dialogue / * autres styles * / display: table; .speech-bubble p display: table-cellule; alignement vertical: milieu;
Si référence à
affichage: tableramener des souvenirs terribles de la mise en page à l'ancienne, à base de table, ne vous inquiétez pas. Ces propriétés font simplement référence au style dans lequel un élément doit afficher.
Nous ne sommes pas limités à des triangles; CSS est capable de produire toutes sortes de formes - même les cœurs et les signes de risque biologique!
.biohazard width: 0; hauteur: 0; frontière: solide 60px; rayon de bordure: 50%; border-top-color: noir; couleur de bordure inférieure: noir; border-left-color: jaune; border-right-color: jaune;
Bien qu'il soit vrai que le simple bordure: noir uni 1px La syntaxe va un long chemin, si nous sommes intelligents, nous pouvons créer une variété d'effets, d'icônes et de formes utiles. Qui aurait pensé que les frontières pourraient être si puissantes? L'important est de rappeler que le style des formes courantes ou des bulles ne doit être créé qu'une seule fois, puis résumé par classes d'utilitaires pour une utilisation future..
Accentsconagua