50 techniques CSS pour coder plus rapidement

50-css-techniques

Pour ne pas réinventer la roue nous vous présentons ici 50 techniques CSS pour coder plus rapidement. Vous en connaissez déjà sûrement quelques-unes mais peut être pas toutes.

Techniques CSS

1. Arrière-plan 3D CSS
Le site Silverback nous montre comment utiliser 3 images d’arrière-plan afin de créer l’illusion 3D avec seulement du CSS. pas de documentation mais le code source est plutôt intuitif. [ Wilson Miner]

webcssdesign

2. PNG Transparence
Utiliser des images PNG afin d’améliorer le design de vos sites.

webcssdesign

3. CSS Server-Side Pre-Processor

webcssdesign

4. Menu CSS

webcssdesign

5. CSS SiteMap

webcssdesign

6. Styliser vos champs input avec du CSS et DOM

webcssdesign

7. A Savvy Approach to Copyright Messaging
Ajouter un copyright sur vos images sans les dénaturer.

webcssdesign

8. Particletree Liste

webcssdesign

9. Advanced CSS Menu Trick

webcssdesign

10. CSS hover

webcssdesign

11. Tableau dynamique avec colonnnes comme le tableau de prix Crazy Egg

webcssdesign

12. Barre de navigation

List-style webcssdesign

13. Styliser vos boutons CSS

webcssdesign

14. Variables dynamiques CSS
Geoffrey Grosenbach décrit comment intégrer des variables CSS avec « Ruby on Rails ».

Dynamic-css webcssdesign

15. Liens avecFavicons

webcssdesign

16. Tableau CSS version 2

webcssdesign

17. Menu à étape CSS
Une méthode pour afficher menus à étape.

webcssdesign

18. Boutons graphiques CSS | 456 Berea Street

webcssdesign

19. Liens textes avec icônes CSS
Identifier la nature des liens textes avec des icones représentatives.

webcssdesign

20. Liste ordonnée (Simple PHP et CSS)
Styliser vos listes ordonnées.

webcssdesign

21. Menu circulaire CSS
Un beau menu circulaire. Source code et example.

webcssdesign

22. Dock Menu CSS

webcssdesign

23. Digg-like navigation CSS
Créer un menu navigation style digg-like.

Digg webcssdesign

24. 13 Awesome Javascript CSS Menus
13 exemples de menus JavaScript+CSS. Slashdot Menu et Sexy Sliding Menu

webcssdesign

25. Tableau de prix CSS
Une solution très intéressante de tableau de prix avec effet sur le clic. Solution similaire : Tablecloth.

webcssdesign

26. CSS List Expander

webcssdesign

27. Barre d’outils VISTA CSS
La barre d’outils VISTA avec les boutons et effets CSS et (X)HTML.

Vista webcssdesign

28. Fondu de bas de page
Un effect de fondu pour le bas de page. Une simple image PNG image en position « fixed bottom » et un z-index élevé.

webcssdesign

29. Effet scrollover
Une technique CSS+JavaScript por créer des effets scrollover

webcssdesign

30. Index A-Z CSS

webcssdesign

31. CSS Liste Boxes
Utiliser une liste non ordonnée pour créer des boxes.

Listboxes webcssdesign

32. Navigation table des matières CSS

webcssdesign

33. Affichage sous forme de recette CSS

webcssdesign

34. Partial Opacity

webcssdesign

35. Simple Round CSS Links (Wii Boutons)

Css25 webcssdesign

36. Sexy boutons CSS

webcssdesign

37. CSS Pull Quotes

webcssdesign

38. Drop Shadow CSS

webcssdesign

39. CSS Speech Bubbles
Customiser des bulles d’informations en CSS et valid XHTML 1.0 strict.Compatible avec la plupart des navigateurs.

webcssdesign

40. CSS Double Liste

webcssdesign

41. Perspective CSS

webcssdesign

42. Liens Email
Afficher des liens emails automatiquement avec du CSS. CSS Attribute non supporté par Internet Explorer 6 et 7.

webcssdesign

43. CSS: Menu Descriptions
Ajouter des descriptions à vos menus.

webcssdesign

Further Techniques

44. Transparence CSS pour tous les navigateurs

webcssdesign

45. Time Sensitive CSS Switcher
Switcher vos fichiers CSS en fonctions de l’heure du jour.

46. Custom Reading Containers
Ce petit script vous permet de redimensionner n’importe quel containeur.

47. Eric Meyer’s CSS Reset

webcssdesign

48. PNG Overlay

49. Transformer une liste non-ordonnée en Arbre

webcssdesign

50. Images redimensionnables avec CSS

webcssdesign

Voici donc une liste non-exhaustive, n’hésitez pas à la compléter.

3 commentaires
  1. free government grant 8 années ago

    Great site. A lot of useful information here. I’m sending it to some friends!

  2. yoppla 8 années ago

    impressionnant cette article, une bible du css, vraiment merci, plein de chose a apprendre 😉

  3. id meneo 7 années ago

    The best list ever. I’ve bookmarked it and come back whenever I need inspiration.
    Keep up the good work!

Répondre

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

*

quatre × cinq =

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?