Les témoignages de clients sont une caractéristique populaire du site Web. Ils apportent de la crédibilité à une entreprise et instaurent un sentiment de confiance. Si vos autres clients vous aiment tellement, je pourrais aussi!
En guise d’expérience amusante, nous allons aujourd’hui créer une petite section de citation intéressante, qui effectuera une rotation entre plusieurs citations à l’aide de CSS. En cours de route, nous apprendrons tout sur la planification et la création de séquences d'images clés en plusieurs étapes. Commençons.
Le HTML
Pour démarrer ce projet, nous devons décider de la structure de notre devis. En règle générale, une citation client contient trois éléments de texte: le nom du client, son lieu d'origine et ce qu'il a dit.
Dans cet esprit, nous pouvons créer un conteneur de devis composé de trois éléments différents. L'en-tête contiendra le nom du client, le petit élément contiendra vraisemblablement le nom de la société d'origine du client ou toute autre information connexe, et le paragraphe contenant le texte du devis.
Comme nous avons utilisé trois éléments différents, nous n’avons besoin d’aucun crochet supplémentaire et nous devrions pouvoir cibler facilement chaque élément de la citation dans notre code CSS. En remarque, j’ai choisi arbitrairement un h3 ici tout simplement parce que h1 et h2 sont généralement utilisés à d’autres fins. N'hésitez pas à changer cela en ce que vous voulez.
Maintenant que nous avons déterminé notre structure, il est temps de l'étendre en trois citations différentes. Pour montrer la polyvalence de ce projet, j'ai décidé de remplir mon texte avec les derniers mots de quelques personnes célèbres. Un peu morbide, mais comme espace réservé ça va le faire!
CSS de démarrage
Une fois que vous avez rédigé votre code HTML, passez directement à votre code CSS et entrez quelque chose de similaire au code ci-dessous. Fondamentalement, j'ai défini un motif de fond intéressant et défini le conteneur qui contiendra les guillemets.
Styles de devis
Ensuite, il est temps d'appeler les divs de citation. J'ai utilisé le positionnement absolu ici pour que les trois guillemets occupent le même espace. Par défaut, ils créeront une pile verticale, mais nous ne le voulons pas du tout. Dans notre produit fini, une citation disparaîtra, puis une autre apparaîtra en fondu. Par conséquent, nous voudrons qu'ils soient au même endroit.
J'ai également mis l'opacité à zéro afin que toutes les citations soient masquées par défaut. L'opacité est une propriété originale qui est vraiment un casse-tête de travailler avec. Nous en reparlerons un peu plus tard. La chose à noter maintenant, c'est que vous ne verrez rien avec l'opacité à zéro, vous voudrez donc commenter temporairement cette partie pendant que vous appelez la section quote.
Citer les styles de texte
Maintenant que nous avons stylé le conteneur de devis général, il est temps de saisir chaque texte et de le styler individuellement. Pour cette démonstration, nous allons rendre le texte agréable et grand. Réglez donc h3 sur 55 pixels et le petit sur 18 pixels, puis utilisez Helvetica pour la famille de polices.
Notre tâche avec le paragraphe est beaucoup plus complexe. Non seulement devons-nous le styler dans une boîte, nous devons également le retirer de la pile et le coller à la droite de l'autre contenu.
Pour que cela se produise, nous devons faire un certain nombre de choses, c'est pourquoi j'ai divisé mes styles en trois étapes (voir ci-dessous).
Pour la première étape, j'ai géré le? Givrage? ou des éléments visuels standard. J'ai fait le fond blanc, définir la police et aligné le texte au centre. Ensuite, j'ai géré le positionnement et la taille de la boîte réelle en utilisant un rembourrage et un positionnement absolu. J'ai terminé le tout avec un rayon de bordure optionnel qui arrondit bien les angles.
Vérification des progrès
Si nous vérifions nos progrès en veillant à ce qu'une citation soit visible, nous sommes plutôt bien! Cependant, notre citation est assis dans une vieille boîte plaine. Nous manquons le petit triangle qui fait ressembler à une bulle de dialogue.
Ajout du triangle
Pour ajouter ce petit triangle, nous devons passer au pseudo-élément: after. Fondamentalement, nous créons un élément vide, le positionnons sur le côté gauche et appliquons une délicate frontière vaudou.
Comme vous pouvez le constater, cela nous donne l’effet recherché, pas mal hein?
Animate That Sucka
Maintenant que notre style visuel et notre positionnement sont bien définis, il est temps de trouver un moyen de supprimer une citation, d'insérer une citation dans une autre et de répéter ce processus sur une boucle infinie. Nous pourrions et devrions utiliser jQuery, mais aujourd'hui, nous essayons de le comprendre avec du CSS pur, nous allons donc nous tourner vers les animations d'images clés.
Je vais être brutalement honnête ici, je fais ce genre de travail presque tous les jours et il me fallait toujours une éternité pour trouver la séquence appropriée à utiliser pour que les images clés s’affichent et disparaissent au bon moment. Je tripotais, tripotais et gardais des chevauchements délicats et des résultats qui n'étaient pas du tout ce que je voulais.
Je vous le dis pour que vous sachiez que vous n'êtes pas seul si vous vous retrouvez encore à frapper des murs difficiles à surmonter. Finalement, j'ai eu mon cerveau lent pour comprendre le concept cependant.
Je suis un penseur visuel, alors j'ai fait un tableau brut pour voir comment tout cela fonctionne. Fondamentalement, nous voulons empiler ces animations de manière à ce qu’un seul devis soit visible à la fois. Pour ce faire, nous allons créer une animation de trente secondes et la scinder en trois parties. Les première et dernière parties auront une opacité de zéro et la deuxième partie aura une opacité de un.
Comme vous pouvez le constater, nous devons retarder l'heure de début de la deuxième animation de 10 secondes et l'heure de début de la troisième animation de 20 secondes. Ainsi, si vous tracez une ligne verticale en un point quelconque du graphique, vous ne pouvez afficher plus d’une citation à la fois.
Maintenant, quand j'ai implémenté ceci, je n'ai pas aimé combien de temps il a fallu les guillemets pour disparaître et disparaître. Je veux un fondu rapide, une longue période de visibilité et un fondu rapide. Pour ce faire, nous devons simplement ajouter quelques images clés supplémentaires. Voici la séquence que je suis venu avec:
Nous n'avons besoin que de configurer la séquence unique, mais nous l'appliquons de trois manières différentes aux trois citations séparées. Fondamentalement, la seule différence est la valeur du délai, ce qui fait que l'animation attend quelques secondes avant de commencer.
C'est tout ce qu'on peut en dire! Lorsque la page est chargée, la première citation apparaît en fondu, puis en fondu à la seconde citation (et ainsi de suite).
Compatibilité du navigateur
À ce stade, vous êtes probablement en train de crier à l'écran de votre ordinateur que je suis un idiot qui utilise uniquement les préfixes Webkit. En vérité, je n'ai fait cela que pour que les choses restent compréhensibles. Maintenant que nous avons tout compris, nous pouvons utiliser notre bon vieil ami Prefixr pour le développer. Lorsque nous faisons cela, voici le morceau de code géant qui se crache:
Comme je l'ai mentionné précédemment, notre utilisation de la propriété opacity est un peu suspecte car la prise en charge de l'opacité est un gâchis. Heureusement, Prefixr prend les devants et tente de s’assurer que notre code est prêt à fonctionner sur autant de navigateurs que possible. Malheureusement, il y a un peu de panique en insérant toutes ces propriétés de filtre là où elles ne sont pas forcément nécessaires. Un nettoyage peut donc être une bonne idée.
Selectivizr
Nous avons utilisé des sélecteurs avancés dans le didacticiel. Par conséquent, en ce qui concerne la prise en charge des navigateurs, il convient d'ajouter que vous devez ajouter Selectivizr et jQuery à votre projet pour vous assurer que les anciens navigateurs les comprennent.
Prise en charge des images clés
Voici le kicker, nous avons examiné tout cela pour nous assurer que nous avons optimisé la prise en charge de notre navigateur sur les sélecteurs et l'opacité, mais à la fin, IE refusera toujours de jouer car il n'y a pas de prise en charge des images clés jusqu'à IE 10. .
De toute évidence, JavaScript va être la solution ici si vous voulez utiliser cela dans le monde réel. Vous pouvez faire tout le travail dans JS ou simplement l'utiliser comme une sauvegarde pour les navigateurs qui ne prennent pas en charge les images clés.
Démo
Voici la démo en direct. Assurez-vous d'attendre un moment lorsque vous le lancez, rappelez-vous que l'animation entière prend trente secondes!
Démo: Cliquez ici pour lancer
Conclusion
Les images clés ont parcouru un long chemin depuis l'époque où elles n'étaient prises en charge que par les navigateurs Webkit. Cependant, gardez à l'esprit que, grâce à notre vieil ami IE, ils sont encore plus du domaine du "plaisir de jouer". que vous devriez miser sur des projets importants.
Laissez un commentaire ci-dessous et dites-nous si vous avez apprécié ce tutoriel et comment vous pourriez l'améliorer!