Fermer

août 20, 2018

Utilisation des transformations CSS dans le monde réel –


Dans cet article, nous apprendrons comment les transformations CSS peuvent être utilisées dans le monde réel pour résoudre diverses tâches et obtenir des résultats intéressants. Plus précisément, vous apprendrez à ajuster les éléments verticalement, à créer des flèches jolies, à créer des animations de chargement et à créer des animations flip.

Les transformations des éléments HTML sont devenues une norme CSS3 en 2012 Les transformations vous permettent de transformer des éléments sur une page Web – comme expliqué dans notre article 101 sur les transformations CSS . Vous pouvez facilement faire pivoter, mettre à l'échelle ou incliner vos éléments avec une seule ligne de code, ce qui était difficile auparavant. Les transformations 2D et 3D sont disponibles.

En ce qui concerne la prise en charge des navigateurs, les transformations 2D sont prises en charge par tous les principaux navigateurs y compris Internet Explorer, pris en charge depuis la version 9. n'a qu'un support partiel depuis la version 10.

Cet article ne traite pas des bases des transformations. Si vous ne vous sentez pas très en confiance avec les transformations, je vous recommande d'abord de lire 2D et

Aligner verticalement les enfants

Tout concepteur Web sait à quel point il peut être fastidieux être d'aligner verticalement les éléments. Cette tâche peut sembler très simple pour une personne qui ne connaît pas le CSS, mais en réalité, il existe un mélange de techniques soigneusement préservées entre générations de développeurs. Certains suggèrent d'utiliser display: inline avec vertical-align: middle quelques votes pour display: table et styles d'accompagnement, alors que les vrais codeurs old school continuent de concevoir leur les sites avec des tables (en plaisantant, ne faites pas ça!). En outre, il est possible de résoudre cette tâche avec Flexbox ou Grids, mais pour les composants plus petits, les transformations peuvent être une option plus simple.

L'alignement vertical peut être plus complexe lorsque les hauteurs d'éléments sont variables. Cependant, les transformations CSS fournissent un moyen de résoudre le problème. Voyons un exemple très simple avec deux div imbriquées s:

Lorem ipsum dolor assis amet, consectetur adipiscing elit, sed do eiusmod temporel Ut enim ad minim veniam, quis nostrud exercice ullamco laboris nisi ut aliquip ex ea commodo conséquat. Duis aute irure dolor in reprehenderit en volupté velit esse cillum dolore   
Lorem ipsum est tombé en panne, il a détecté une élimination, il est tombé dans le temps et a utilisé une autre méthode. Ut enim ad minim veniam   

Rien de complexe: juste deux blocs imbriqués avec un texte Lorem Ipsum de longueur différente.

Définissons la largeur, la hauteur et la bordure du parent, ainsi qu'un certain espacement pour le rendre plus joli. :

 .parent {
  hauteur: 300px;
  largeur: 600px;
  padding: 0 1em;
  marge: 1em;
  bordure: 1px rouge fixe;
}

Également agrandir la taille de la police des enfants:

 .child {
  taille de police: 1.2rem;
}

En conséquence, vous verrez quelque chose comme ceci:

 Notre mise en page initiale

Et maintenant, votre client dit: "Veuillez aligner le texte verticalement pour qu'il apparaisse au milieu de ces boîtes rouges ". Nooo! . Mais ne craignez rien: nous sommes armés de transformations! La première étape consiste à positionner nos enfants relativement et à les déplacer de 50% vers le bas:

 .child {
  taille de police: 1.2rem;
  position: relative;
  en haut: 50%;
}

Après cela, appliquez un ingrédient secret – la fonction traductionY – qui repositionnera les éléments verticalement:

 .child {
  taille de police: 1.2rem;
  position: relative;
  en haut: 50%;
  transformer: translateY (-50%);
}

Alors, que se passe-t-il ici? top: 50% déplace le haut de l'élément enfant vers le centre du parent:

 Déplacement du haut de l'élément enfant vers le centre du parent

