Icônes de recyclage et d'animation avec CSS
Dans un passé pas si lointain, nous étions en train d'apprendre des techniques révolutionnaires pour sauvegarder les requêtes HTTP et les bases de connaissances à l'aide de sprites d'images. Ces sprites se composaient de dizaines, voire de centaines d’icônes disposées dans un fichier image qui a ensuite été épissé et servi de diverses manières sur un site Web.
Nous avons bien utilisé la technique et pratiquement tous les sites concernés par l’évolutivité l’utilisent.
Grâce aux propriétés de transformation et de transition de CSS3, nous pouvons aller plus loin et, en utilisant quelques lignes de code concises, transformer des modèles d'icônes de base en nouvelles icônes pour une utilisation future, et même lancer des animations pour un bonus supplémentaire. !
La technique est aussi simple et intuitive que les images-objets et permet de déployer rapidement de nouvelles icônes sans avoir à modifier les images-objets.
Icônes de recyclage avec CSS
Jetez un coup d'oeil à ce sprite extrait de la bibliothèque de l'interface utilisateur jQuery. Au fur et à mesure que vous parcourez, vous remarquerez que bon nombre des icônes répertoriées ici sont en réalité des variantes des modèles de base. Une seule icône pourrait être représentée de douze manières différentes et placée dans le même fichier. De nombreuses icônes sont littéralement des versions pivotées de leurs parents. Les bonnes nouvelles sont que, tout en utilisant CSS, nous pouvons utiliser exactement la même technique sans avoir à inclure les variations dans l'image-objet.
A partir de l'exemple ci-dessus, nous pouvons prendre une seule icône et la recréer à nos propres fins, par exemple un simple chevron de la deuxième ligne. Avec la propriété transform, nous pouvons faire pivoter ce chevron 45deg, 90deg, 180deg, évidemment et indéfiniment pour créer de nombreuses formes différentes à partir du même modèle.
Modèle de base (flèche vers le haut):
Le code suivant tirera le chevron vers le haut de l'image-objet et servira de modèle de base.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat -20px 0;}
Créer un bon arrow
Transformer notre flèche 90deg va pointer la flèche vers la droite, comme indiqué ci-dessous:
-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);
Créer une flèche en haut à droite
Tournez-le à seulement 45deg et vous obtenez une belle petite flèche d'angle en haut à droite:
-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
C'est si simple. En utilisant cette méthode, nous pouvons commencer avec un simple sprite à deux icônes et, avec très peu d'effort, créer six fois plus d'icônes à utiliser dans notre interface, ce qui n'est bien sûr que le début de ce qui peut être fait.
Quelques transformations, un positionnement sophistiqué et notre famille d'icônes a beaucoup progressé!
Ajout d'animation au mix
Pour une expérience hors pair, nous pouvons ajouter de l'animation au mixage. Non seulement nous transformerons les icônes, mais nous les transformerons pour rendre la transformation visible pour l'utilisateur. Regardons un autre exemple, en commençant par le signe plus vu ci-dessus.
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;}
Une rotation facile de 45 degrés transformera notre icône plus en une icône pratique.
.icon {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);}
Maintenant que notre transformation fonctionne correctement, nous pouvons ajouter une transition dans le mix. Imaginez que vous avez une fonctionnalité sur votre site pour partager la page actuelle via une variété de réseaux sociaux. En cliquant sur l'icône plus, vous ouvrirez la liste des options de partage. Pendant l'ouverture de la liste, le plus se transforme en une icône fermée grâce à une animation subtile. La meilleure implémentation que j'ai trouvée pour cela est l'application iPad de FontBook. Découvrez leur mise en œuvre:
C'est stellaire. Jetons un coup d'œil à la façon de faire naître cette beauté. Commencez par utiliser notre icône plus créée ci-dessus. Pour l'animer, ajoutez simplement la propriété de transition dans votre icône. Dans notre transition, nous spécifions la propriété (transformée), la durée (0.2s), et enfin la fonction temporelle que nous voulons utiliser (linéaire).
.icon {width: 20px;height: 20px;display: block;background: url('sprite.png') no-repeat 0 0;-webkit-transition: -webkit-transform 0.2s linear;-moz-transition: -moz-transform 0.2s linear;transition: transform 0.2s linear;cursor: pointer;}Encore une fois, c'est aussi simple que cela. Non seulement nous pouvons créer de nouvelles icônes pour notre bibliothèque avec seulement CSS, nous pouvons animer et donner vie à un élément particulier!
Utiliser l'opacité pour plus de variété
Le dernier élément du recyclage des icônes vient jouer sous la forme de la propriété d'opacité. La duplication de vos icônes principales pour le noir et le blanc vous permettra de générer un nombre infini de nuances / variantes à utiliser sur l'ensemble de votre site ou de votre application.
Une variante à quatre images (comme ci-dessous) du sprite ci-dessus peut facilement être utilisée pour créer une douzaine de fois plus d’icônes, et en augmentant ou en diminuant l’opacité, vous pouvez les placer là où vous en avez besoin.
Il est temps de passer au vert: recycler avec CSS
Comme CSS3 a gagné en popularité, ma copie de Photoshop CS5 a commencé à prendre de la poussière, et pour cause! Cette technique de recyclage de vos icônes vous permet de déployer en permanence de nouvelles versions et variantes de vos interfaces sans avoir à ouvrir les fichiers source et à ajouter des icônes encombrantes à des sprites en pleine expansion.
Le temps de maintenance diminue et votre temps passé à lire des livres comme la semaine de travail de 4 heures augmente! C'est tout l'or.
Bien sûr, l’inconvénient le plus évident de tout cela est la prise en charge de navigateurs, mais avec la récente incitation de tous à utiliser des navigateurs modernes, nous serons en mesure de tirer parti de nouvelles techniques innovantes. Ne hésitez pas à parcourir quelques exemples de cette technique.
Quelles sont les autres façons dont vous avez été en mesure de recycler les actifs de votre site Web?