Faire pivoter et masquer parfaitement les vignettes avec CSS3

Avez-vous déjà vu un site Web présentant des vignettes d’images légèrement pivotées? C'est un effet simple qui ajoute une couche de personnalité visuelle. Cela dit, si vous n'obtenez pas l'effet de rotation avec CSS, vous travaillez trop! Apprenez à le faire correctement!

Tutoriel republié

Toutes les quelques semaines, nous revoyons certains des articles préférés de nos lecteurs tout au long de l'histoire du site. Ce tutoriel a été publié pour la première fois en août 2011.

introduction

Les galeries d'images avec des vignettes pivotées sont plutôt rares, mais c'est une astuce simple pour ajouter du style à votre page Web. Cependant, s’il n’est pas bien fait, obtenir et maintenir cet effet peut parfois s’avérer très compliqué.!

Pour obtenir correctement cet effet, vos premières réflexions pourraient consister à créer des vignettes pivotées dans Photoshop. Cependant, cela peut s'avérer difficile à long terme. Les inconvénients de la création de vignettes pivotées de cette manière sont les suivants:

Cohérence Angle: Si les images ne pivotent pas toutes selon le même angle, la cohérence visuelle de la page est perdue. Cela signifie maintenir un PSD de chaque vignette individuelle correctement pivoté selon un angle cohérent. Vous pouvez, par exemple, ouvrir votre PSD et vous rendre compte que vous avez oublié l’angle de rotation de vos vignettes..
Génération de vignettes CMS:Si vous utilisez un CMS (tel que Wordpress), vos vignettes sont probablement générées automatiquement. En utilisant la méthode PSD décrite ci-dessus, vous devez créer et télécharger manuellement chaque miniature dans votre CMS. De plus, si vous avez déjà un site existant mais souhaitez appliquer l'effet de rotation à vos vignettes, vous devrez recréer toutes les vignettes dans Photoshop puis les télécharger à nouveau.!
Gérabilité à long terme: Supposons que toutes vos vignettes aient été légèrement pivotées, mais vous souhaitez maintenant réaligner ou redéfinir votre galerie. Cela signifie que vous devrez régénérer toutes vos vignettes. Si vous gérez vos vignettes dans Photoshop, cela signifie que vous devez redéfinir et ré-enregistrer chaque vignette. Pouah.

Ne serait-il pas intéressant de pouvoir effectuer cette petite rotation avec une ligne de code? Bien, vous pouvez! Apprenons comment.

Étape 1: Comprendre notre objectif

Un bref aperçu de ce que nous essayons d'accomplir révèle les étapes suivantes:

Créer une vignette d'image dans Photoshop (non pivotée)
Insérer la vignette en utilisant le img étiquette
Masquez-le de manière appropriée en utilisant CSS (pensez aux masques Photoshop)
Faire pivoter la vignette dans le masque en utilisant CSS3