Ce n'est pas suffisant, car nous voulons que le centre pour enfants soit aligné avec le centre des parents. Par conséquent, en appliquant le translateY nous déplaçons l'enfant de 50% de sa hauteur:

 Centrage vertical avec translateY

Certains développeurs ont rapporté que Cette approche peut rendre les enfants flous car l'élément est placé sur un "demi pixel". Une solution consiste à définir la perspective de l'élément:

 .child {
  // ...
  transformer: perspective (1px) translateY (-50%);
}

Ça y est! Vos enfants sont maintenant alignés correctement même avec du texte variable, ce qui est vraiment bien. Bien sûr, cette solution est un peu piratée, mais elle fonctionne dans les anciens navigateurs, contrairement à CSS Grid. Le résultat final peut être vu sur CodePen:

Voir le stylo Transformations CSS: alignement vertical par SitePoint ( @SitePoint ) sur CodePen .

] Création de flèches

Un autre cas d'utilisation très intéressant pour les transformations est la création de flèches de bulle vocale qui s'adaptent correctement. Je veux dire, vous pouvez certainement créer des flèches avec un éditeur graphique, mais c'est un peu fastidieux, et ils peuvent aussi ne pas évoluer avec une image bitmap.

Essayons plutôt d'utiliser une solution CSS pure. Supposons que nous ayons une boîte de texte:

Lorem ipsum dolor assis amet, consectetur adipiscing elit, sed do eiusmod temporel Ut enim ad minim veniam   

Il a un style générique pour le faire ressembler à une bulle de dialogue:

 html {
  taille de la police: 16px;
}

.boîte {
  largeur: 10rem;
  couleur de fond: # e0e0e0;
  padding: 1rem;
  marge: 1rem;
  border-radius: 1rem;
}

 Boîte à coins arrondis

J'utilise des unités rem pour que la taille de la police soit modifiée en conséquence.

, Je voudrais que cette bulle devienne plus "bulle" en affichant une flèche à droite. Nous y parviendrons en utilisant un :: avant le pseudo-sélecteur :

 .box :: before {
  contenu: '';
  width: 1rem;
  hauteur: 1rem;
  couleur de fond: # e0e0e0;
  débordement caché;
}

Plus la largeur et la hauteur que vous assignez sont grandes, plus la flèche sera grande.

Déplacez maintenant la flèche vers la droite:

 .box {
  // ...
  position: relative;
}

.box :: avant {
  // ...
  position: absolue;
  à droite: -0.5rem;
}

Cependant, cet élément ne ressemble pas du tout à une flèche:

 Pas encore une flèche

Alignons cette petite boîte verticalement. Tant que ses dimensions sont statiques, la tâche est simple:

 .box :: before {
  // ...
  en haut: 50%;
}

Ce n'est pas précisément aligné, mais nous le réparerons plus tard.

Maintenant, il est temps de passer à la transformation. Il suffit de faire pivoter cette petite case pour la transformer en triangle comme une flèche:

 .box :: before {
  // ...
  transformer: faire pivoter (45deg);
}

Voici une capture d'écran de la console du développeur (la case est surlignée en bleu pour que vous puissiez voir comment elle est positionnée):

 Vue de la console de développement du carré pivoté déplacez la flèche un peu vers le haut en utilisant une marge négative afin qu'elle soit positionnée précisément au milieu de la boîte:

 .box :: before {
  // ...
  margin-top: -0.5rem;
}

C'est ça! Maintenant, même si vous avez besoin d'ajuster la taille de la police sur la page, votre boîte et la flèche vont être correctement mises à l'échelle! Voici le résultat final:

Voir le stylo Transformations CSS: flèches par SitePoint ( @SitePoint ) sur CodePen .

Création d'une "boule de saut" "Loader

