Vous rêviez de pouvoir faire vos propres formes uniquement en CSS, voilà une petite astuce pour générer une icône ressemblant comme deux gouttes d’eau au symbole « WIFI ».
Voila ce à quoi devrait ressembler le résultat :
en soit, on se rend compte que ce n’est pas hyper compliqué à mettre en place, il suffit de « courber quelques traits » comme le dit david sur cette page : http://degliame.net/icone-wifi-astuce-css/ …
Sur l’article cité en source on apprend comment utiliser quelques lignes de CSS pour styliser quelques balises HTML et leurs donner les formes que l’on souhaite.
La plupart des méthodes proposent de créer de multiples éléments html.
Mais comme le rappel l’article en étudiant un peu les propriétés CSS disponibles, on peut styliser seulement un élément html.
le résultat est disponible sur ce dabblet.
Bien sur, il faut réfléchir à la bonne utilisation de cette technique, ce n’est pas parce que l’on peut le faire qu’il faut forcement le faire.
Dans la plupart des cas, il est plus judicieux d’utiliser d’autres techniques, comme par exemple la technique des sprites d’images, ou l’utilisations d’images vectorielles, voire même encore dans le cas où il y’a beaucoup d’éléments différents à afficher : la création et l’utilisation d’une police personnalisé incluant toutes les formes souhaités. Ainsi on bénéficie de toutes les avantages du vectoriel avec la possibilité d’utiliser un grand nombre de propriétés Css pour personnaliser la position, la couleurs, l’angle, la forme, la graisse, la décoration etc …
Laisser un commentaire