CSS peut tirer de nombreux trucs vraiment géniaux: manipulation de la taille, désaturation, même flou. Une limite que nous rencontrons cependant est que vous ne pouvez pas vraiment diviser une image en plusieurs parties. Par exemple, si vous souhaitez couper une photo en deux et animer la séparation, vous ne pouvez pas vraiment le faire avec du CSS pur. Pouvez-vous?
Aujourd'hui, nous allons coder un travail qui nous permet de réaliser cette astuce sans une once de JavaScript ou de fichiers supplémentaires. Voyons voir comment ça fonctionne.
Sneak Peak: Lancer la démo
Astuce chapeau à Kyle Foster
Récemment, le développeur Kyle Foster a créé un joli petit plugin jQuery avec un effet que j'aime beaucoup (voir ici). Lorsque l'utilisateur survole une image, celle-ci se divise en deux horizontalement et se sépare pour révéler un message caché. Voici une capture d'écran de sa démo:
Comme vous pouvez le constater, c’est un excellent petit bout d’interface utilisateur. Comme je le fais toujours quand je rencontre quelque chose comme ça, j'ai commencé à réfléchir à la manière de réaliser quelque chose de similaire avec uniquement du CSS. Le problème est que CSS ne vous permet pas vraiment de diviser une image de cette façon. Je savais que la solution était retenue par plusieurs images d'arrière-plan, mais je ne voulais pas avoir à intégrer deux images distinctes pour chaque photo utilisant cet effet. Heureusement, avec un peu d'ingéniosité, nous pouvons y arriver avec une seule image. Lisez la suite pour voir comment.
Étape 1: Formatez votre image
CSS nous permet d’appliquer plusieurs images d’arrière-plan à un seul élément. Il est intéressant de noter que nous pouvons utiliser cette fonctionnalité pour appliquer plusieurs fois la même image d’arrière-plan, en positionnant chaque instance de manière unique. Avec cette information en tête, une solution à notre problème se présente.
Le truc pour y parvenir consiste à diviser votre image en deux dans Photoshop avant de l'intégrer. Consultez l'exemple ci-dessous pour voir ce que je veux dire. Cela semble un peu bizarre, mais cela nous donne la possibilité de faire exactement ce dont nous avons besoin.
Le flux de travail pour faire cela ressemble à ceci (n'hésitez pas à modifier les dimensions):
- Créez une image de 300 pixels de large sur 300 pixels de haut
- Coupez l'image au centre et placez les deux moitiés sur des calques différents.
- Aller à Taille de la toile dans Photoshop et augmentez le canevas à 300px par 375px.
- Placez la moitié inférieure de la photo en haut de la toile.
- Placez la moitié supérieure de la photo au bas de la toile.
Cela ressemble à une douleur, mais une fois que vous avez compris comment cela fonctionne, cela va très vite. Vous pouvez même enregistrer une action qui le fera pour vous en quelques secondes. Essentiellement, nous avons permis à un fichier de constituer à la fois le haut et le bas de notre image. Il peut remplir cette fonction car il juxtapose joliment: lorsque deux images se heurtent, l'image passe de manière transparente de l'une à l'autre. Ne vous inquiétez pas pour la rayure blanche géante au milieu, qui sera simplement cachée.
Étape 2. Le balisage
Maintenant que nous avons une bonne idée de la façon dont cela va fonctionner, marquons-le. Rappelez-vous que nous voulons qu'une légende soit révélée, nous allons donc placer une balise de paragraphe à l'intérieur d'une div.
Cette div a deux classes: révéler et brancher. Le? Révéler? classe est l'endroit où nous placerons une grande partie du code répétable que nous voudrons appliquer à tous les éléments similaires. La prise? La classe contiendra le code spécifique qui se rapporte à la photo prise ci-dessus.
Étape 3. CSS de démarrage
Pour bien commencer, voici le CSS de base que je vais utiliser dans la démo. La partie qui compte vraiment est le? Révéler? code, qui définit la taille de notre conteneur.
Étape 4. Plusieurs CSS en arrière-plan
Maintenant, rappelez-vous que notre image de départ était de 300 pixels sur 300 pixels, ce qui correspond à la taille de notre conteneur. Cela signifie que nous pouvons remplir ce conteneur avec la zone d'image sans laisser aucune des barres blanches de notre émission jpg.
Pour ce faire, nous allons définir trois arrière-plans sur notre élément, chacun étant séparé par une virgule. Les deux premiers sont la même image de prise et le troisième est une couleur unie. D'une part, nous sommes sorte de en utilisant plusieurs images, mais le navigateur ne doit charger que dans un seul fichier, ce qui permet de garder nos requêtes http plus basses que si nous avions utilisé deux images distinctes (c'est comme si nous utilisions des sprites d'images).
Les chiffres après chaque arrière-plan représentent les valeurs de positionnement. Le premier nombre correspond au décalage horizontal et le second au décalage vertical. Nous avons compensé notre première image de 150 pixels positifs et la seconde de 225 pixels négatifs. Notez que 150 + 225 équivaut à 375, ce qui correspond à la hauteur totale de notre jpg.
Notez également qu’il est très important de définir les arrière-plans sur non répétésinon, cela ne fonctionnera pas du tout.
Étape 5. Transition
Lorsque nous survolons l'élément, nous allons écarter les deux occurrences de notre photo pour afficher une légende. Nous voulons nous assurer que cela se passe bien, alors assurez-vous d'ajouter une transition.
Étape 5. Styles de survol
À ce stade, toutes les tâches difficiles sont terminées.Tout ce que nous avons à faire est de déplacer chaque instance de l'image du centre vers l'extérieur lorsque l'utilisateur survole l'élément. Nous faisons cela en ajustant les valeurs de positionnement comme suit:
Désormais, lorsqu'un survol survient, la première instance de l'image glisse vers le bas de 60 pixels et la seconde instance vers le haut de 60 pixels. Voici à quoi cela ressemble:
Étape 6. La légende
Avec cela, notre effet apparemment impossible devient vraiment simple! N'oubliez pas cependant que nous avons cette légende embêtante avec laquelle travailler maintenant. Étant donné que nous intégrons notre photo avec des images d'arrière-plan CSS, le texte apparaîtra en haut de l'arrière-plan, ce que nous ne souhaitons pas du tout. Avec un peu de balisage supplémentaire, nous pourrions créer une div supplémentaire et conserver le texte ailleurs, ce qui fonctionne parfaitement.
Cependant, nous pouvons limiter notre balisage au maximum et simplement le simuler si nous manipulons l'opacité du texte. En utilisant cette méthode, nous allons simplement rendre la légende invisible jusqu'à ce que l'utilisateur survole l'image, puis la fondre en vue. Voici le morceau de CSS dont nous aurons besoin pour faire tout cela.
Étape 7. Faire mousser, rincer, répéter
C'est à peu près tout ce qu'il y a à faire. Nous avons mis en place un système qui peut facilement être étendu à divers éléments. Ici, nous allons rapidement appliquer cela à trois éléments.
Nous pouvons maintenant utiliser des CSS similaires dans toutes les versions, en appliquant les mêmes valeurs de positionnement dans l’ensemble, tout en mélangeant les images en arrière-plan.
Regarde!
Notre travail est terminé, il est maintenant temps de vous asseoir et d'admirer ce que nous avons construit. Découvrez-le en suivant le lien ci-dessous. Une fois que vous y avez jeté un coup d'œil, laissez un commentaire ci-dessous et dites-moi ce que vous pensez.
Démo: cliquez ici pour lancer