Malheureusement, les choses sur le Web ne se produisent pas instantanément. Les utilisateurs doivent souvent attendre qu'une action soit terminée, qu'il s'agisse d'envoyer un courrier électronique, de publier leur commentaire ou de télécharger des photos. Par conséquent, il est judicieux d’afficher un indicateur de «chargement» pour que les utilisateurs comprennent qu’ils devront attendre quelques secondes.

Auparavant, quand il n’y avait ni animations ni transformations CSS, nous utiliserions probablement un éditeur graphique pour créer une image animée du chargeur GIF. Ce n'est plus nécessaire car CSS3 offre des options puissantes. Alors, voyons comment les transformations peuvent être utilisées en conjonction avec des animations pour créer une belle boule de saut.

Pour commencer, créez un vide div :

  

Les balles sont généralement rondes (capitaine évident à la rescousse!), Nous allons donc lui donner la largeur, la hauteur et le rayon de la bordure:

 .loader {
  rayon frontière: 50%;
  largeur: 50px;
  hauteur: 50px;
}

Utilisons également un éditeur de dégradé d'arrière-plan CSS pour générer du dégradé:

 .loader {
  rayon frontière: 50%;
  largeur: 50px;
  hauteur: 50px;
  fond: gradient linéaire (en bas, # cb60b3 0%, # c146a1 50%, # a80077 51%, # db36a4 100%);
}

Voici notre boule pourpre brillante qui ressemble à du pokeball:

 Notre boule pourpre brillante

Comment la fait-on sauter? Eh bien, avec l'aide de animations CSS ! Plus précisément, je vais définir une animation infinie appelée jump qui dure 1,5 seconde et effectue les actions répertoriées dans les deux sens:

 .loader {
  // ...
  animation: saut 1.5s facilité-aller infini alterné;
}

Ensuite, demandons-nous: qu'est-ce que cela signifie quand on dit "sauter"? Dans le cas le plus simple, cela signifie se déplacer de haut en bas sur l’axe des Y (verticalement). Donc, utilisons à nouveau la fonction traductionY et définissons des images clés:

 @keyframes jump {
  de {
    transformer: translateY (0px)
  }
  à {
    transformer: translateY (-50px)
  }
}

Au départ, la balle se trouve aux coordonnées (0,0) mais nous la déplaçons ensuite jusqu'à (0,50) . Cependant, nous ne disposons peut-être pas de suffisamment d’espace pour que la balle puisse réellement sauter, alors donnons-lui une marge:

 .loader {
  margin-top: 50px;
}

Bien sûr, nous pouvons faire plus. Par exemple, faisons pivoter cette balle pendant qu'elle saute:

 @keyframes jump {
  de {
    transformer: translateY (0px) pivoter (0deg)
  }
  à {
    transformer: translateY (-50px) pivoter (360deg)
  }
}

Aussi, pourquoi ne pas le rendre plus petit? Pour cela, utilisons une fonction scale qui modifie la largeur et la hauteur de l'élément à l'aide des multiplicateurs donnés:

 @keyframes jump {
  de {
    transformer: translateY (0px) tourner (0deg) échelle (1,1);
  }
  à {
    transformer: translateY (-50px) tourner (360deg) échelle (0.8,0.8);
  }
}

Soit dit en passant, toutes les fonctions doivent être listées pour la propriété transform dans de et à car sinon l'animation a gagné t fonctionne correctement!

Enfin, ajoutons de l'opacité à la balle:

 @keyframes jump {
  de {
    transformer: translateY (0px) tourner (0deg) échelle (1,1);
    opacité: 1;
  }
  à {
    transformer: translateY (-50px) tourner (360deg) échelle (0.8,0.8);
    opacité: 0,8;
  }
}

C'est ça! Notre élément loader est prêt et voici le résultat final:

Voir le stylo Transformations CSS: boule de chargement par SitePoint ( @SitePoint ) sur CodePen .

Création d'un chargeur "Spinner" avec SVG

Nous avons déjà vu comment créer un chargeur "simple" avec seulement quelques lignes de code. Pour un effet plus complexe, cependant, vous pouvez utiliser des fichiers SVG définis avec un ensemble de balises spéciales.

Cet article n'a pas pour but d'expliquer le fonctionnement des images SVG et leur création, mais Sitepoint a un couple d'articles sur le sujet.

A titre d'exemple, créons un chargeur spinner. Voici le SVG correspondant:

   

    

   
     
     
     
  

    


Principales choses à noter ici:

  1. Notre canevas a une fenêtre d'affichage de 66 × 66.
  2. Ceci définit le cercle réel qui va tourner. Son centre est situé à (33,33) et son rayon est de 31px. Nous aurons également un coup de 2px, ce qui signifie 31 * 2 + 2 * 2 = 66 . stroke = "url (#gradient) signifie que la couleur du trait est définie par un élément dont l'ID est #gradient .
  3. C'est notre dégradé pour le trait du compteur. Il a trois points d'arrêt qui définissent différentes valeurs d'opacité, ce qui donnera un effet plutôt sympa.
  4. C'est un point qui sera affiché sur le trait du spinner. Il ressemblera à une petite "tête".

Définissons maintenant un style pour le canevas et le redimensionnons jusqu'à 180 × 180:

 .spinner {
  marge: 10px;
  largeur: 180px;
  hauteur: 180px;
}

Maintenant, le .spinner-border .spinner-dot et quelques styles communs pour eux:

 .spinner-dot {
  accident vasculaire cérébral: # 000;
  largeur de trait: 1;
  remplir: # 000;
}

.spinner-border {
  remplir: transparent;
  largeur de trait: 2;
  largeur: 100%;
  hauteur: 100%;
}

.chemin {
  stroke-dasharray: 170;
  accident vasculaire cérébral: 20;
}

Voici comment notre fileuse regarde cette étape. Pour l'instant, il ne tourne pas, bien sûr:

 Notre spinner à ce stade

Maintenant, faisons-la tourner, ce qui signifie en fait une rotation de 360 ​​degrés:

 .spinner {
  // ...
  animation: faire pivoter l'infini linéaire 2s;
}

@keyframes tourne {
  à {
    transformer: tourner (360deg);
  }
}

Ceci est une animation infinie qui prend 2 secondes pour terminer.

En outre, nous pouvons obtenir un effet intéressant d'un "serpent essayant de mordre sa queue " avec une fonction d'inclinaison. Rappelez-vous que j'ai appelé ce petit point un "chef"? Pourquoi ne prétendons-nous pas que c'est la tête d'un serpent alors? Afin de le rendre plus réaliste, nous allons le modifier sur l’axe des X:

 .spinner-dot {
  // ...
  animation: oblique 2s linéaire alterné infini;
}

@keyframes skew {
  de {
    transformer: skewX (10deg)
  }
  à {
    transformer: skewX (40deg)
  }
}

Maintenant, il semble que le serpent essaie vraiment de traîner à sa queue:

 Un serpent qui poursuit sa queue

Voici le résultat final de notre spinner:

Transformations CSS: Chargeurs avec SVG par SitePoint ( @SitePoint ) sur CodePen .

Création d'une animation Flip

Le dernier exemple est une photo avec un retournez l'animation. Lorsque vous survolez une photo, celle-ci se retourne et sa description est affichée. Cela peut être utile pour les sites Web de type Instagram.

Commençons donc par créer une mise en page:

Lorem ipsum dolor s'asseoir, consigner dans l'adipiscité elit, sed do eiusmod temporel     
Lorem ipsum dolor se dresse, consulte la lecture de l'adipice, sed eiusmod temporel     
Lorem ipsum dolor s'asseoit, consulte la lecture et élimine, mais ne fait pas de lui-même dans le temps.     
  

Nous avons ici un conteneur avec trois photos. Ces photos vont effectivement avoir deux côtés: recto et verso, comme si une pièce avait des têtes et des queues. Le recto contient l'image réelle, alors que le verso (qui n'est pas visible initialement) contient la description.

