Aujourd'hui, nous allons voir si nous pouvons prendre une seule image insérée via HTML et la faire ressembler à une pile d'images en désordre en utilisant uniquement du CSS. La clé: les pseudo-éléments.
En cours de route, nous verrons comment le lancement d'un projet comme celui-ci peut rapidement mener à un code désordonné et à la façon dont nous pouvons lutter contre cela avec des pratiques de codage DRY géniales.
Le défi
Je vérifiais certains contenus étonnants sur notre nouveau site de téléchargement, Pixels Daily, et j’ai trouvé un superbe petit fichier PSD gratuit appelé Stacks qui vous permet de créer rapidement et facilement une pile d’images Polaroid dans Photoshop.
Comme vous pouvez le constater, cet effet est très attractif. Dès que je l'ai vu, j'ai immédiatement voulu essayer de le réussir avec CSS. C'est une situation délicate, car il y a plusieurs couches superposées et nous ne voulons pas encombrer notre balisage avec trois images pour chaque élément de la galerie. Alors, comment pouvons-nous réaliser cette illusion en minimisant notre balise HTML?
Il s'avère que la réponse que je cherchais réside dans des pseudo-éléments. C'est un cas d'utilisation idéal pour afficher la magie de: before et: after. Commençons.
Le HTML
Pour créer notre première pile, le seul code HTML dont nous avons besoin est un div avec une image à l'intérieur. C'est tout! Le reste du jeu de jambes fantaisie sera tous effectué via CSS. Assurez-vous que vous ajoutez le? Stackone? classe à la div.
Ici, nous avons ciblé la classe qui contient notre image supérieure, puis implémenté le pseudo-élément: before sans contenu. Cela ajoute effectivement un autre élément au flux de documents avec lequel nous travaillons. Maintenant, appelons ça comme notre image précédente:
La chose importante à noter ici est que nous ne travaillons pas vraiment avec une image. Je pourrais charger une autre image, mais ce serait une mauvaise idée étant donné que nous fabriquons des piles de trois. Pour chaque image dans la galerie, nous ne voulons pas en charger trois! Heureusement, comme la plus grande partie de la surface des pseudo-éléments sera masquée, nous pouvons simplement utiliser une couleur unie tout en conservant l’effet recherché.
Positionnement
À ce stade, les choses ne semblent pas si bonnes. En fait, nous avons vraiment foiré notre image!
Comme vous pouvez le constater, notre pseudo-élément interfère avec l'image. Pour résoudre ce problème, nous devons ajouter un contexte de positionnement, puis le repousser à l’arrière avec z-index. J'ai divisé les différents morceaux de styles afin que vous puissiez voir clairement ce qui se passe avec chaque bloc.
En utilisant le positionnement absolu, nous pouvons alors mettre notre image en place compte tenu de la position de départ de l'image d'origine. Comme nous l'avons dit, z-index place ensuite l'image en arrière-plan, ce qui facilite les interférences que nous avions auparavant. Enfin, nous avons utilisé un effet de transformation pour extraire la rotation désordonnée que vous voyez dans le fichier PSD de Stacks d’origine.
Vérification des progrès
À ce stade, tout va bien! Notre deuxième photo (ainsi, fausse photo) est bien placée sous notre première photo et a suffisamment de rotation pour la distinguer. Un de plus et nous sommes à la maison gratuitement.
Le deuxième pseudo élément
Comme vous pouvez probablement le deviner, pour ajouter une troisième photo à la pile, nous devons utiliser le pseudo-élément: after. Cela fonctionne exactement comme ce que nous venons de faire, il n’est donc pas nécessaire de le parcourir en détail. Les principales différences seront une couleur de fond, une position et une rotation différentes.
Vérification des progrès
Pouvez-vous regarder ça? Nous avons terminé notre première pile d'images! C'est un effet plutôt élégant, car il n'utilise qu'une seule image.
Un workflow imparfait
Etant donné que le PSD d'origine avait plusieurs piles d'images à choisir, je voulais faire la même chose avec les classes CSS. Pour ce faire, nous pourrions facilement copier et coller tout le code ci-dessus dans un nouveau? Stacktwo? classer et changer la rotation / le positionnement des pseudo-éléments. Bam: vous avez vous-même un nouveau stack.
Voici le problème cependant: j'ai fait cela avec huit piles différentes et le résultat était un blob épouvantable de code.Sérieusement, c'était plus moche qu'une mise en page basée sur une table de 1997. Le problème est bien sûr que je me répète encore et encore. Plus de la moitié de mon code est composé de pure redondance. En toute conscience, je ne peux pas vous transmettre de telles pratiques horribles.
DRY CSS
Andy Hunt et Dave Thomas ont inventé le terme? DRY? en ce qui concerne la programmation, qui signifie «ne vous répétez pas». Pour faire un point sémantique insensé, CSS n'est pas techniquement un langage de programmation, c'est un langage de feuille de style. Cependant, si nous le traitons comme un langage de programmation et appliquons les concepts de codage DRY, nous obtenons un résultat bien meilleur.
Voyons si nous pouvons appliquer ces pratiques pour rendre notre code un peu plus bref et plus extensible.
Essayons cela à nouveau
Si nous créons un groupe de classes et suivons notre chemin actuel, notre CSS deviendra difficile à manier. Dès le départ, nous devrons déclarer chaque classe individuellement et ensuite leur transmettre un gros morceau de code. Et ceci avant même que nous abordions les pseudo-éléments, qui vont littéralement tripler notre code!
Étant donné qu'une grande partie des styles seront partagés, réduisons notre code et plaçons certains de ces styles dans un bloc de déclaration.
Cela prend nos styles de base et les applique à toutes les classes de démarrage en une seule fois, ce qui est beaucoup mieux que de nous répéter encore et encore. En option, vous pourriez même améliorer vos sélecteurs.
Notez que toutes nos classes commencent par les cinq mêmes lettres: "stack". Avec cette information, nous pouvons retirer le sélecteur de valeur d'attribut de sous-chaîne arbitraire et ciblez toutes les classes commençant par cette chaîne de cinq lettres.
Comment est-ce fantaisie? Ce sélecteur cible toutes ces classes pour nous! Mieux encore, si nous choisissons d’ajouter huit classes de pile supplémentaires au mixage, ce sélecteur fonctionnera toujours parfaitement.
Prenons ceci à l'extrême et voyons à quel point nous pouvons rédiger notre code. La clé ici est de trouver tout ce qui est répété et d'essayer de ne l'utiliser qu'une fois. Comme vous pouvez le constater, j’ai commencé avec les déclarations qui ne peuvent être appliquées qu’à la pile? Des classes. Ensuite, je suis passé aux styles pouvant être appliqués aux classes de pile avec les éléments: before et: after. En le limitant encore une fois, j’ai configuré un bloc de déclaration pour les styles: before et: after. Enfin, j'ai terminé avec la couleur différente que nous utilisons pour les cours: before.
Ce que nous avons fait ici a littéralement pris des centaines de lignes de code et les a compressées dans un petit espace. C'est fantastique pour la maintenance, les temps de chargement et votre santé générale! C'est un peu délicat de penser d'abord aux principes de DRY, mais une fois que vous l'aurez fait, vous ne regarderez plus en arrière.
Autres piles
A partir de là, chaque pile sera assez unique, nous devrons donc coder les autres un par un. Un peu Sass ou Moins irait un longue pour aider cette partie, mais vous en avez assez de me lamenter sur l’émerveillement des pré-processeurs, j’ai donc fait le long chemin.
Compatibilité du navigateur
Lors de mes tests, la compatibilité du navigateur ici était en fait assez impressionnante.Tout devrait fonctionner correctement dans Safari, Firefox, Chrome, Opera et IE9 +. Pour IE7, vous obtenez une simple galerie d'images sans l'effet de pile sophistiqué, que je considère comme tout à fait acceptable car il s'agit d'une touche purement esthétique, similaire aux coins arrondis.
IE8 est le plus délicat, car il supporte partiellement assez de matériel pour vraiment tout gâcher. Vous pouvez décider comment aborder ce problème comme bon vous semble, mais la solution que j’ai suggérée consistait à utiliser un bidouillage horrible et sale pour ne cibler que IE8, qui consiste à ajouter \ 9 à tout style IE8 uniquement. En utilisant cette technique, j'ai simplement caché les éléments: before et: after pour qu'IE8 obtienne une simple galerie d'images comme IE7.
Les sélecteurs de fantaisie sont ceux où IE8 a tendance à être déclenchés. Il prend en charge avant et après tant que vous vous en tenez à la syntaxe à deux points. Si vous listez les classes avec des virgules plutôt que d'utiliser le sélecteur de valeur d'attribut, vous devriez pouvoir obtenir que IE8 exécute l'effet de pile.
Conclusion
Nous avons beaucoup emballé aujourd'hui. Nous avons créé une illusion d’images sympas, appris à mettre en œuvre: avant et: après, puis discuté des meilleures pratiques de codage en utilisant une mentalité DRY. J'espère que vous avez appris quelque chose et que vous vous êtes autant amusé que moi!
Gardez un œil sur PixelsDaily dans les jours à venir pour un téléchargement gratuit impressionnant contenant tout le code source de ce didacticiel ainsi que huit superbes piles d'images que vous pourrez utiliser dans vos projets.