Icone_actu Actu Icone_creative Creative Icone_bdw Blog Du Webdesign Icone_emploi Emploi BDW

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

by HERMANN Christophe - le 12/01/2012

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
  • 6

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 superposées n°2

Démo

Effet feuilles superposées et désordonnées

Démo | Source

Texte 3D en CSS3

Démo | Source

Texte flou en CSS3

Démo | Source

Alternance de couleur dans un tableau - tableau rayé

Démo

Tooltip animé en CSS3

Démo | Source

Cercle en CSS3

Démo

Image de fond "fullscreen"

Démo | Source

J'espère que ces snippets vous seront utiles ! 

Si vous utilisez d'autres snippets, n'hésitez pas à les partager en commentaire. 

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
  • 6
75 Auteur : HERMANN Christophe voir son blog

Intégrateur et webdesigner, je suis passionné par les technologies liées à ces métiers : HTML(5), CSS(3), jQuery etc. J'aime découvrir, expérimenter et partager de nouvelles choses ! N'hésitez pas ...

7commentaires

  • 8bec1720e15c4c2facdf620927131c9a
    Blog Webmaster

    le 12/01/12| #1

    Merci j'aime beaucoup le partage de code CSS3 !

    Julien

  • Eaa8dacff384b942888d068bf1653df9
    Dupré David

    le 13/01/12| #2

    Merci pour ces codes, je vais rapidement les utiliser !

  • 2301
    Amine Aouadi

    le 13/01/12| #3

    Super celui du ToolTip !!! toujours pratique comme technique

  • Fd70c0c4083db7998f02df50462c9b4c
    sildenafil

    le 14/01/12| #4

    slt et merci pour les code

  • Aadf9512600aae8c3a3c66523c75aabb
    Arbaoui Mehdi

    le 18/01/12| #5

    Merci pour les snippets :)

  • 212b8e71bf98e99842ce165d0eeaa2a9
    KaySix

    le 12/04/12| #6

    Nice !

  • 1a0f2cf811eb5ce726b717fbd423c1a8
    Rodleg

    le 12/04/12| #7

    merci pour cette sélection, est ce que toutes ces propriétés et sélecteurs CSS3 sont selon toi utilisable en production ?

Ecrire un commentaire