Une icône Cloud en CSS

Download 152 Hits - 3.31 kBPage de démonstration Démo Icône Cloud en CSS

Depuis quelques temps, on parle de plus en plus du "Cloud", à tel point que petit à petit, les nuages fleurissent partout sur le web. Et bien pourquoi ne pas rentrer dans la mouvance et créer notre petit nuage personnel en CSS? Bien sûr en CSS3, sans tenir compte de Celui-Dont-On-Ne-Doit-Pas-Prononcer-Le-Nom.

J'ai essayé trois façons différentes pour faire notre icône, avec plus ou moins de succès au niveau du rendu final. Je vais vous en montrer qu'une mais les trois sont incluses dans le zip téléchargeable et dans la démo. Celle que nous allons voir ici est la plus compliquée des trois, mais c'est celle qui donne les meilleurs résultats, le plus dur à réaliser étant la flèche, c'est là où les trois méthodes diffèrent.

Balisage HTML

Nous aurons besoin de 4 div imbriquées : .download pour le fond noir transparent, .cloud pour le nuage, .cloud-arrow pour les bordures de la flèche, et .cloud-mask pour la flèche blanche.

1
2
3
4
5
6
7
<div class="download">
	<div class="cloud">
		<div class="cloud-arrow">
			<div class="cloud-mask"></div>
		</div>
	</div>
</div>

Le fond de l'icône

1
2
3
4
5
6
7
8
.download {
	position: relative;
	width: 100px;
	height: 100px;
	margin: 0 auto;
	border-radius: 14px;
	background: rgba(0,0,0,.7);
}

Pour le positionnement et le margin, vous rectifierez par vous-même selon les besoins ;)

Le nuage

Pour le reste, tous nos éléments seront positionnés en absolute et auront un fond blanc (ou presque tous). Nous utiliserons aussi les pseudo-éléments :before et :after :

9
10
11
12
.cloud, .cloud:before, .cloud:after, .cloud-arrow, .cloud-arrow:before, .cloud-arrow:after, .cloud-mask, .cloud-mask:before, .cloud-mask:after {
	position: absolute;
	background: #fff;
}

Creation du nuage
Voilà comment nous allons construire notre nuage :
La partie blanche est seulement un rectangle avec les coins arrondis, le rond représenté en rouge est le pseudo-élément :before, et le rond vert est le pseudo-élément :after. Nous devons juste faire attention au z-index car la flèche devra être au-dessus des deux ronds du nuage.

13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.cloud {
	width: 80px;
	height: 30px;
	left: 10px;
	top: 42px;
	border-radius: 15px;
}
.cloud:before {
	content:'';
	width: 20px;
	height: 22px;
	left: 13px;
	top: -12px;
	border-radius: 10px;
	z-index: 20;
}
.cloud:after {
	content:'';
	width: 40px;
	height: 40px;
	right: 13px;
	top: -21px;
	border-radius: 20px;
	z-index: 20;
}

Le fond de la flèche

Avec .cloud-arrow nous allons faire la barre verticale de la flèche : fond blanc, bordure de 2px et coins arrondis (et un z-index de 30, supérieur aux ronds du nuage).

38
39
40
41
42
43
44
45
46
.cloud-arrow {
	width: 12px;
	height: 15px;
	left: 32px;
	top: 7px;
	border-radius: 3px;
	border: solid 2px rgb(50,50,50);
	z-index: 30;
}