Pour vous assurer que notre galerie se dégrade gracieusement, les étapes 1 à 3 seront réalisées à l'aide de CSS. L'étape 4 (l'effet de rotation) sera réalisée à l'aide de CSS3.

Étape 2: Comprendre les augmentations de la taille des imagettes et de l'angle de rotation

Avant de créer nos vignettes, nous devons déterminer la taille de chaque vignette à l'écran..

Si nos vignettes sont trop petites et que nous les faisons pivoter trop, certains coins nous laisseront un espace vide. Comme ça:

Par conséquent, pour bien remplir la zone de masque, nous pouvons conclure que plus la vignette est tournée, plus elle devra être grande. En termes mathématiques, au fur et à mesure que l'angle de rotation de la vignette augmente, il en va de même pour la taille de la vignette (et inversement)..

Rappelez-vous cette clé: la vignette de l'image sera toujours plus grande que le masque de l'image (taille de la vignette> taille du masque)

Un avertissement à ceux repoussés par les mathématiques

Les étapes 3 à 6 décrivent comment calculer mathématiquement la taille proportionnelle du masque et de la vignette de l'image. Comprendre qu'il n'est pas nécessaire de pouvoir faire pivoter des images avec le CSS transformer propriété. Son objectif est plutôt de vous aider à comprendre comment déterminer correctement le dimensionnement de vos éléments afin de permettre une rotation complète de 360 °. Cela garantit que vous ne serez pas laissé avec des coins vides laids.

Étape 3: proportionnellement égal

Pour éviter de montrer un espace vide dans notre masque, nous devons déterminer UN du suivant:

Taille de la vignette réelle
Taille du masque d'image (partie visible de la vignette)

Comme la taille de la vignette et celle du masque sont proportionnellement égales, si nous définissons la taille de l’un, nous pouvons calculer la taille de l’autre..

Étape 4: Déterminer les dimensions

Dans cet exemple, nous allons d’abord définir la taille de notre masque d’image. En définissant la taille de notre masque d'image, nous pouvons utiliser un petit calcul pour calculer la taille de la vignette:

Déterminez la taille du masque d'image: 180x240 pixels
Trouver la longueur de la diagonale
- Utilisez le théorème de Pythagore (un² + b² = c² )
  - Notre premier côté (a) est 180px
  - Notre deuxième côté (b) est 240px
  - Donc, 180² + 240² = c² (longueur diagonale)
  - 90 000 = c²
  - 300 = c (prenez la racine carrée de chaque côté)
- Notre longueur en diagonale (c) est égale à 300

La longueur de la diagonale est un nombre important. Pour permettre la rotation complète à 360 ° de notre vignette, le côté le plus court doit correspondre au côté le plus long du masque. (Même si vous n'en avez peut-être pas besoin, le provisioning pour une rotation de 360 ° vous permettra de modifier votre angle de rotation sans avoir à redimensionner vos vignettes.).

Étape 5: Calcul des dimensions de la vignette

Comme vous pouvez le constater, le côté le plus court de notre vignette doit être égal au côté le plus long de notre masque. Si ce n'est pas le cas, il nous restera un espace vide. Rappelez-vous: la taille de la vignette est proportionnellement supérieure à la taille du masque d'image..

Calculer la taille de la vignette pour l'ajuster correctement est facile une fois que nous connaissons les dimensions du masque d'image. Nous prenons simplement le plus grand côté du masque (la diagonale) et le laissons égal au côté le plus court de notre vignette.

Le plus grand côté du masque (300) est égal au côté le plus court de la vignette (x)
Utilisez les relations proportionnelles pour trouver la longueur de la vignette
- 180: 300 (hauteur du masque: hauteur de la vignette)
- 240: y (longueur du masque: longueur de la vignette)
Croix se multiplient pour résoudre
- 180y = 72 000
y = 400 (longueur de la vignette)

Nous avons maintenant déterminé la taille de notre masque et de nos vignettes. Nous savons que si notre masque d’image mesure 180 x 240 pixels, la vignette d’image à l’intérieur de ce masque doit être de 300 x 400 pixels pour permettre une rotation de 360 °..

Une note heureuse: Etant donné que les tailles de masque d’image et de vignette sont proportionnellement égales, ce calcul fonctionnerait également si nous définissions d’abord la taille de la vignette! Nous utiliserions le même théorème de Pythagore et les mêmes relations proportionnelles pour déterminer les tailles appropriées.

Étape 6: Enfin du HTML

Maintenant que nous connaissons toutes nos tailles, construisons nos vignettes pivotées en commençant par un code HTML de base..

    Vignettes pivotées avec CSS3     Vignettes pivotées avec CSS3
 Angle de transformation:     Valeurs numériques uniquement

Ce balisage HTML de base insère les éléments suivants:

- Cela permettra à l'utilisateur de changer l'angle de rotation. En outre, nous définissons notre valeur attribut égal au même montant que nous définirons initialement dans notre CSS (15 dans ce cas).
- Ce message d'erreur sera masqué. En utilisant jQuery, nous le montrerons si l'utilisateur entre autre chose qu'un numéro dans la zone de saisie.
- Ce sont nos vignettes qui peuvent être liées à ce que vous voulez.
clarifier les deux - Efface nos vignettes flottées
classe = "masque" - La classe pour notre masque d'image

Étape 7: Style de page CSS de base

Appliquons quelques styles de base à notre page pour lui donner structure et simplicité.

 corps marge: 0; rembourrage: 0; fond: #eee; font-family: Genève, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif;  #wrapper width: 840px; marge: 0 auto; background: #fff; bordure: 1px solide #ccc; rembourrage: 25px; bordure supérieure: aucune;  #error_message color: red; affichage: aucun; taille de police: .8em;

Notez ici que nous avons caché notre Message d'erreur par défaut, nous allons basculer sa visibilité plus tard dans jQuery.

Ajouter des effets CSS3

Ajoutons quelques détails supplémentaires pour améliorer notre style de base

 #wrapper border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc;

Maintenant, nous avons centré notre contenu sur un bon espacement et quelques effets CSS3 pour un style de page amélioré.

Étape 8: Masque d'image de style CSS

Appliquons le masque d'image à nos vignettes. Dans notre code HTML, nous avons enveloppé chaque vignette dans une balise d'ancrage et lui avons attribué une classe de masque que nous allons utiliser dans notre CSS.

 .masque position: relative; hauteur: 180px; largeur: 240px; float: gauche; débordement caché; marge: 15px; bordure: 5px solide # f6f6f6; box-shadow: 0 0 1px # 000; -moz-box-shadow: 0 0 1px # 000; -webkit-box-shadow: 0 0 1px # 000;

Voici une description des propriétés CSS que nous avons utilisées (et pourquoi nous les avons utilisées):

position: relative - Notre img les balises seront positionnées absolument à l'intérieur de notre masque d'image
la taille, largeur - Plus tôt, nous avons déterminé les dimensions de notre masque d'image. C'est là que nous plaçons ces tailles.
float: gauche - Fait flotter nos images pour qu'elles apparaissent dans une galerie.
débordement caché - Comme calculé précédemment, nos vignettes seront 300x400px. Cependant, nous n'en montrerons qu'une partie (180x240px). Cette propriété agit comme un masque en masquant la partie de nos vignettes qui s'étend en dehors des dimensions 180x240..
marge - Espace nos images
frontière, boîte ombre - Cela nous donne une double bordure (dans les navigateurs compatibles). le frontière propriété nous donne une épaisse bordure blanc cassé autour de l'image tandis que la boîte ombre nous donne une fine bordure noire autour de notre épaisse bordure blanc cassé.

Étape 9: Dimensionnement CSS des miniatures

Définissez nos tailles de vignettes en fonction des dimensions calculées à l'étape 5.

 .masque img hauteur: 300px; largeur: 400px;

Étape 10: CSS centrage des miniatures

Pour le moment, nos vignettes sont positionnées relativement (à partir du coin supérieur gauche).

Nous voulons que notre vignette soit centrée horizontalement et verticalement dans le masque..

Pour ce faire, nous utilisons les règles CSS suivantes:

 .masque img position: absolute; marge supérieure: -150 pixels; / * hauteur moyenne * / margin-left: -200px; / * la moitié de la largeur * / en haut: 50%; à gauche: 50%;

Voici une description de ce que nous avons fait:

position: absolue - Cela place la vignette absolument dans le masque d'image
marge - Nous définissons des marges négatives correspondant exactement à la moitié de la hauteur et de la largeur de l'image (300x400), puis définissons nos propriétés de positionnement. Haut et la gauche qui ramène les éléments au centre parfait.

Étape 11: Rotation des miniatures CSS

Nous allons utiliser la propriété CSS3 transformer faire pivoter nos éléments. Donc, notre CSS inclura tous les préfixes du navigateur

 .masque img -webkit-transform: rotation (15deg); -moz-transform: rotation (15deg); -o-transformer: faire pivoter (15deg); -ms-transform: rotation (15deg); transformer: faire pivoter (15deg);

Le CSS ici est assez simple. Nous plaçons simplement notre angle de rotation entre parenthèses suivi de "deg".

Dans cet exemple, nous avons utilisé 15 comme valeur de rotation, mais vous pouvez y placer une valeur différente. Parce que nous avons correctement calculé les tailles de notre masque et de notre vignette, nous avons prévu de la place pour une rotation complète de 360 °! Un entier positif fait pivoter l'image vers la droite, un entier négatif fait pivoter l'image vers la gauche..

Étape 12: Effet de survol de l'image CSS

En guise d’effet supplémentaire, nous allons ajouter une simple ligne de code CSS qui modifie la couleur de notre bordure lorsque l’utilisateur passe la souris sur l'image..

 .mask: hover border-color: #ddd;

Étape 13: jQuery Modification de la valeur de rotation de manière dynamique

En prime, nous allons permettre à l'utilisateur de saisir une valeur dans notre zone de saisie qui modifie l'angle de rotation CSS. Alors tout d'abord, ajoutons jQuery à la fin de notre page juste avant la fermeture corps tag avec un lien vers notre script personnalisé:

Étape 14: Document jQuery prêt

Maintenant, configurons jQuery lorsque le document est prêt:

 jQuery (document) .ready (function ($) // code ici);

Étape 15: Fonction initiale jQuery

Nous créons une fonction à chaque fois que notre bouton "mise à jour" est cliqué.

 $ ('bouton'). click (function () // code ici);

Étape 16: jQuery Stockage de la valeur de rotation actuelle

Nous voulons stocker la valeur numérique CSS pour l'angle de rotation actuel dans une variable.

 var rotation_angle_valeur = $ ('# rotation_amount'). val ();

Ce code trouve le rotation_amount id (que nous avons assigné à la contribution) et obtient sa valeur actuelle. Si vous vous en souvenez, nous fixons l'initiale valeur attribut égal à 15 (le même que dans notre code CSS pour l'angle de rotation).

Étape 17: jQuery en utilisant la fonction isNaN ()

Nous voulons que la valeur saisie par l'utilisateur soit notre nouvel angle de rotation. Cependant, nous voulons nous assurer que l'utilisateur n'entre pas accidentellement une valeur non numérique. C'est là que le isNaN () la fonction javascript arrive. isNaN () signifie "n'est pas un nombre". Cette fonction fait exactement ce que son nom implique: elle vérifie si la valeur que vous lui transmettez "n'est pas un nombre".

Donc, nous allons utiliser le isNaN () fonction et lui transmettons notre valeur d'angle de rotation (telle que saisie par l'utilisateur). Si ce n'est pas un nombre, nous afficherons notre message d'erreur.

 // vérifie si la valeur d'entrée de l'utilisateur est un nombre ou non if (isNaN (valeur_angle_ rotation)) // pas un nombre $ ('# message_erreur'). show (); // reste du code ici

Étape 18: jQuery Mise à jour du nouvel angle de rotation

Si la nouvelle valeur entrée par l'utilisateur n'est pas un nombre, nous avons affiché un message d'erreur. Maintenant, nous allons utiliser un autre déclaration pour quand ils avoir entré une valeur numérique. D'abord nous cachons le message d'erreur.

 else $ ('# message_erreur'). hide ();

Puisque l'angle de rotation est stocké plusieurs fois dans notre CSS (en raison des différents préfixes du navigateur), nous devons mettre à jour TOUTES ces valeurs avec jQuery. Nous allons donc stocker la syntaxe de la valeur CSS dans une variable (avec la nouvelle valeur d'angle). Essentiellement, nous écrivons faire pivoter (15deg) et remplacer la valeur de '15' par la valeur entrée par l'utilisateur.

 var rotation_angle = 'rotation (' + rotation_angle_valeur + 'deg)';

Ensuite, nous créons un objet CSS avec des valeurs relationnelles. Nous définissons chacune de nos propriétés CSS (les préfixes du navigateur pour la transformation), puis insérons la valeur en tant que variable que nous venons de définir..

 var updated_css = '-webkit-transform': rotation_angle, '-moz-transform': rotation_angle, '-o-transform': rotation_angle, '-ms-transform': rotation_angle, 'transform': rotation_angle,

Maintenant, nous passons simplement cette variable stockant nos propriétés et valeurs CSS à jQuery pour mettre à jour notre CSS!

 $ ('.mask img'). css (updated_css);

Étape 19: Code de jQuery final jQuery

Voici à quoi ressemble notre jQuery:

 jQuery (document) .ready (function ($) $ ('bouton'). click (function () // récupère la valeur de l'angle de rotation var valeur_angle_ rotation = $ ('# rotation_amount'). val (); if (isNaN (rotation_angle_valeur)) // n'est pas un nombre $ ('# message_erreur'). show (); else // est un nombre $ ('# message_erreur'). hide (); // stocke la syntaxe de la valeur CSS avec la nouvelle valeur d'angle de rotation var rotation_angle = 'rotation (' + rotation_angle_valeur + 'deg)'; // stocke les propriétés et valeurs CSS var updated_css = '-webkit-transform': rotation_angle, '-moz-transform': rotation_angle, ' -o-transformer ': rotation_angle,' -ms-transformer ': rotation_angle,' transformer ': rotation_angle, // mettre à jour notre CSS $ ('. mask img '). css (updated_css);););

Conclusion

J'espère que vous avez appris quelque chose, surtout que vous pouvez éviter de vous engager dans des conceptions non flexibles dans Photoshop en utilisant les techniques CSS3 directement dans le navigateur. Merci d'avoir suivi!

Création de sites web