Ajouter des filtres SVG avec CSS

Ajouter des filtres SVG avec CSS

SVG existe depuis le début des années 2000, et pourtant, les concepteurs trouvent encore des façons intéressantes de l'utiliser. Dans ce didacticiel, l'accent sera mis sur les filtres appliqués via SVG - mais au lieu de les appliquer à une , nous vous montrerons comment ils peuvent être appliqués à n'importe quel contenu de page normal.

La façon dont le filtre est appliqué au SVG se fait en fait par CSS, en lui indiquant l'ID du filtre. En utilisant cette même idée, le filtre peut être appliqué au texte normal, par exemple. L'avantage à ce sujet est que vous pouvez ajouter de superbes graphismes à votre texte, ce qui n'aurait été possible auparavant qu'en appliquant un certain nombre de filtres Photoshop et en l'enregistrant sous forme d'image. En utilisant le filtre SVG, le texte reste accessible et sélectionnable, car il ne s'agit encore que d'un élément de texte normal sur votre page.

Le code ici créera une carte de déplacement vers le texte qui contient également une carte alpha pour la faire apparaître aqueuse et s'adapter au thème de la page. Ensuite, un autre filtre sera créé qui fait apparaître un menu sous forme de gouttes d'eau, qui collent légèrement ensemble mais se séparent à mesure qu'elles s'éloignent. Encore une fois, cela reste avec le thème de cette page particulière et montre deux façons créatives d'appliquer des filtres SVG à d'autres contenus.



Vous souhaitez en savoir plus sur SVG? Jetez un œil à notre article sur tout ce que vous devez savoir sur SVG sur le Web . Vous pouvez également ajouter de l'intérêt à vos sites avec l'un de ces Exemples d'animation CSS .

01. Commencer

Tout d'abord, vous devez télécharger les fichiers du projet en utilisant le lien directement ci-dessus. Une fois que vous avez fait cela, faites glisser le début dossier de projet sur votre IDE de code et ouvrez le index.html page. Vous verrez qu'il y a du contenu de page déjà écrit. La section d'en-tête doit être créée, et elle contiendra le titre qui sera affecté par un filtre SVG. Ajoutez le code ici, juste à l'intérieur du corps étiqueter.

Underwater Adventure Park

02. Fermez l'en-tête

Maintenant, l'en-tête est terminé, avec tout le texte correspondant en place. Si vous affichez votre page dans le navigateur pour le moment, vous verrez une image d'eau avec du texte dessus. Le titre, qui n'est pas encore stylé actuellement, va être stylisé et le filtre SVG lui sera appliqué.

Experience the Ocean
Like Never Before

Underwater Adventure Park is an experience unlinke anything you have ever had. Travel to the depths of the Ocean and walk among the Sea Life!

03. Créez un filtre SVG

Le code SVG peut être ajouté n'importe où sur la page, mais comme il ne sera pas vu, il peut être judicieux de le placer en bas, avant la balise de fermeture du corps. Le filtre SVG crée un bruit de turbulence. Notez que le filtre a un ID - c'est ce qui permet au CSS de l'appliquer à un autre élément de la page.

04. Masquer le SVG

Passez au page.css fichier maintenant, et surtout le code CSS pour le reste de la page sera où notre nouveau CSS ira. Ici, le SVG est configuré pour ne pas s'afficher du tout sur la page. La balise d'en-tête deux est définie pour avoir la bonne police de caractères.

svg { display: none; } h2 { font-size: 5.5vw; font-family: 'Crete Round', serif; }

05. Ajouter au titre

Le hauteur de la ligne est mis à zéro car plus tard le titre sera animé, il est donc important de contrôler sa mise à l'échelle sur la page. On lui donne également un peu de rembourrage pour qu'il reste avec la bonne quantité d'espace autour de lui et la couleur est changée.

