Une Icône Wifi sans image grace à une astuce en CSS

Voilà une petite icône Wifi uniquement en css trouvé sur le compte twitter de Lea Verou :

Wednesday morning fun: Wifi icon with pure CSS http://t.co/sm1IgsHKn3

— Lea Verou (@LeaVerou) April 3, 2013

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 »…

Il y a plusieurs manière d’arriver à ce résultat.
La plupart des méthodes proposent de créer de multiples éléments html.
Cependant, en connaissant suffisamment les propriétés css disponibles, on peut faire plus simple en stylisant seulement un élément html.

[pastacode lang= »css » message= »Icone Wifi en css » highlight= » » provider= »manual »]

/**
 * Just for fun: Wifi icon with pure CSS
 */

.wifi {
	padding: 20px;
}

.wifi, .wifi:before {
	display: inline-block;
	border: 60px double transparent;
	border-top-color: currentColor;
	border-radius: 50%;
}

.wifi:before {
	content: '';
	width: 0; height: 0;
}

[/pastacode]

vous pouvez aussi voir le résultat sur dabblet.

On peut faire encore mieux, par exemple en rajoutant des animations avec des transitions css par exemple. Les limites ne sont finalement que le support navigateur.

Bien sur j’en parle à des fins de démonstrations, pour le plaisir, ou la simple (re-)découverte de propriétés CSS.
Au passage je n’oublie pas de présenter le site http://one-div.com qui propose une liste impréssionnante d’images réalisés uniquement en CSS3, avec l’avantage de pouvoir changer les couleurs à volonté, de changer la taille sans perte ou artéfacts, et aussi de pouvoir les animer …