Bordure de la pointeC'est maintenant que ça se complique. Avec :before et :after nous allons créer les bords gauche et droit de la pointe. Pour (essayer de) faire simple, prenons le bord gauche pour exemple (:before) :
Avec linear-gradient on applique un fond gris jusqu'à 50% de la largeur (en rouge sur l'image) et transparent sur le reste (en vert sur l'image), puis on incline ce fond de 45° vers le bas. On obtient alors un triangle gris pointant vers le haut et la gauche.
Puis, avec skewX(), on déforme le tout comme si on tirait le haut du triangle vers la gauche. On obtient donc un triangle plus fin. Ces manipulation nous permettent, entre autres, d'avoir un coin supérieur gauche arrondi.

Enfin, avec :after on fait la même chose mais dans l'autre sens.

47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
.cloud-arrow:before, .cloud-arrow:after {
	content:'';
	width: 19px;
	height: 17px;
	bottom: -16px;
	z-index: 40;
}
.cloud-arrow:before {
	right: -5px;
	border-top-left-radius: 4px;
	-webkit-transform:	skewX(40deg);
	-moz-transform:		skewX(40deg);
	-o-transform:		skewX(40deg);
	transform:		skewX(40deg);
	background: transparent -webkit-gradient(linear, 0 0, 19 19, from(rgb(50,50,50)), to(transparent), color-stop(0.5, rgb(50,50,50)), color-stop(0.5, transparent));
	background: transparent -webkit-linear-gradient(-45deg, rgb(50,50,50) 50%, transparent 50%);
	background: transparent    -moz-linear-gradient(-45deg, rgb(50,50,50) 50%, transparent 50%);
	background: transparent      -o-linear-gradient(-45deg, rgb(50,50,50) 50%, transparent 50%);
	background: transparent         linear-gradient(-45deg, rgb(50,50,50) 50%, transparent 50%);
}
.cloud-arrow:after {
	left: -5px;
	border-top-right-radius: 4px;
	-webkit-transform:	skewX(-40deg);
	-moz-transform:		skewX(-40deg);
	-o-transform:		skewX(-40deg);
	transform:		skewX(-40deg);
	background: transparent -webkit-gradient(linear, 19 0, 0 19, from(rgb(50,50,50)), to(transparent), color-stop(0.5, rgb(50,50,50)), color-stop(0.5, transparent));
	background: transparent -webkit-linear-gradient(-135deg, rgb(50,50,50) 50%, transparent 50%);
	background: transparent    -moz-linear-gradient(-135deg, rgb(50,50,50) 50%, transparent 50%);
	background: transparent      -o-linear-gradient(-135deg, rgb(50,50,50) 50%, transparent 50%);
	background: transparent         linear-gradient(-135deg, rgb(50,50,50) 50%, transparent 50%);
}

La partie blanche de la flèche

Maintenant il nous faut créer la partie blanche de la pointe, mais aussi masquer la bordure haute grise de la pointe (sinon on obtient une sorte de "maison" à l'envers).
Avec .cloud-mask on crée un rectangle blanc presque identique à la barre verticale de la flèche, mais qui descend 4px plus bas, et sans bordure.

80
81
82
83
84
85
86
87
.cloud-mask {
	left: 0;
	right: 0;
	top: 0;
	bottom: -4px;
	border-radius: 1px;
	z-index: 50;
}

Il ne nous reste plus qu'à faire la pointe blanche avec :before et :after, de la même manière que précédemment, mais avec du blanc/transparent à la place du gris/transparent, et en modifiant les dimensions.

88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
.cloud-mask:before, .cloud-mask:after {
	content:'';
	width: 14px;
	height: 13px;
	bottom: -10px;
}
.cloud-mask:before {
	right: -2px;
	border-top-left-radius: 2px;
	-webkit-transform:	skewX(40deg);
	-moz-transform:		skewX(40deg);
	-o-transform:		skewX(40deg);
	transform:		skewX(40deg);
	background: transparent -webkit-gradient(linear, 0 0, 14 14, from(#fff), to(transparent), color-stop(0.5, #fff), color-stop(0.5, transparent));
	background: transparent -webkit-linear-gradient(-45deg, #fff 50%, transparent 50%);
	background: transparent    -moz-linear-gradient(-45deg, #fff 50%, transparent 50%);
	background: transparent      -o-linear-gradient(-45deg, #fff 50%, transparent 50%);
	background: transparent         linear-gradient(-45deg, #fff 50%, transparent 50%);
}
.cloud-mask:after {
	left: -2px;
	border-top-right-radius: 2px;
	-webkit-transform:	skewX(-40deg);
	-moz-transform:		skewX(-40deg);
	-o-transform:		skewX(-40deg);
	transform:		skewX(-40deg);
	background: transparent -webkit-gradient(linear, 14 0, 0 14, from(#fff), to(transparent), color-stop(0.5, #fff), color-stop(0.5, transparent));
	background: transparent -webkit-linear-gradient(-135deg, #fff 50%, transparent 50%);
	background: transparent    -moz-linear-gradient(-135deg, #fff 50%, transparent 50%);
	background: transparent      -o-linear-gradient(-135deg, #fff 50%, transparent 50%);
	background: transparent         linear-gradient(-135deg, #fff 50%, transparent 50%);
}

That's it!

Ça y est, nous avons achevé notre icône. La méthode n'est pas ce qu'il y a de plus simple, mais c'est celle qui fourni le meilleur résultat parmi celles que j'ai testé. Même une fois zoomé, voilà ce que ça donne :

Icône Cloud CSS - Zoom

Mes 2ème et 3ème méthodes utilisent une div en moins.
La 2ème est même plus compliquée que celle présentée car il faut tenir compte d'un bug de Firefox, qui ne permet pas de faire passer un pseudo-élément :before ou :after sous l'élément le contenant avec z-index. Donc il faut créer d'abord la pointe grise avec .cloud-arrow, puis la barre verticale avec :before, et enfin la pointe blanche avec :after. D'où un amoncèlement de scaleX(), scaleY(), rotate() et translate().
La seule chose intéressante à retenir avec cette 2ème méthode, c'est que lorsque l'on fait un transform à plusieurs "effets", l'ordre de ces "effets" a de l'importance :
transform: rotate(-45deg) scaleX(.91) scaleY(.77); n'aura pas le même résultat que :
transform: scaleX(.91) scaleY(.77) rotate(-45deg);.

La 3ème méthode est beaucoup plus simple puisque j'utilise tout simplement border pour faire les triangles, cependant, le rendu n'est pas terrible. En plus, Opera va poser un petit problème.

Tags :   
dway
24
mai
2011
@23:44

très sympa :)

#
Greg
25
mai
2011
@4:04

Thanks :)

J'ai encore d'autres expérimentations CSS3 sous le coude, dont une que je suis en train de réaliser qui me prend du temps. Mais ça va donner quelque chose de sympa je pense :)

A plus tard donc...

"En réponse à dway"Répondre
#
ptiloup77300
30
avr
2012
@4:34

Interessant et aussi ce site possede l'un des design que j'apprecis grandement

"En réponse à Greg"Répondre
#
dway
25
mai
2011
@12:18

miam ^^

#
MAT
23
juin
2011
@0:49

SYMPA EN EFFET

#
Toffe25
26
juil
2011
@22:06

Je viens de faire un tour sur ton site.
Et je n'ai qu'une chose à dire : t'es vraiment un grand malade !!!
Je n'ai pas d'autre compliment en stock.
Je suis abasourdit par la qualité et la beauté de ton travail.
Chapeau bas.
Christophe

#
Greg
26
juil
2011
@22:18

Hahaha.
On ne m'avait jamais dit ça concernant mon travail XD
Merci bien Toffe :)

"En réponse à Toffe25"Répondre
#
Toffe25
26
juil
2011
@23:34

Oui, c'est vrai. Qui irai faire une icône entièrement en CSS3 alors qu'il est 100 000 fois plus facile de faire un dessin ? ;)
A bientôt pour de nouvelles lectures qui émoustillent autant les yeux que les cellules grises.

"En réponse à Greg"Répondre
#
Greg
30
juil
2011
@22:54

Oui mais c'est moins fun avec une image ;)
Ça va pas te rassurer, mais il y a pire que moi à ce niveau, certains s'amusent à faire des icônes assez compliquées en CSS ^^

"En réponse à Toffe25"Répondre
#
Pierre
02
jan
2012
@14:13

J'adore !!

Je voudrais juste savoir si c'est possible que tu nous fasse un petit tuto sur l'utilisation de cette icône lors d'un téléchargement, comme tu le fait ici ?

#
Greg
02
jan
2012
@17:47

Thx! :)

Je vais voir ce que je peux faire (peut-être pas de suite), je rajouterais un supplément à cet article à l'occasion.
Par contre je rappelle que ça ne va rien donner de bien pour IE (jusqu'à 9 inclus à priori, pas testé). Donc pour un site en production il faut faire gaffe ;) (moi j'ai fait le choix de ne pas me soucier de IE sur la partie blog).

"En réponse à Pierre"Répondre
#
Pierre
03
jan
2012
@10:57

Merci Greg, c'est cool !!

J'ai également laissé tomber IE, disons pour une partie de mon site.

"En réponse à Greg"Répondre
#
Anthem0n
19
nov
2012
@16:46

Hello,

Tout d'abord félicitations pour tous ce que tu fais sur ce blog.

Concernant l'article, juste une petite question toute innocente ? Le font-face n'est-il pas plus simple & efficace pour l'utilisation d'icônes ? Si on considère que ça reste du CSS3 bien sûr ? J'avoue c'est moins fun mais bon... :)

#
Greg
19
nov
2012
@17:14

Hello, et merci.

Tu as tout à fait raison, c'est certainement plus simple (et moins lourd peut-être) avec une fonte d'icônes. De plus, cela permettrait une plus grande compatibilité avec les navigateurs.
Comme tu dis c'est moins fun, ce qui était un peu le but de l'article en fait ^^
Enfin, en gros, le but de l'article n'était pas "bon voilà, si vous voulez faire un nuage scalable, il faut faire ça", mais plutôt "bon voilà, on a transform, gradient, border-radius, on peut faire un nuage avec" (oui, mes 2 expressions commencent par "bon voilà" et je le revendique).

A+ et merci pour ton message :)

"En réponse à Anthem0n"Répondre
#

Salutations, étranger.

Envie d'un avatar?
Gravatar
Do not fill the next field
:D :lol: :) ;) :P 8) :roll: :( :cry: :oops: :? :| :o 8O :x :twisted: :evil: :mrgreen:

.

Afficher le panneau des Smilies:D   Afficher le panneau des balises html utilisables Balises
Vous pouvez utiliser ces balises:
<b></b> <i></i> <del></del> <a href=""></a> <abbr title=""></abbr> <cite></cite> <code></code> <pre lang="" line=""></pre>
Exemples pour "pre": lang="css", "html", "javascript", "jquery", "php", "sql"... (ou laisser vide)