Share
Avec l'arrivée des écrans ultra haute définition (pensez à Retina), de nouveaux défis de conception se sont posés. nous devons trouver des moyens d’adapter tous les appareils. Prenez l'affichage des icônes par exemple. Nous pourrions nous appuyer sur le service des images à 200% ou l'utilisation de SVG, mais il est également possible de créer une quantité surprenante de graphiques avec CSS uniquement. Construisons une icône élaborée avec un seul élément HTML.
Le principal problème des éléments isolés réside dans le fait que nous sommes limités au nombre de "blocs de construction" que nous pouvons utiliser. Heureusement, il existe quelques astuces:
Les pseudo-éléments (également appelés contenu généré) n'existent pas dans le balisage du document (le DOM), mais sont créés par le CSS. Ils vous offrent la possibilité d’ajouter à votre élément par défaut deux autres qui peuvent (plus ou moins) utiliser les mêmes propriétés..
Par exemple, prenez cette balise:
Appliquez ensuite les règles de style suivantes:
.square position: relative; fond: bleu; largeur: 50px; hauteur: 50px; .square :: before position: absolute; à gauche: -50px; content: "; height: 50px; width: 50px; display: block; background: green; .square :: after position: absolute; left: 50px; content:"; hauteur: 50px; largeur: 50px; bloc de visualisation; fond: rouge;
Pour les besoins de cet exercice, nous utiliserons les valeurs en pixels, bien qu'il soit souvent conseillé d'utiliser des unités de mesure flexibles telles que ems..
Remarque: Le double colon (::), par opposition à deux points, est la syntaxe CSS3. Il différencie pseudo éléments de pseudo sélecteurs, tel que :flotter.
Nous nous sommes donné deux autres blocs de construction, mais il convient de noter que certaines propriétés CSS3 ne fonctionnent pas avec le contenu généré:
Une autre chose à savoir est que le contenu généré sera affiché au-dessus de l'élément par défaut, à moins qu'ils n'aient z-index: -1. Les navigateurs les interprètent comme s'ils se trouvaient dans l'élément par défaut. Si nous devions représenter les pseudo-éléments avec le balisage réel, le code serait le suivant:
.carré fond: bleu; largeur: 50px; hauteur: 50px; position: relative; .square .before left: -50px; position: absolue; content: "; height: 50px; width: 50px; display: block; background: green; .square .after content:"; hauteur: 50px; largeur: 50px; fond: rouge; position: absolue; à gauche: 50px;
Si les pseudo-éléments ne suffisent pas à vous donner suffisamment de "blocs" pour construire votre icône, vous pouvez également utiliser des ombres de boîte. Cette technique vous permettra de créer autant de "clones" que vous le souhaitez. Regardons un exemple avec un cercle:
.cercle position: relative; fond: bleu; largeur: 50px; hauteur: 50px; rayon de bordure: 50%; box-shadow: -110px 0 0 -20px violet, -60px 0 0 -10px rouge, 80px 0 0 10px vert, 180px 0 0 20px orange;
Comme vous pouvez le constater, les ombres de la boîte vous permettent de réduire ou d’augmenter la taille de votre forme initiale et de la placer où vous le souhaitez..
Le détail de la propriété box-shadow: 80px 5px 1px 10px vert peut être divisé comme suit:
Remarque: La première ombre définie apparaîtra toujours au-dessus des ombres suivantes.
le encart La valeur permet également diverses possibilités:
.balle position: relative; fond: bleu; largeur: 50px; hauteur: 50px; rayon de bordure: 50%; encadré: encadré 20px 0 0 -10px jaune, insert -20px 0 0 -10px rouge;
Pour ceux d'entre vous intéressés par Internet Explorer, il convient de noter que les dégradés CSS ne sont compatibles qu'avec IE10. Pour les autres navigateurs, rappelez-vous les préfixes de fournisseur appropriés.
Comme les ombres, les dégradés peuvent être combinés et placés indépendamment. L'utilisation de dégradés pour créer des formes est un peu plus compliquée que les propriétés précédentes, nous allons donc nous concentrer sur un exemple "simple".
Dans cet exemple, nous allons créer quatre cercles différents à l'aide de dégradés radiaux et les répartir dans l'élément parent..
.fond fond: gradient radial (centre, ellipse, rgba (0, 0, 0, 1) 10%, transparent 10%, transparent 100%), gradient radial (centre, ellipse, rgba (0, 0, 0, 1) 30%, transparent 32%, transparent 100%), gradient radial (centre, ellipse, rgba (0, 0, 0, 1) 50%, transparent 52%, transparent 100%), gradient radial (centre, ellipse, rgba (0, 0, 0, 1) 60%, transparent 62%, transparent 100%); couleur de fond: rouge; répétition de fond: non répétée; position de fond: 0px 0px, 50px 0px, 50px 50px, 0px 50px; taille de l'arrière-plan: 50px 50px; largeur: 100px; hauteur: 100px; position: relative;
Pour comprendre cette démo, vous devez imaginer une grille sur l'élément. Chaque cellule de la grille serait un dégradé différent. Dans ce cas, les cellules mesurent 50 px par 50 px (taille de l'arrière-plan: 50px 50px;). Je les ai délibérément réparties dans l’élément, mais sachez qu’elles peuvent également être superposées. Chaque cellule peut être placée sur un axe x et y séparé, l’origine se trouvant dans le coin supérieur gauche de l’élément de base (position de fond: 0px 0px, 50px 0px, 50px 50px, 0px 50px;).
La propriété Gradient en détail: fond: gradient radial (centre, couverture d'ellipse, rgba (0, 0, 0, 1)
Pour vous aider à créer des dégradés CSS, vous pouvez utiliser un générateur tel que l'éditeur de dégradé de Collorzilla..
Maintenant que nous avons vu comment créer un maximum de blocs de construction à partir d’une seule div, pratiquons!
Voici ce que nous allons créer en utilisant une seule div (bonus à la fin!):
Voici la seule ligne HTML de ce tutoriel:
Pour permettre à notre icône d'être facilement redimensionnable, nous utiliserons des unités de mesure flexibles. em et%. Grâce à cela, vous pourrez redimensionner à votre guise, simplement en modifiant la taille de la police de caractères de l'élément. Je développe ceci dans Chrome, je vous laisse changer les préfixes des vendeurs en fonction de votre navigateur..
Nous allons commencer par donner forme et couleur au corps de notre coccinelle:
.coccinelle position: relative; taille de police: 60px; largeur: 1.8em; hauteur: 2em; rayon de bordure: 50%; couleur de fond: # E11;
Appliquons maintenant les points sur le corps en utilisant la propriété radial-gradient.
.coccinelle position: relative; taille de police: 60px; largeur: 1.8em; hauteur: 2em; rayon de bordure: 50%; Arrière-plan: -webkit-radial-gradient (centre, ellipse, rgba (0, 0, 0, 1) 30%, transparent 33%, transparent 100%), - webkit-radial-gradient (centre, ellipse, rgba (0, 0, 0, 1) 50%, transparent 55%, transparent 100%), - webkit-radial-gradient (centre, ellipse, rgba (0, 0, 0, 1) 50%, transparent 55%, transparent 100%) , webkit-radial-gradient (centre, ellipse, rgba (0, 0, 0, 1) 40%, transparent 43%, transparent 100%), - webkit-radial-gradient (centre, ellipse, rgba (0, 0 , 0, 1) 40%, transparent 43%, transparent 100%), - webkit-radial-gradient (centre, ellipse, rgba (0, 0, 0, 1) 45%, transparent 50%, transparent 100%), -webkit-radial-gradient (centre, ellipse, rgba (0, 0, 0, 1) 45%, transparent 50%, transparent 100%); couleur de fond: # E11; répétition de fond: non répétée; position de fond: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; taille du fond: 0.5em 0.5em;
Excellent travail - nous en avons fini avec le corps pour le moment.
Cette partie est la plus rapide. Nous allons dessiner un demi-cercle noir et le placer sur le dessus du corps. Pour cela nous allons utiliser le pseudo élément ::avant.
.coccinelle :: before content: "; position: absolute; display: block; hauteur: 0.5em; largeur: 1.2em; haut: -0.24em; arrière-plan: noir; gauche: 0.3em; rayon-bord: 50% 50% 0% 0% / 100% 100% 0 0;
Ici nous allons créer des yeux en utilisant le pseudo élément ::après et la propriété shadow box. Nous commençons par créer notre cercle de base (la pupille) puis nous allons "cloner" cet élément pour créer le blanc de l'oeil, le contour et l'autre oeil.
.coccinelle :: after content: "; position: absolute; display: block; hauteur: 0.1em; largeur: 0.1em; fond: noir; haut: -0.1em; gauche: 0.5em; rayon-bord: 50%; boîte -shadow: 0 0 0 0,1em blanc, 0em 0 0 0,13em noir, 0,7em 0 0 0 noir, 0,7em 0 0 0,1em blanc, 0,7em 0 0 0,13em noir;
Vous devez penser "nous avons un élément qui reste". Ne vous inquiétez pas, nous allons réutiliser la même ombre que celle utilisée pour les yeux..
.coccinelle :: after content: "; position: absolute; display: block; hauteur: 0.1em; largeur: 0.1em; fond: noir; haut: -0.1em; gauche: 0.5em; rayon-bord: 50%; boîte -Shadow: 0 0 0 0.1em blanc, 0em 0 0 0.13em noir, 0.7em 0 0 0 noir, 0.7em 0 0 0.1em blanc, 0.7em 0 0 0.13em noir, 1.2em 0.5em 0 0.02em noir, 1.35 em 1.1em 0 0.02em noir, 1.2em 1.65em 0 0.02em noir, -0.5em 0.5em 0 0.02em noir, -0.65em 1.1em 0 0.02em noir, -0.5em 1.65em 0 0.02em noir;
Notre icône coccinelle est enfin terminée!
Nous sommes en fait pas tout à fait fini. Je vous ai promis un bonus et le voici. L’animation est un avantage de CSS par rapport à SVG; animons notre coccinelle au passage de la souris. Voici le code CSS bonus:
@ -webkit-keyframes ladybug 0% position de base: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; 50% position d'arrière-plan: 0,66 em 0,8em, 0,66 em 0,8em, 0,66 em 0,8em, 0,66 em 0,8em, 0,66 em 0,8em, 0,66 em 0,8em, 0,66 em 0,8em; 100% position de fond: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; .ladybug: hover -webkit-animation: coccinelle 1s;
Nous commençons par définir des images clés que nous nommons coccinelle. Nous activons ensuite ces images clés sur l'état de survol de notre icône. Les images clés modifient chacune la position d'arrière-plan des taches de notre coccinelle.
Enfin, voici le code CSS complet:
.coccinelle position: relative; taille de police: 60px; largeur: 1.8em; hauteur: 2em; rayon de bordure: 50%; Arrière-plan: -webkit-radial-gradient (centre, ellipse, rgba (0, 0, 0, 1) 30%, transparent 33%, transparent 100%), - webkit-radial-gradient (centre, ellipse, rgba (0, 0, 0, 1) 50%, transparent 55%, transparent 100%), - webkit-radial-gradient (centre, ellipse, rgba (0, 0, 0, 1) 50%, transparent 55%, transparent 100%) , webkit-radial-gradient (centre, ellipse, rgba (0, 0, 0, 1) 40%, transparent 43%, transparent 100%), - webkit-radial-gradient (centre, ellipse, rgba (0, 0 , 0, 1) 40%, transparent 43%, transparent 100%), - webkit-radial-gradient (centre, ellipse, rgba (0, 0, 0, 1) 45%, transparent 50%, transparent 100%), -webkit-radial-gradient (centre, ellipse, rgba (0, 0, 0, 1) 45%, transparent 50%, transparent 100%); couleur de fond: # E11; répétition de fond: non répétée; position de fond: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; taille du fond: 0.5em 0.5em; .ladybug: before content: "; position: absolute; affichage: bloc; hauteur: 0.5em; largeur: 1.2em; haut: -0.24em; arrière-plan: noir, gauche: 0.3em; bord-rayon: 50% 50 % 0% 0% / 100% 100% 0 0; .ladybug :: after content: "; position: absolue; bloc de visualisation; hauteur: 0.1em; largeur: 0.1em; fond: noir; en haut: -0.1em; à gauche: 0,5em; rayon de bordure: 50%; box-shadow: 0 0 0 0.1em blanc, 0em 0 0 0.13em noir, 0.7em 0 0 0 noir, 0.7em 0 0 0.1em blanc, 0.7em 0 0 0.13em noir, 1.2em 0.5em 0 0.02em noir, 1.35em 1.1em 0 0.02em noir, 1.2em 1.65em 0 0.02em noir, -0.5em 0.5em 0 0.02em noir, -0.65em 1.1em 0 0.02em noir, -0.5em 1.65em 0 0.02em noir; @ -webkit-keyframes Coccinelle 0% position de base: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; 50% position d'arrière-plan: 0,66 em 0,8em, 0,66 em 0,8em, 0,66 em 0,8em, 0,66 em 0,8em, 0,66 em 0,8em, 0,66 em 0,8em, 0,66 em 0,8em; 100% position de fond: 0.66em 0.2em, 0.3em 0.6em, 1em 0.6em, 0.9em 1.1em, 0.4em 1.1em, 1.1em 1.5em, 0.2em 1.5em; .ladybug: hover -webkit-animation: coccinelle 1s;
A travers ce tutoriel, j'espère vous avoir montré le potentiel de CSS, et ce qu'il est possible de faire avec un seul élément HTML. Il est toujours sage de considérer la prise en charge par le navigateur des propriétés CSS décrites dans ce didacticiel, en veillant à ce qu'elles se dégradent normalement..
Si vous souhaitez voir d'autres icônes créées avec un seul élément, je vous invite à visiter mon site Web one-div.com. Merci d'avoir lu!
Accentsconagua