Style du conteneur en lui donnant une marge:

 .container {
  marge: 10px auto;
}

Chaque photo s'ajuste en fonction de la largeur de la fenêtre et flotte à gauche:

 .photo {
  largeur: 22vw;
  hauteur: 20vw;
  min-width: 130px;
  min-height: 100px;
  float: à gauche;
  marge: 0 20px;
}

Les images elles-mêmes doivent conserver les proportions et essayer de remplir le parent:

 .photo img {
  ajustement d'objet: couverture;
}

Chaque côté devrait occuper 100% de la largeur et de la hauteur du parent:

 .side {
  largeur: 100%;
  hauteur: 100%;
}

Maintenant, nous avons des images avec des descriptions ci-dessous qui semblent assez génériques:

 Une présentation de galerie assez standard

Ensuite, j'aimerais placer la description juste au dessus de l'image ( sur l'axe Z). Pour cela, réglons certaines position rules:

 .photo {
  // ...
  position: relative;
}

.side {
  // ...
  position: absolue;
}

Le texte est maintenant affiché sur l'image:

 Texte affiché sur l'image

Maintenant, il est temps de faire de la magie. J'aimerais que les enfants du bloc .photo soient positionnés en 3D à l'aide de la propriété de style transform . Cela nous permettra d'atteindre un sentiment de perspective:

 .photo {
  // ...
  Transformer le style: préserver-3d;
}

La face arrière ne devrait pas être visible initialement:

 .side {
  // ...
  visibilité sur la face arrière: caché;
}

Quant à la .back elle-même, faites-la pivoter de 180 degrés sur l'axe Y:

 .back {
  transformer: rotateY (180deg);
  text-align: center;
  couleur de fond: # e0e0e0;
}

La description sera masquée.

Définissez ensuite l'animation de survol:

 .photo: hover {
  transformer: rotateY (180deg);
}

Maintenant, lorsque vous passez le curseur sur le conteneur, le fichier .photo tournera et vous pourrez le voir avec la description. Vous voudrez probablement que cela se produise plus facilement, alors ajoutez une simple transition CSS:

 .photo {
  // ...
  transition: transforme la facilité de 1s en entrée / sortie;
}

Voici le résultat final:

Voir le stylo Transformations CSS: 3D et flip par SitePoint ( @SitePoint ) sur CodePen .

Un mot de prudence

Sans aucun doute, les transformations CSS et les animations sont des outils très puissants qui peuvent être utilisés pour créer des effets intéressants et beaux. Cependant, il est important d'être raisonnable quant à leur utilisation et de ne pas en abuser. Rappelez-vous que vous créez des sites Web pour les utilisateurs et non pour vous-même (dans la plupart des cas, de toute façon). Par conséquent, CSS devrait être utilisé pour améliorer l'expérience utilisateur, plutôt que pour montrer toutes les astuces que vous avez apprises jusqu'à présent.

D'une part, trop d'effets sur la page distraient les utilisateurs. Certains visiteurs peuvent souffrir du mal des transports ou de troubles vestibulaires . Il leur sera donc très difficile d'utiliser un site Web avec des animations rapides. En plus de cela, vous devez vous assurer que la page fonctionne avec les anciens navigateurs, car il peut arriver que certains éléments importants soient cachés ou inaccessibles lorsque les animations ne fonctionnent pas.

Conclusion

Dans cet article, nous avons vu comment les transformations CSS en conjonction avec d'autres techniques peuvent être utilisées pour résoudre diverses tâches de conception. Nous avons vu comment aligner verticalement des éléments sur la page, créer des flèches évolutives, des chargeurs de rebond et de rotation, et comment implémenter une animation flip. Bien sûr, vous n'avez appris que quelques techniques, mais la seule limite est votre imagination.

Si vous avez des questions supplémentaires, n'hésitez pas à les publier dans les commentaires.




Source link