Créer un art CSS animé
La création d'images CSS est une façon amusante de mettre en pratique vos compétences et de créer une œuvre d'art soignée. C'est une belle rupture avec le style habituel des composants Web. Tout ce dont vous aurez besoin pour commencer est un document vierge et un fichier CSS; nous vous recommandons d'utiliser Sass, qui vous permettra de réutiliser vos styles et d'écrire des sélecteurs plus simples (voir notre guide pour qu'est-ce que Sass? pour en savoir plus sur ce préprocesseur).
Nous commencerons par quelques meilleurs conseils pour maîtriser l'art CSS, puis vous montrerons comment recréer ce ballon animé Pikachu en utilisant uniquement CSS (assurez-vous de conserver vos fichiers en toute sécurité stockage en ligne ).
Pour plus d'inspiration, explorez notre tour d'horizon des Exemples d'animation CSS . Après quelque chose de plus basique? Commencez par apprendre comment créer une sucette glacée en utilisant CSS .
Ou, si vous démarrez un nouveau site, laissez tomber la complexité avec un brillant Générateur de site Web et assurez-vous d'avoir votre hébergement Web sur place.
Réduisez le design à des formes simples
Lors de la création d'art CSS, il peut être utile de regarder quelques images de référence pour l'inspiration, puis de créer une variante de dessin animé simplifiée au fur et à mesure, en envisageant le sujet à l'aide de formes primitives, ce qui améliore Formes CSS .
Utilisez un arrière-plan clair pour faciliter le positionnement
Lorsque vous superposez des formes de couleurs similaires, il est difficile de voir où elles sont placées ou à quoi elles ressemblent. Il est utile de faire ressortir la forme sur laquelle vous travaillez en modifiant le Couleur de l'arrière plan à quelque chose de brillant et joyeux, comme le magenta. Cela vous permet de voir facilement la position et la forme exactes de votre élément.
Utilisez des tailles de fluide
Lorsqu'il s'agit de définir une valeur px pour les propriétés, nous vous recommandons d'utiliser l'unité rem. Dans le cas où vous décidez que vous voulez que votre pièce globale soit plus grande ou plus petite, en utilisant des unités rem, vous n'avez qu'à changer la base html {font-size:… px} dans votre Sass pour agrandir ou réduire l'ensemble de l'œuvre.
Lors de la définition des hauteurs et largeurs des éléments enfants qui devraient avoir une taille relative par rapport au parent, les pourcentages sont utiles. Étant donné que ces valeurs sont toujours relatives à leur parent, elles doivent également être mises à l'échelle taille de police html .
01. Commencez par les conteneurs
Un conteneur d'emballage pour contenir les pièces de l'œuvre est un bon point de départ. Dans le conteneur, nous pouvons placer trois conteneurs intérieurs - la tête, le corps et les ballons.
Le conteneur doit généralement être position: relative pour permettre à d'autres éléments d'être placés relativement à l'intérieur en utilisant position: absolue et ont une hauteur et une largeur bien définies, sinon le positionnement des éléments enfants devient difficile.
Dans vos styles, ajoutez vos couleurs de base en tant que variables Sass pour la réutilisation. Le Sass alléger() et assombrir() Les fonctions créeront des teintes et des nuances de vos couleurs, qui peuvent être utilisées comme des reflets ou des ombres pour votre personnage.
02. Style de la tête
Une fois la structure définie, coiffons la tête en premier. Dans ce cas, la tête fait un joli point central pour l'illustration, donc plutôt que de définir sa position sur absolue, elle peut être définie sur relative. Cela permet au conteneur d'avoir un élément stable à l'intérieur de celui-ci, donnant aux autres éléments absolus flottants un point d'ancrage et donc plus de contrôle sur leur position.
Les traits du visage auront besoin d'un conteneur pour le positionnement, alors créez un à l'intérieur du conteneur de tête pour la forme jaune avec une largeur, une hauteur et une couleur d'arrière-plan - faisons maintenant ce rectangle ressembler davantage à une forme de tête. L'une des propriétés les plus courantes et les plus utiles de l'art CSS est la rayon de bordure propriété, qui modifie la courbe du X ou du Y des coins d'une boîte et peut être utilisée pour créer des formes plus organiques.
En utilisant cette technique avec un combo rem et pourcentage, vous pouvez créer des formes de type blob plutôt que de simples ellipses, qui s'échelonnent naturellement avec le html {font-size:… px} :
.face { border-top-left-radius: 50% 4.5rem; border-top-right-radius: 50% 4.5rem; border-bottom-left-radius: 50% 3rem; border-bottom-right-radius: 50% 3rem; ... }Après avoir perfectionné la tête rayon de bordure , positionnez le reste des traits du visage comme des éléments enfants de la tête, tels que les yeux, les joues, le nez et les oreilles. Comme la tête, le rayon de bordure L'astuce sera utile puisque rayon de la bordure: 50% peut ne pas sembler attrayant.
03. Passez au corps
Un corps peut être placé dans le conteneur du corps derrière la tête et façonné avec le même rayon de bordure technique, ainsi que les bras, les jambes et la queue. Pour permettre un chevauchement approprié, le corps réel doit être son propre élément, car certains éléments intérieurs comme les bandes arrière devront être coupés avec débordement caché . Pour donner plus de profondeur au corps, le transformer: incliner () la propriété peut légèrement abaisser le corps.
La queue de l'éclair peut être construite en utilisant trois rectangles séparés plutôt que d'essayer de former cette forme à partir d'un élément. Les rectangles peuvent être tournés et positionnés les uns sur les autres pour former un boulon. Les bras et les jambes peuvent utiliser la couleur primaire plus foncée que nous avons créée avec Sass assombrir() donc ils se démarquent.
04. Ajouter des bulles
Maintenant que la souris électrique est terminée, attachons des ballons à son dos. Ajoute-en s avec des styles partagés avec une chaîne enfant et placez-les groupés au-dessus de la tête. La chaîne est invisible sauf un bordure gauche , ce qui contribue à le rendre plus semblable à une chaîne.
Pour attacher la ficelle autour de la taille du personnage, un peut être placé dans le corps pour permettre un bon positionnement. La corde a besoin d'une légère courbe pour apparaître comme si elle était attachée autour du corps, elle peut donc avoir une petite hauteur, Bordure du bas et un Bordure du bas rayon gauche et droit, ce qui fait une fine ligne courbe:
.string { height: 1rem; width: 9rem; border-right: solid 1px $white; border-left: solid 1px $white; border-bottom: solid 1px $white; border-bottom-left-radius: 50% 1rem; border-bottom-right-radius: 50% 1rem; }05. Animer le CSS
On peut donner vie au personnage en ajoutant @keyframes animations. Les bras, les jambes, les oreilles et la queue peuvent être animés avec transformation: rotation () . Assurez-vous que origine de la transformation est réglé sur «l'articulation» (c'est-à-dire au centre supérieur pour une jambe) et ajustez la rotation. Ce type d'animation peut être utilisé plusieurs fois dans un mixin Sass:
@mixin animateRotate($name, $start, $end) { @keyframes #{$name} { 0%, 100% { transform: rotate(#{$start}deg) } 50% { transform: rotate(#{$end}deg) } } }Enfin, ajouter un 5s lent transformer: translateY () L'animation d'images clés animera le personnage de haut en bas comme s'il flottait. Pour une touche de réalisme, une animation clignotante utilisant transformée: échelleY (0,1) propriété peut être utilisée pour donner l'impression que les yeux se ferment.
Cet article a été initialement publié dans le magazine de conception Web créative rapporter . Acheter le numéro 283 ou s'abonner .
Lire la suite:
- 5 choses que vous ne saviez jamais sur CSS
- Ajouter des filtres SVG avec CSS
- Comment coder des effets de texte intelligent avec CSS