.headline { line-height: 0; display: inline-block; padding: 70px; color: #ccffff;

06. Terminez le titre

Ajouter des filtres SVG avec CSS: Terminez le titre

Le SVG sera utilisé pour déplacer le texte du titre

En terminant la classe de titre, la ligne suivante applique le déplacementFiltre ID dans le SVG au texte. Le translate3d garantit que le texte devient accéléré par le matériel. L'échelle est légèrement modifiée pour s'assurer que lorsque le déplacement est appliqué, il semble correct.

filter: url(#displacementFilter); transform: translate3d(0, 0, 0); transform: scaleY(1.8) rotateY(-2deg); }

07. Faites-le déplacer

Ajouter des filtres SVG avec CSS: faites-le déplacer

Et maintenant le texte est déplacé

Si vous testez le filtre à ce stade, la turbulence remplace complètement le texte. C'est facile à réparer. Revenez au code de filtre dans la page index.html. Cela prend la turbulence et le graphique source, qui est le texte, et l'applique comme filtre de déplacement. Essayez de changer la fréquence de base et le nombre d'octaves dans la turbulence.

08. Adoucissez les bords

Ajouter des filtres SVG avec CSS: adoucissez les bords

Utilisez un flou gaussien pour adoucir le texte

Les bords semblent un peu durs pour un effet aqueux. Cela peut être guéri avec un flou gaussien. Ajoutez le code après la carte de déplacement. Lorsque vous actualisez la page, le texte est définitivement brouillé mais le déplacement a disparu. Encore une fois, ce sont des éléments qui peuvent être fixés sur la manière de créer l'effet.

09. Composez les deux

Ajouter des filtres SVG avec CSS: Composer les deux

Combinez le flou et le déplacement pour un effet plus agréable

Ajoutez la ligne composite ci-dessous le flou gaussien précédent. Vous verrez que cela combine le flou et le déplacement ensemble, et crée également un effet translucide aqueux sur le texte. Cela a permis d'adoucir les bords, mais pas assez. Ce serait bien si le flou d'origine pouvait être ajouté à cela.

10. Fusionnez le flou

Ajouter des filtres SVG avec CSS: fusion du flou

Avec une opération de fusion, cela sera encore mieux

Une opération de fusion permet de fusionner le résultat final du composite avec l'effet de flou. Cela semble maintenant correspondre à l'image d'arrière-plan et semble correspondre aux lignes de lumière traversant l'eau. La meilleure partie du texte est qu'il est toujours sélectionnable et fait partie de la page, contrairement à ce que vous avez créé dans Photoshop.

11. Créez une animation

Revenir à la page.css et ajoutez les images clés comme indiqué ici. Cela augmentera simplement la taille de la police d'une largeur verticale nulle à une largeur verticale de 5,5. Au début, cela sera appliqué au titre, de sorte que le texte augmente et se mette en place à l'écran. Au fur et à mesure que le texte se déplace, le déplacement changera également sur la longueur, donnant une ondulation aqueuse.

@keyframes scaler { from { font-size: 0vw; } to { font-size: 5.5vw; } }

12. Changer le style h2

Ajouter des filtres SVG avec CSS: changer le style h2

Remplacez le h2 pour apporter une certaine animation

Le h2 style a été précédemment ajouté à l'étape 4. Remplacez ce code par ce nouveau code, qui ajoute l'animation CSS sur quatre secondes à l'en-tête. L'animation s'arrête et se maintient sur la dernière image clé. Enregistrez-le et testez-le dans le navigateur pour voir le texte se mettre en place.

h2 { line-height: 0; font-size: 0vw; animation-name: scaler; animation-duration: 4s; animation-fill-mode: forwards; font-family: 'Crete Round', serif; }

13. Ajouter une navigation

Créons maintenant une animation inspirée des gouttes d'eau appropriée à l'aide d'un autre filtre SVG. Ajoutez le contenu de navigation suivant tout en haut du code du corps, avant l'en-tête qui a été démarré dans la première étape du didacticiel. Cela créera les bases d'un menu hamburger dans un cercle.

14. Terminez la navigation

Maintenant, les éléments de navigation restants peuvent être ajoutés. Cela utilise également la bibliothèque d'icônes open source Font Awesome, qui a été ajoutée à la section principale pour créer un lien depuis le CDN de cette bibliothèque. Chaque élément circulaire de menu aura une icône à l'intérieur.

15. Ajoutez le nouveau filtre

Un autre filtre va être ajouté pour cet effet. Dans le SVG, ajoutez ce code après la balise de filtre de fermeture du code ajouté précédemment. Ici, les effets sont construits d'une manière très similaire à précédemment. Cela permettra au menu de ressembler à des gouttes collantes de liquide s'écartant.

16. Terminez le filtre

Le reste du filtre est ajouté ici, ce qui complète l'effet qui sera placé sur chaque cercle des éléments de menu. Cela entraînera l'ajout de l'effet de goutte liquide aux éléments. Enregistrez cette page, puis passez au fichier 'design.css'.

17. Appliquer le filtre

Le code CSS peut maintenant être ajouté aux différents design.css , juste pour garder tous les CSS de navigation ensemble au même endroit. Un certain code a été ajouté, mais ici le filtre est appliqué au menu, qui sera un menu fixe afin qu'il soit présent à tout moment à l'écran.

.menu { filter: url(“#shadowed-blob'); position: fixed; padding-top: 20px; padding-left: 80px; width: 650px; height: 150px; box-sizing: border-box; font-size: 20px; text-align: left; }

18.Faire fonctionner le menu

Le menu est configuré pour devenir invisible lorsque le menu est ouvert. L'élément de survol de chacun des éléments de menu est créé de sorte qu'il y ait un changement lorsque l'utilisateur survole cela. Chaque enfant du menu reçoit une transition de 0,4 seconde lorsque les éléments de menu reviennent à leur position d'origine.

.menu-open { display: none; } .menu-item:hover { background: #47959f; color: #b2f0f8; } .menu-item:nth-child(3), .menu-item:nth- child(4), .menu-item:nth-child(5), .menu- item:nth-child(6) { transition-duration: 400ms; }

19. Ajouter un hamburger

Ajouter des filtres SVG avec CSS: icône Burger en haut

Changez le z-index de l'icône du hamburger pour l'amener au sommet

L'icône du hamburger est surélevée au-dessus des autres éléments en changeant son index z . Le menu s'agrandit lorsque l'utilisateur survole cela, et en cliquant sur le menu, le hamburger sera maintenant animé de trois lignes d'un hamburger à un `` X '', indiquant l'option pour supprimer le menu.

.menu-open-button { z-index: 2; transition-timing-function: cubic- bezier(0.175, 0.885, 0.32, 1.275); transition-duration: 400ms; transform: scale(1.1, 1.1) translate3d (0, 0, 0); cursor: pointer; } .menu-open-button:hover { transform: scale(1.2, 1.2) translate3d (0, 0, 0); }

20. Déplacer les éléments

Le premier élément de menu est en fait le troisième enfant du menu, car il y a une case à cocher et le hamburger devant lui. L'ajout de ceci permet au premier élément de menu de se mettre en position une fois que l'utilisateur a cliqué sur le menu. Chaque élément de menu se déplacera avec un temps légèrement plus long.

.menu-open:checked + .menu-open-button { transition-timing-function: linear; transition-duration: 400ms; transform: scale(0.8, 0.8) translate3d (0, 0, 0); } .menu-open:checked ~ .menu-item { transition-timing-function: cubic- bezier(0.165, 0.84, 0.44, 1); } .menu-open:checked ~ .menu-item:nth-child(3) { transition-duration: 390ms; transform: translate3d(110px, 0, 0); }

21. Aborder le mouvement restant

Ajouter des filtres SVG avec CSS: mouvement restant

Déplacez les éléments du menu à différentes vitesses pour un look plus liquide

Les éléments de menu restants sont déplacés à des vitesses différentes. Cela permet aux éléments de coller ensemble dans les premières étapes de l'animation, ce qui donnera un aspect liquide blobby, en utilisant le filtre SVG. Enregistrez les documents et consultez les résultats finis dans votre navigateur.

.menu-open:checked ~ .menu-item:nth-child(4) { transition-duration: 490ms; transform: translate3d(220px, 0, 0); } .menu-open:checked ~ .menu-item:nth-child(5) { transition-duration: 590ms; transform: translate3d(330px, 0, 0); } .menu-open:checked ~ .menu-item:nth-child(6) { transition-duration: 690ms; transform: translate3d(440px, 0, 0); }

Generate, la conférence primée pour les concepteurs Web, revient à New York les 24 et 25 avril! Pour réserver des billets, visitez www.generateconf.com

Generate, la conférence primée pour les concepteurs Web, revient à New York les 24 et 25 avril! Pour réserver vos billets, visitez www.generateconf.com

Cet article a été initialement publié dans le magazine de conception Web créative Concepteur Web . Achetez le numéro 283 ici ou abonnez-vous à Web Designer ici .

Articles Liés:

  • Animer SVG avec JavaScript
  • Le guide complet du SVG
  • Boostez les animations SVG avec GSAP