David Degliame

Un peu de tout et du Web

  • Accueil
  • Publications
  • Contact

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

3 avril 2013 par David

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 :

une icone wifi
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.

/**
 * 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;
}
Icone Wifi en css

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 …

Classé sous :Web

Et toi comment aurais tu codé cette icône ?

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Derniers posts :

Full Path Disclosure sur rss-functions.php de WordPress

Qui a déjà reçu un panpan-culcul de Bing ? de Yahoo ? d’Exalead ? de Qwant ? de Baidu ? Yandex ? ou encore de DuckDuckGo ?

Utilisez les balises de courrier spéciaux dans l’extension Contact Form 7 pour WordPress

Enregistrer un nom de domaine expiré peut constituer une concurrence déloyale

Ouverture du coworking au Périscop’ de Saint-Nazaire

Les espaces de Coworking deviennent tendance !

erreurs d’envois de mails avec CF7, entre le spam et histoires de caches

Un espace dédié au numérique à Saint-Nazaire ?

Un problème pour envoyer vos mails sur ovh avec le smtp de mandrill