Notes
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Effets CSS3, transitions et animations
En tant que développeur Web, vous disposez de trois outils pour transformer vos idées en réalité : HTML, CSS et JavaScript. Cela n'a pas toujours été le cas. Dans le passé, des effets apparemment simples, tels que les ombres ou les dégradés, vous dirigeaient vers des éditeurs d'images distincts au lieu d'utiliser CSS et HTML. Et alors que vous aviez déjà JavaScript, une grande quantité de code était généralement nécessaire pour rendre l'application Web fluide et vivante. Non seulement ces techniques compliquaient la création initiale de l'application, mais tout changement, même minime, était coûteux.
Fort heureusement, grâce à CSS3 et HTML5, la nécessité d'utiliser la gymnastique des images et de JavaScript appartient désormais au passé. Vous pouvez créer des interactions fluides et de belles expériences avec un balisage déclaratif simple.
Maintenant, si vous êtes comme moi, vous avez peut-être souri intérieurement. En effet, CSS et HTML ne sont pas nécessairement synonymes de simplicité. Toutefois, comme vous le verrez, si vous apprenez quelques nouvelles propriétés CSS et que vous les testez dans des démonstrations sympas, vous vous épargnerez un nombre incalculable d'heures de développement, sans même parler des heures passées à négocier la nécessité d'utiliser un effet particulier avec votre client.
Ombres
Commençons par quelque chose de facile en étudiant quelques effets d'ombre de base. Je considère que les effets se résument à modifier la perception d'un objet. Observons par exemple les ombres du texte et des boîtes de la figure 1.
.jpg)
Figure 1 Effets d'ombre
Cet effet donne l'illusion d'une source lumineuse directionnelle qui atteint un objet, ce dernier projetant à son tour une ombre sur les objets qui l'entourent. Cela permet de donner une impression de profondeur et certains disent même que l'objet semble flotter.
Il n'est pas si difficile d'ajouter une ombre, nous allons donc ajouter l'ombre de texte à un titre :
h1 {
text-shadow: black 2px 2px 12px 2px;
}
Voici les différentes propriétés text-shadow :
- Couleur de l'ombre (facultative). Vous pouvez spécifier une couleur à l'aide de son nom ou en utilisant les désignations de couleurs TSL ou RVBA.
- Décalage horizontal (obligatoire). Il indique la position horizontale de l'ombre. Les valeurs positives déplacent l'ombre à droite de l'objet, contrairement aux valeurs négatives qui la déplacent à gauche de celui-ci.
- Décalage vertical (obligatoire). Il définit la position verticale de l'ombre. Les valeurs positives déplacent l'ombre vers le bas, contrairement aux valeurs négatives qui la déplacent vers le haut.
- Rayon de flou. Cette valeur définit la clarté du texte de l'ombre. 0px correspond à la police et les valeurs croissantes estompent de plus en plus le contour d'un objet. Les valeurs négatives ne sont pas autorisées.
- Distance d'éloignement. Cette valeur définit la distance par rapport à l'ombre, c'est-à-dire comment la forme de l'ombre s'étend vers l'extérieur (valeur positive) ou diminue vers l'intérieur (valeur négative).
Les ombres de boîte fonctionnent de la même manière que les ombres de texte et ont les mêmes paramètres :
box-shadow: red 10px 10px 0px 0px;
Les ombres sont relativement courantes. Elles sont utilisées sur des éléments tels que des boutons afin d'apporter de la profondeur et de donner aux utilisateurs une idée du rôle de l'élément. Elles permettent d'indiquer à l'utilisateur qu'un objet donné est d'une certaine manière différent des autres objets figurant dans l'interface utilisateur. Par le passé, vous vous tourniez généralement vers Photoshop et choisissiez de créer des PNG pour représenter les boutons. Aujourd'hui, vous pouvez utiliser le balisage à cet effet. Bien entendu, je ne fais qu'effleurer le sujet ici. Vous pouvez créer de nombreux effets plus incroyables en modifiant l'opacité, le rayon des bordures, les dégradés, la typographie, etc.
Transformations
La propriété CSS transform vous permet de transformer un élément donné en termes de taille ou d'espace. À titre d'exemple, nous allons définir une image dont la taille double lorsqu'un utilisateur la survole avec la souris :
#myImg:hover {
transform: scale(2);
}
Étant donné qu'il s'agit de CSS, vous devez impérativement inclure les préfixes de fournisseur correspondants. Je ne les mentionnerai pas dans le reste de cet article, mais la propriété transform précédente aurait dû se présenter comme suit :
#myImg:hover {
-ms-transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o- transform: scale(2);
transform: scale(2);
}
Profitez également de la détection de fonctionnalité. Il s'agit en effet de l'une des pratiques les plus importantes à mettre en œuvre dans vos sites Web à l'heure actuelle. Au lieu de baser le comportement du site sur les agents utilisateurs, pensez à utiliser un outil tel que Modernizr (modernizr.com), qui vous permet de demander ses capacités au navigateur. Si le navigateur d'un utilisateur ne prend pas en charge une fonctionnalité donnée dont vous avez besoin, utilisez un polyfill à la place, c'est-à-dire un shim qui implémente la fonctionnalité pour le navigateur. Cela est même possible pour CSS. Pour plus d'informations, consultez l'article « Aucun navigateur n'est oublié : Une stratégie pour adopter HTML5 », à l'adresse msdn.microsoft.com/magazine/hh394148. Revenons maintenant aux transformations.
Vous pouvez non seulement appliquer les transformations dans un but de mise à l'échelle, mais également sur un plan 2D ou 3D. Dans le cadre de la 2D, vous déplacez un élément le long de ses axes X et Y. Nous allons maintenant faire pivoter un texte de 45 degrés :
.transform2d {
transform: translate(0px, 0px)
rotate(45deg)
scale(1.45)
skew(0deg, 0deg);
}
La figure 2 illustre le cas d'une boîte qui a fait l'objet d'une rotation de 45 degrés.
.png)
Figure 2 Transformation d'un élément dans un espace 2D
Maintenant, bien que la 2D soit intéressante, la 3D est sans aucun doute ce qui fait fureur aujourd'hui. Et non, nous n'allons pas demander à nos utilisateurs de porter des lunettes spéciales, mais nous voulons que les gens aient l'impression que nos boîtes sont sur le point de sortir de l'écran. Le code suivant permet de produire cet effet :
.transform3d {
transform-origin-x: 50%;
transform-origin-y: 50%;
transform: perspective(110px) rotateY(45deg);
}
Les résultats sont illustrés à la figure 3.
.png)
Figure 3 Une transformation 3D
Transitions
Nous allons maintenant explorer les transitions qui vous permettent de remplacer le style ou l'état d'un élément par un autre. Je vais commencer par la pseudo-classe hover. Traditionnellement, le CSS était utilisé pour définir les états d'un élément, par exemple son état initial et son état après un événement. Les éléments de bouton et les liens d'ancrage ont deux états : l'état initial et l'état de survol par la souris. Lorsqu'un utilisateur active l'état de survol, ces propriétés sont définies. Voici un exemple rapide de survol d'un bouton :
#boxTrans:hover {
background-color: #808080;
color: white;
border-color: #4cff00;
border-width: 3px;
}
Rien d'exceptionnel que vous n'ayez déjà fait auparavant. Les navigateurs actuels sont tellement rapides que la transition d'état est presque instantanée. Du point de vue des performances, ce fonctionnement est génial, mais il pose un nouveau problème. Dans certains cas, le changement d'état peut être dissonant, voire passer inaperçu. Il est tout à fait possible que l'utilisateur ne voie jamais ce changement subtil et rapide.
Avec les transitions CSS3, vous pouvez gérer la durée d'une transition et contrôler d'autres aspects de cette dernière. Par exemple, au lieu de changer automatiquement la couleur d'arrière-plan d'un bouton, vous pouvez désormais spécifier ce qui se passera pendant ce changement.
Il est facile d'ajouter une transition CSS : il suffit d'ajouter les commandes de transition à l'élément de base. À titre d'exemple, nous allons créer une boîte simple contenant du texte. Lorsqu'un utilisateur survole cette boîte avec la souris, la couleur d'arrière-plan, le texte et la bordure doivent changer :
#boxTrans {
...
transition: all .5s linear;
...
}
#boxTrans:hover {
background-color: #808080;
color: red;
border-color: green;
}
Comme vous pouvez le constater, j'ai défini la transition sur l'élément #boxTrans. J'ai choisi de définir une transition pour toutes les propriétés de cet élément et je souhaite une transition linéaire (c'est-à-dire à vitesse constante) sur une durée de 0,5 s. Je peux également choisir la transition de certaines propriétés en spécifiant uniquement celles-ci, de la façon suivante :
transition: background-color .5s linear;
Animations
Alors que vous indiquez au navigateur les états de début et de fin pour les transitions, vous spécifiez une série de propriétés CSS sur une période de temps donnée pour les animations. En fait, les animations ne sont que des extensions des transitions. Pour créer une animation, vous utilisez une image clé. Vous pouvez considérer l'image clé comme l'état d'un élément à un moment donné pendant la durée définie pour cette animation globale. Nous allons maintenant créer une animation simple : une petite boîte qui défile. Je commence par définir l'élément :
<html>
...
<div class="box" id="boxAnimation"></div>
...
</html>
Nous allons ensuite donner un peu de style à ces balises div boxAnimation afin d'obtenir une apparence de boîte :
<style>
...
.box {
border: 1px solid black;
background-color: red;
width: 25px;
height: 25px;
position: relative;
}
...
</style>
Nous pouvons maintenant définir l'animation de base. Je dois définir l'image clé de l'animation et sa durée. Si vous ne définissez pas la propriété de durée, l'animation ne sera jamais lancée puisque la valeur par défaut est 0. Je définis également le nombre de fois où l'animation doit être exécutée : ici, je souhaite qu'elle soit exécutée 10 fois pendant 5 secondes à chaque fois (vous pouvez également définir animation-iteration-count sur une valeur infinie pour que l'animation soit exécutée tant que la page est ouverte) :
#boxAnimation {
animation: 'not-knight-rider';
animation-duration: 5s;
animation-iteration-count: 10;
}
Et en dernier lieu, je définis l'image clé elle-même. Je commence par une image clé simple qui va déplacer la boîte sur l'écran. Pour cela, je définis les propriétés from et to, et je laisse le navigateur se charger du reste :
@keyframes not-knight-rider {
from {
left: -100px;
}
to {
left: 100px;
}
}
Si vous exécutez ce code, vous verrez une boîte rouge qui flotte à travers l'écran, puis revient. Comme je l'ai déjà mentionné, vous disposez d'un contrôle total sur l'animation. Nous allons maintenant mettre à jour cette image clé de façon à contrôler l'emplacement où se trouve la boîte à un moment donné et ce qu'elle fait exactement, comme illustré à la figure 4.
Figure 4 Contrôle de l'animation
@keyframes not-knight-rider {
from {
left: -100px;
opacity: 0;
}
25% {
left: 100px;
opacity: 0.5;
}
50% {
left: -100px;
opacity: 0;
}
75% {
left: 100px;
opacity: 0.5;
}
to {
left: -100px; opacity: 0;
}
}
À la figure 4, je définis ce que fait l'image clé à un moment donné dans une seule itération. Je définis un point de départ (from) et un point d'arrivée (to), ainsi que les points situés entre ces deux-là, représentés sous forme de pourcentages de la durée définie. Pour être honnête, cela ne présente pas de difficulté. Maintenant, dès qu'il s'agit d'illuminer ces créations pour obtenir des animations géniales, c'est une autre histoire !
Je vous rappelle que vous devez utiliser les préfixes de fournisseur appropriés pour prendre en charge tous les différents navigateurs actuellement disponibles sur le marché. Dans le cas des images clés, il s'agit d'un préfixe similaire à @-webkit-keyframes, etc.
Vous trouverez des exemples fonctionnels de tous les codes mentionnés dans cet article en ligne, sur bit.ly/I0Pa4d. Je vous conseille également de consulter la série incroyable de démonstrations CSS3 interactives et pratiques sur bit.ly/pF4sle. Vous pourrez y explorer un certain nombre de spécifications CSS sans jamais avoir à écrire une ligne de CSS.
Vous remarquerez probablement que ces démonstrations font référence à Windows 8. En effet, avec l'arrivée de cette version, l'équipe Windows a introduit un nouveau modèle de programmation. Les développeurs Web peuvent maintenant mettre en œuvre leurs compétences afin de créer une application native pour Windows 8 à l'aide de HTML5, CSS3 et JavaScript. Microsoft vient d'ouvrir un espace totalement nouveau pour vous permettre de vendre vos applications dans le monde ! Je vous encourage à consulter le Centre de développement Windows à l'adresse dev.windows.com.
Cette période est remplie de promesses pour les développeurs de logiciels, Web ou autres. Les technologies évoluent tellement rapidement qu'il est facile de se sentir dépassé avec tous les nouveaux outils dont vous disposez aujourd'hui. Il est cependant important de regarder vers l'avenir et de comprendre les outils et techniques qui sont mis à votre disposition. Pourquoi commencer à créer plein de belles images alors que vous pouvez simplement ajouter quelques lignes de CSS pour obtenir cette ombre portée ?
Clark Sell est un expert Web et Windows 8 pour Microsoft à l'extérieur de Chicago. Il possède un blog sur csell.net, propose des podcasts sur developersmackdown.com et vous pouvez le trouver sur Twitter à l'adresse twitter.com/csell5.
Je remercie les experts techniques suivants d'avoir relu cet article : John Hrvatin et Brandon Satrom