CSS3 : 9 morceaux de code prêts à l’emploi

Le 12/01/2012

Dans Développement

Comme bien souvent dans notre métier, ce que nous souhaitons faire a déjà été fait, Je vous propose ici, une petite sélection de « snippets » CSS3, ce sont des portions de codes réutilisables à utiliser dans vos projets.

Il peut arriver qu’on recherche à réaliser quelque chose en CSS3 bien que ce langage soit encore assez « jeune », j’entends par là, très peu utilisé / utilisable dans des projets de grande envergure (compatible IE). Comme bien souvent dans notre métier, ce que nous souhaitons faire a déjà été fait, alors pourquoi réinventer la roue ?

Je vous propose ici, une petite sélection de " snippets " . Bien qu’il s’agisse de codes dit réutilisables, il faudra très certainement repasser dessus afin de faire quelques ajustements pour qu’ils correspondent à vos besoins.

N’oubliez pas que certaines propriétés CSS3 utilisés dans ces snippets, ne sont pas comprises par tous les navigateurs et que certaines nécessitent l’utilisation de préfixes. Afin de vérifier la compatibilité des propriétés, n’hésitez pas à aller faire un tour sur l’excellent www.caniuse.com !

Effet feuilles superposées n°1

Démo | Source

Effet feuilles gris

Effet feuilles superposées n°2

Démo

Effet feuilles marron

Effet feuilles superposées et désordonnées

Démo

Effet feuilles desordonnees

Texte 3D en CSS3

Source

Texte 3d css3

Texte flou en CSS3

Démo | Source

Texte flou css3

Alternance de couleur dans un tableau – tableau rayé

Démo

Alternance couleur tableau raye

Tooltip animé en CSS3

Démo

Tooltip anime css3

Cercle en CSS3

Démo

Cercle css3

Image de fond « fullscreen »

Source

Image fond fullscreen