Les feuilles de style CSS ne servent plus seulement à embellir les sites. Il s’est transformé en un outil qui donne vie aux sites web grâce à des mouvements et à des interactions que l’on croyait autrefois impossibles.
Ce guide a donc pour but de vous familiariser avec trois fonctions puissantes en particulier : les transitions, les animations et les transformations. La compréhension et l’utilisation de ces techniques avancées sont essentielles pour les concepteurs et développeurs web qui ont dépassé les bases du CSS et cherchent à créer des sites web qui se démarquent – et qui résistent à l’épreuve du temps.
En parcourant ce guide, vous acquerrez des compétences précieuses qui vous permettront d’élever vos projets web au-delà de l’ordinaire. Et avec un peu de chance, vous repartirez avec un peu d’inspiration.
Transitions CSS avancées
Les transitions CSS avancées rendent les éléments de l’interface utilisateur interactifs, attrayants et agréables à l’œil. Imaginez que vous ayez un bouton sur votre site. Normalement, il est juste là, mais avec les transitions CSS, lorsque quelqu’un le survole, il change doucement de couleur ou augmente légèrement de taille.
Le concept tourne autour de l’idée d’interpolation, c’est-à-dire d’une transition en douceur entre différents états d’une propriété CSS.
Pour créer ces effets, il existe plusieurs propriétés CSS avec lesquelles vous devez vous familiariser :
- Propriétés de transition: Il s’agit de spécifier la propriété que vous souhaitez animer (comme
background-colorouopacity), de définir la durée de la transition et de choisirtransition-timing-function(commeease-inoulinear), qui dicte la manière dont la transition progresse au cours de sa durée. - Fonctions de synchronisation: Elles sont indispensables car elles contrôlent l’accélération et la décélération de la transition. L’une des options les plus polyvalentes est la fonction
cubic-bezier. Cette fonction permet de créer des courbes de vitesse personnalisées, ce qui vous donne un contrôle total sur le rythme de votre transition. Cela peut être un peu difficile au début, mais des outils comme cubic-bezier facilitent la visualisation et la création de ces courbes.
Voici un exemple simple pour illustrer la manière dont vous pouvez utiliser cette technique dans votre CSS :
.my-element {
transition-property: opacity;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
Dans cet extrait, .my-element modifie son opacité selon une courbe de vitesse unique définie par la fonction cubic-bezier. Cette courbe dicte un type de mouvement spécifique, comme commencer lentement, accélérer, puis ralentir vers la fin.
En utilisant transition-timing-function avec des valeurs personnalisées, vous pouvez faire bouger vos éléments web d’une manière plus naturelle, plus dynamique ou tout simplement différente de la norme. C’est un outil formidable pour ajouter de la personnalité et de la finesse à vos animations web.
Pour ce qui est des techniques avancées, en voici quelques-unes à prendre en considération :
- Jongler avec plusieurs propriétés: Pourquoi se contenter d’animer une seule chose ? Le CSS vous permet d’aligner plusieurs propriétés et de les animer toutes en même temps. Cette technique est idéale pour ajouter des couches à votre animation.
- Animations synchronisées: Vous pouvez également aligner différentes propriétés pour qu’elles se déplacent au même rythme, créant ainsi un effet plus coordonné.
- Transitions imbriquées: Appliquez des transitions à des éléments à l’intérieur d’un conteneur. Ainsi, lorsque vous interagissez avec le conteneur, les éléments enfants se comportent comme vous le souhaitez.
Veillez à ce que ces animations ne soient pas seulement esthétiques, mais aussi fluides, en particulier sur les appareils moins puissants. L’utilisation de propriétés telles que transform et opacity est judicieuse, car elles sont plus faciles à utiliser pour les navigateurs et ne devraient pas trop affecter les performances.
De plus, la propriété will-change permet à votre navigateur de se préparer à l’action et de s’assurer que tout se passe bien.
Une dernière remarque pour s’assurer que cela fonctionne partout : les navigateurs peuvent être pointilleux. L’utilisation des préfixes de fournisseur permet de s’assurer que vos transitions sympas fonctionnent sur différents navigateurs. C’est un peu de travail supplémentaire, mais des outils comme les autoréfixeurs peuvent s’en charger pour vous, ce qui vous évite bien des tracas.
Transformations CSS
Les transformations CSS sont un excellent moyen d’ajouter de l’intérêt à vos conceptions web. Elles peuvent être utilisées pour déplacer des éléments, bien sûr, mais elles peuvent aussi modifier l’aspect général d’une page. La propriété transform est votre principal acteur dans ce domaine.
Elle est polyvalente et peut déplacer des éléments d’un endroit à un autre, comme faire glisser une image sur l’écran ou en modifier la taille – vous pouvez par exemple rapprocher ou éloigner un élément, comme vous le feriez en zoomant ou en dézoomant sur une photo. Et si vous voulez faire preuve d’un peu de fantaisie, vous pouvez même faire tourner des éléments autour d’eux.
Ce qui est vraiment impressionnant, c’est lorsque vous ajoutez les transformations 3D au mélange. Avec des fonctions telles que translate3d, scale3d, et rotate3d, les éléments peuvent sauter de l’écran, créant ainsi une expérience plus immersive au sein même du navigateur.
Prenez, par exemple, l’effet de carte retournée. Il s’agit d’une fonction intéressante dans laquelle un côté d’une carte présente certaines informations et, lorsqu’elle est retournée, un nouveau contenu est révélé sur l’autre côté. Cet élément interactif peut réellement capter l’attention de vos visiteurs.
La clé pour réussir cet effet est d’utiliser efficacement la propriété backface-visibility. Cela permet de s’assurer que le verso de la carte reste caché jusqu’à ce qu’il soit destiné à être vu.
Mais pourquoi s’arrêter là ? Lorsque vous combinez ces transformations avec des transitions et des animations, vous pouvez obtenir beaucoup plus de votre CSS. Vous pouvez avoir un bouton qui grandit élégamment lorsqu’il est survolé ou une icône qui se déplace de manière ludique sur l’écran. Ces changements dynamiques ajoutent une qualité fluide aux éléments de votre page web, ce qui rend l’expérience de l’utilisateur encore plus attrayante.
Designmodo propose plusieurs exemples magnifiques de ce type d’action. Tout d’abord, vous pouvez voir le CSS pour les transformations 3D décomposé. Ensuite, vous pouvez voir le code en action:
Requêtes de conteneurs
Les requêtes de conteneur sont un autre aspect de CSS qui mérite d’être exploré. Elles vous permettent de styliser des éléments en fonction de la taille de leur conteneur plutôt que de la taille totale de l’écran. Pensez-y comme suit : vous avez une boîte et vous voulez que les éléments qu’elle contient soient beaux, quelle que soit la taille de la boîte. Les requêtes sur les conteneurs sont parfaites pour cela.
Elles sont très pratiques lorsque vous souhaitez que les différentes parties de votre page web, comme les colonnes latérales ou les cartes, changent d’aspect en fonction de l’espace dont elles disposent. Chaque composant peut décider de son propre style, indépendamment du reste de la page.
Voici un bref aperçu de leur utilisation :
- Définissez le conteneur : Tout d’abord, indiquez à CSS quelle partie de votre page est un conteneur. Pour ce faire, utilisez des propriétés telles que
container-typeetcontainer-name. - Rédigez vos requêtes : Comme pour les requêtes média, mais pour les conteneurs. Vous écrivez une règle qui dit : « Hé, si mon conteneur est au moins aussi large que ça, alors faites ces changements de style »
Voici à quoi ressemblerait le code de base :
@container (min-width: 300px) {
.component {
/* styles */
}
}Dans cet exemple, les styles de la classe .component seront appliqués lorsque le conteneur atteindra une largeur minimale de 300 px.
Les requêtes de conteneur peuvent être utilisées dans divers scénarios, par exemple :
- Colonnes latérales et pieds de page responsives : Ajustement de la largeur et de la disposition des colonnes latérales ou des pieds de page en fonction de la taille du conteneur.
- Cartes responsives : Modification de la disposition ou du style des cartes dans une grille ou une disposition flexbox en fonction de la largeur de leur conteneur.
Bien que les requêtes de conteneur soient prises en charge par les principaux navigateurs, notamment Chrome, Firefox, Safari et Edge, c’est toujours une bonne pratique de les utiliser en tant qu’amélioration progressive. Commencez par des styles de base pour les navigateurs qui ne les prennent pas en charge et améliorez-les pour ceux qui prennent en charge les requêtes de conteneur.
Utiliser Flexbox pour l’alignement vertical
Flexbox est un outil incroyablement pratique en CSS, en particulier pour l’alignement vertical. Bien qu’il existe depuis un certain temps, il est toujours aussi pertinent, en particulier pour aligner les éléments le long de l’axe transversal (qui, selon votre mise en page, peut être vertical).
Utiliser align-items pour l’alignement vertical
La propriété align-items de Flexbox permet d’aligner les éléments verticalement dans un conteneur. Elle fonctionne lorsque votre conteneur Flexbox comporte flex-direction lignes. Cette propriété vous permet de contrôler la manière dont tous les enfants d’un conteneur Flex sont alignés le long de l’axe transversal.
Par exemple, si vous avez plusieurs éléments dans un conteneur flexible et que vous souhaitez qu’ils soient tous centrés verticalement, vous devez utiliser align-items: center;. Voici les principales options dont vous disposez avec align-items:
flex-start: Aligne les éléments au début du conteneur.flex-end: Aligne les éléments à la fin du conteneur.center: Centre les éléments dans le conteneur.baseline: Aligne les éléments en fonction de leur ligne de base.stretch: Étire les éléments pour qu’ils remplissent le conteneur (comportement par défaut).
Utiliser align-self pour un contrôle individuel
Bien que align-items soit idéal pour aligner tous les éléments d’un conteneur, il arrive que vous souhaitiez aligner un seul élément différemment. C’est pourquoi align-self est si utile. Cette propriété vous permet de remplacer la valeur de align-items pour des éléments flexibles individuels. Elle accepte les mêmes valeurs que align-items.
Par exemple, supposons que vous ayez un conteneur flex avec align-items: center; mais qu’il y ait un élément que vous voulez aligner au début. Vous pouvez appliquer align-self: flex-start; à cet élément spécifique. C’est un excellent moyen de contrôler précisément l’alignement des éléments individuels.
Cependant, il peut être très utile de voir cette méthode en action.
Imaginons que vous conceviez une barre de navigation avec un logo, des liens et une barre de recherche. Vous souhaitez que les liens soient centrés, que le logo soit aligné en haut et que la barre de recherche soit alignée en bas.
Voici comment vous pourriez procéder :
.nav-container {
display: flex;
flex-direction: row;
align-items: center;
}
.logo {
align-self: flex-start;
}
.search-bar {
align-self: flex-end;
}Dans cet exemple, le site .nav-container est un conteneur flexible dont les éléments sont généralement centrés. Le logo et la barre de recherche s’écartent toutefois de cette règle générale et s’alignent respectivement au début et à la fin du conteneur.
Fonctions de couleur modernes en CSS
Les fonctions de couleur modernes en CSS ont considérablement évolué, offrant des moyens plus sophistiqués de définir et de manipuler les couleurs dans la conception de sites web. Examinons quelques-unes de ces fonctions :
1. rgb() et rgba()
La fonction rgb() est un moyen traditionnel de définir des couleurs à l’aide des canaux rouge, vert et bleu. Chaque canal peut avoir une valeur comprise entre 0 et 255. La variante rgba() ajoute un canal alpha pour l’opacité, 1 étant totalement opaque et 0 totalement transparent.
Cela devrait ressembler à quelque chose comme ceci :
.example {
color: rgb(255, 0, 0); /* Red */
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}2. hsl() et hsla()
hsl() représentent les couleurs en termes de teinte, de saturation et de luminosité, ce qui rend plus intuitive la sélection des variations de couleurs. Comme rgba(), hsla() inclut un canal alpha pour l’opacité. Comme ceci :
.example {
color: hsl(120, 100%, 50%); /* Green */
background-color: hsla(120, 100%, 50%, 0.3); /* Semi-transparent green */
}3. oklch() et oklab()
oklch() et oklab() sont des ajouts plus récents aux fonctions de couleur CSS. Elles sont basées sur l’espace colorimétrique CIELAB, qui est conçu pour être perceptuellement uniforme. Cela signifie que les changements dans les valeurs de couleur correspondent plus étroitement aux changements perçus par l’œil humain.
Maintenant, plus précisément :
oklab()est utilisé pour définir les couleurs dans un espace perceptuellement uniforme.oklch()est similaire mais utilise des coordonnées cylindriques (luminosité, chroma et teinte).
Ces fonctions permettent une manipulation plus précise et plus intuitive des couleurs, en particulier pour des tâches telles que la création de dégradés de couleurs fluides. Voici à quoi cela pourrait ressembler sous forme de code :
.example {
color: oklch(75%, 0.25, 250); /* A color in oklch */
background-color: oklab(0.623, 0.172, -0.079); /* A color in oklab */
}Mise en œuvre de schémas de couleurs avancés
Avec ces fonctions, en particulier les plus avancées oklch() et oklab(), vous pouvez mettre en œuvre des combinaisons de couleurs complexes qui sont visuellement cohérentes et attrayantes. Elles permettent de mieux contrôler la manière dont les couleurs sont rendues et perçues, ce qui garantit que vos conceptions sont à la fois esthétiques et accessibles.
Lorsque vous combinez ces fonctions de couleur avec des caractéristiques CSS telles que les propriétés personnalisées (variables CSS) et les calculs, vous pouvez développer des systèmes de couleurs dynamiques et flexibles qui s’adaptent à différents thèmes, états et environnements.
Comme les normes web et la prise en charge de ces fonctions par les navigateurs continuent d’évoluer, l’adoption de ces fonctions de couleur modernes peut améliorer considérablement la conception visuelle et l’expérience utilisateur de vos projets web.
Courber le texte autour des images
La propriété CSS shape-outside offre un moyen créatif d’enrouler du texte autour des images, ce qui contribue à des mises en page plus dynamiques et visuellement intéressantes, ainsi qu’à un style d’image plus avancé.
Elle vous permet de définir une forme autour de laquelle le contenu en ligne doit s’enrouler. Cette propriété est utile pour enrouler du texte autour d’images de forme non rectangulaire, créant ainsi des mises en page plus organiques et visuellement plus attrayantes que l’enroulement de texte rectangulaire standard.
Comment cela fonctionne-t-il ?
Vous pouvez définir différentes formes telles que des cercles, des ellipses et des polygones, ou même utiliser le canal alpha d’une image pour définir la forme.
La propriété shape-outside s’applique généralement aux éléments flottants. Lorsque vous faites flotter une image et que vous appliquez une propriété shape-outside, le texte s’enroule autour de l’image en fonction de la forme définie.
Voici un exemple de base de l’utilisation de la propriété shape-outside avec un cercle :
.image {
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
margin-right: 15px;
}Dans cet exemple, la classe .image est appliquée à un élément image. L’image est flottante à gauche et le site shape-outside: circle(50%); crée une forme circulaire autour de laquelle le texte s’enroule. L’utilisation efficace de shape-outside peut ouvrir de nouvelles possibilités dans vos conceptions, car elle permet au texte de s’enrouler autour de formes complexes, ce qui rend possible la création de mises en page de type magazine et de pages web visuellement riches.
Modes de fusion CSS
Les modes de fusion CSS offrent un moyen puissant de mélanger les couleurs et les images, créant ainsi des effets visuels uniques qui peuvent également améliorer vos conceptions. Ces modes de fusion vous permettent de créer des effets de texte attrayants, des superpositions d’images et des motifs d’arrière-plan complexes. Pour utiliser background-blend-mode, commençons par expliquer ce qu’elle fait. Cette propriété est utilisée pour définir la manière dont les images et les couleurs d’arrière-plan d’un élément doivent se fondre entre elles. Par exemple, si vous disposez d’une image et d’une couleur d’arrière-plan, vous pouvez les mélanger en utilisant différents modes de fusion tels que multiplier, écran, superposition, etc. Voici à quoi pourrait ressembler le code :
.element {
background-image: url('image.jpg');
background-color: blue;
background-blend-mode: multiply;
}Maintenant, mix-blend-mode fonctionne en mélangeant le contenu d’un élément (y compris les images et le texte) avec son arrière-plan. C’est particulièrement utile pour les effets de texte ou la superposition d’une image sur une autre. Voici ce que cela donne :
<
.element {
mix-blend-mode: screen;
}Modes de fusion populaires
À titre de référence, voici quelques-uns des modes de fusion les plus courants que vous devez connaître pour utiliser correctement cet effet :
- Multiply : Multiplie les couleurs du calque de fusion et du calque de base, ce qui donne une couleur plus foncée.
- Screen : Rend les couleurs plus claires, à l’inverse du mode Multiplier. Cette fonction est utile pour créer des effets de lumière.
- Overlay : Combine les modes de fusion Multiply et Screen. Les parties claires de l’image deviennent plus claires et les parties sombres plus foncées.
- Garken and lighten : Sélectionne respectivement la couleur la plus foncée ou la plus claire.
- Color dodge et color burn : Permet d’éclaircir ou d’assombrir la couleur de base pour refléter la couleur de fusion.
- Difference et exclusion : Utilisées pour créer des effets de couleur plus artistiques et inversés.
S’adapter aux préférences des utilisateurs
L’adaptation aux préférences des utilisateurs dans la conception de sites web est un aspect essentiel de la création de sites web accessibles et conviviaux. Les requêtes média CSS pour des préférences telles que prefers-color-scheme et prefers-reduced-motion jouent un rôle important dans ce processus.
Explorons ces concepts.
prefers-color-scheme
Cette requête média est utilisée pour détecter si l’utilisateur a demandé au système d’utiliser un thème de couleurs claires ou foncées. C’est un moyen pratique de mettre en œuvre un mode sombre dans la conception d’un site web.
Vous pouvez utiliser prefers-color-scheme pour spécifier des styles différents pour les modes clair et foncé.
Vous pouvez utiliser pour spécifier des styles différents pour les modes clair et foncé :
/* Default light mode styles */
body {
background-color: white;
color: black;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}Dans cet extrait, les styles par défaut s’appliquent au mode clair, tandis que les styles contenus dans la requête @media s’appliquent lorsque l’utilisateur préfère une palette de couleurs foncées.
prefers-reduced-motion
Cette requête média est conçue pour détecter si l’utilisateur a demandé au système de réduire la quantité d’animation ou de mouvement qu’il utilise. Elle est essentielle pour les utilisateurs qui souffrent du mal des transports ou de troubles vestibulaires.
Vous pouvez utiliser prefers-reduced-motion pour réduire ou supprimer les animations et les transitions :
/* Standard animations */
.animate {
transition: transform 0.3s ease;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.animate {
transition: none;
}
}Ici, vous verrez que les animations sont désactivées lorsque l’utilisateur a indiqué qu’il préférait une réduction des mouvements.
L’intégration de prefers-color-scheme et prefers-reduced-motion dans votre CSS est une étape vers un web plus inclusif et convivial, garantissant que votre site est accessible et confortable pour un large éventail d’utilisateurs ayant des besoins et des préférences différents.
Utiliser les pseudo-sélecteurs :is() et :where()
Les pseudo-sélecteurs :is() et :where() en CSS sont des outils avancés pour gérer la spécificité et simplifier les chaînes de sélecteurs complexes. Voyons comment ils fonctionnent et voyons quelques exemples concrets.
pseudo-sélecteur :is()
Ce sélecteur vous permet de cibler plusieurs éléments avec une seule règle et réduit la répétition de sélecteurs similaires. La spécificité de la pseudo-classe :is() est la spécificité du sélecteur le plus spécifique dans ses arguments.
/* Selects any paragraph or heading inside an article */
article :is(h1, h2, h3, p) {
color: blue;
}pseudo-sélecteur :where()
Ce pseudo-sélecteur est similaire à :is(), mais il présente une différence essentielle. :where() a toujours une spécificité de zéro. Il est donc utile pour remplacer les styles sans augmenter la spécificité. En pratique, il pourrait ressembler à quelque chose comme ceci :
/* Selects any paragraph or heading, but with no added specificity */
:where(article, section) p {
margin-bottom: 1em;
}En utilisant :is() et :where(), vous pouvez créer des feuilles de style plus souples et plus faciles à maintenir, en particulier lorsque vous avez affaire à des conceptions complexes. Par exemple, ces pseudo-sélecteurs peuvent s’avérer utiles si vous avez besoin de :
- Simplifier les sélecteurs imbriqués : Ils peuvent simplifier les sélecteurs profondément imbriqués ou les sélecteurs groupés, ce qui rend votre feuille de style CSS plus lisible et plus facile à maintenir.
- Remplacer des styles :
:where()est idéal pour créer des styles de base qui peuvent être facilement remplacés sans se soucier de la spécificité. - Réutiliser les styles : Les deux pseudo-sélecteurs permettent de créer des styles plus modulaires et réutilisables, car vous pouvez regrouper divers éléments sous une seule règle.
Pour une application pratique de ce principe, imaginez un menu de navigation avec différentes sections. Vous pouvez utiliser :is() pour styliser uniformément tous les liens du menu, quel que soit leur niveau d’imbrication, comme suit :
nav :is(ul, ol, div) > li > a {
padding: 10px;
color: white;
}Résumé
De l’élégance des transitions CSS qui donnent vie aux interfaces utilisateur à la puissance des transformations 3D, nous espérons que vous avez maintenant une meilleure compréhension de certaines des techniques CSS les plus avancées disponibles en 2024 et au-delà.
Ce guide met en lumière ces techniques avancées et souligne leur importance dans la conception de sites web responsives, conviviaux et visuellement attrayants. Et quelle que soit la technique que vous décidez d’utiliser, n’oubliez pas de donner la priorité à l’accessibilité et aux performances CSS dans tout ce que vous faites.
Utilisez-vous actuellement l’une de ces techniques CSS avancées ? Vous avez des recommandations à faire ? N’hésitez pas à nous en faire part.
Laisser un commentaire