25 techniques CSS pour ne pas avoir à réinventer la roue (partie 1)

Le 12 avril 2007

Les CSS permettent d’améliorer considérablement la présentation d’une page ou d’un formulaire. Beaucoup de développeurs se lancent dans des heures de réflexions et d’écriture alors qu’une technique qui a fait ses preuves sur le net est à disposition librement. Pourquoi aller chercher à réinventer la roue. Voici la première partie des techniques CSS qui peuvent être insérées sans aucun problème sur n’importe quel site.

Barre de Menu Horizontale

1.

CSS Tabs

technique css 1

11 styles de menus différents pour habiller votre site

2.

Menu déroulant vertical et horizontal

technique css 2

Pratique : cette une technique est assortie d’une explication en Français

3.

Un autre menu déroulant vertical

technique css 3

Idéal si vous avez plusieurs niveaux dans votre menu

4.

CSS Based Navigation

technique css 4

Un menu avec un très beau design

5.

Navigation Matrix Reloaded
technique css 5

Une autre très beau menu CSS où le remplacement des images est relativement facile

Tableau et Formulaire

6.

Pour peaufiner un formulaire

technique css 6

Permet de gérer l’affichage des élements radiobutton et checkbox de vos formulaires

7.

Superbes messages

technique css 7

Technique CSS pour avoir des messages clairs : erreur, alerte, information…

8.

Une meilleure accessibilité de vos formulaires

technique css 8

Vous trouverez dans cette liste de lien les façons de rendre vos formulaires accessibles, fonctionnels et beaux!

9.

Les meilleures techniques pour la création des formulaires

technique css 9

Je vous conseille également cet excellent PDF « Best practices for web form design »

10.

Rendre vos tableaux splendides

technique css 10

Une autre page de liens pour rendre vos tableaux attrayants et accessibles

11.

Tableau « retractable »

technique css 11

Une technique qui permet de de cacher puis d’afficher le contenu d’un tableau.

Images

12.

Générer les coins arrondis

technique css 12

Un site qui permet de générer le CSS pour rendre vos bords arrondis (seconde technique)

13.

Pour mettre une ombre à vos images

technique css 13

Pour vous permettre d’ajouter une ombre grâce à un style

14.

Zoom sur vos images avec des CSS

technique css 14

Une technique CSS pour vous permettre de zoomer au passage de la souris sur une image

15.

Le texte autour d’un arrondi

technique css 15

Une technique qui peut vous servir à afficher du texte autour d’une image arrondie

16.

Un image avec des zones chaudes

technique css 16

Permet d’avoir une imageMap évoluée avec des rollovers sur certaines zones

Divers

17.

Une liste de liens cliquables

technique css 17

Permet sur un liste d’étendre la zone de clic et créer un effet sur le survol.

18.

5 étoiles cliquables

technique css 18

Très web 2.0, cette technique laisse la possibilité de voter en 1 clic. (seconde technique)

19.

Ajustement de la page à toutes les tailles

technique css 19

Une solution pour afficher votre page sur toutes les résolutions

20.

Gérer plusieurs tailles de texte

technique css 20

Une technique pour laisser aux visiteurs le choix de la taille du texte.

21.

Une lettrine en CSS

technique css 21

Une lettrine est large et bien mise en valeur, elle représente en général trois hauteurs de ligne.

22.

Utilisation des effets Scriptaculous

technique css 22

Techniques pour utiliser les effets de la librairie scriptaculous.

23.

Gestion des liens visités et externes

technique css 23

Techniques pour une gestion optimale des liens visités.

24.

Documentation sur l’impression

technique css 24

Techniques pour faire une bonne impression des pages internet.

25.

Documentation les CSS dans les emails

technique css 25

A lire si vous faites des campagnes emailing au format HTML/CSS .


17 Commentaires sur "25 techniques CSS pour ne pas avoir à réinventer la roue (partie 1)"

  • Joe Cool
    12 avril 2007 (10:29)

    Piouf !

    Excellente bibliothèque de liens, je garde ça sous le coude ça peut toujours servir.

    Merci !

  • Greg
    13 avril 2007 (14:04)

    Sur smashingmagazine on peut retrouver une liste un peu dans le même genre avec pas mal de liens sympatiques 🙂

    smashingmagazine

  • David
    13 avril 2007 (15:14)

    Effectivement Greg c’est en la voyant que je me suis mis en tête de faire cette liste, je voulais ajouter plein de mes bookmarks/favoris (le + en français). J’ai quand même mis 10 liens présents dans cette fameuse liste (surtout les menus/images) les 15 autres sont des favoris persos.

  • Fardeen
    13 avril 2007 (15:14)

    Sympa merci pour ces liens 🙂

    « Un image avec des zones chaudes » 😀

  • discret
    13 avril 2007 (21:36)

    bon travail

  • PêUR
    14 avril 2007 (18:30)

    Bonjour David,

    Tout d’abord merci pour ce lien vers mon article « Utilisation des effets scriptaculous ».

    Maintenant, pour ton lien n°25, pompage en à fait une traduction en français, l’adresse est la suivante: http://www.pompage.net/pompe/emails-html-dompter-la-bete/

  • David
    14 avril 2007 (20:00)

    Merci PêUR, pour ton lien il s’agit encore d’un très bon article du site pompage sur le format HTML et les emails mais il ne représente pas la traduction de celui placé en lien.

    Ce que j’aime bien dans celui de la sélection c’est qu’on a un tableau récapitulatif des éléments CSS qu’on peut utilisés avec les acteurs majeurs du mail (Yahoo, Microsoft & Google)

  • PêUR
    14 avril 2007 (22:09)

    Au temps pour moi, je me suis arrêté au nom de l’auteur du coup je pensais que c’était le même.

    Je cours lire ton lien alors 😉

  • CSS « FireFox
    15 avril 2007 (4:04)

    […] Posted on avril 15th, 2007. Voici des CSS qui sont dans ce excellent article. Donc a voir sur ce lien […]

  • denis
    16 avril 2007 (8:39)

    Très bon blog, bravo à toi et bravo également pour cet article.

  • florent
    25 avril 2007 (9:39)

    Génial !
    Je bosse sur un projet web actuellement pour mes études, et cette compilation m’est très utile !
    Merci beaucoup (pour notre groupe d’étude 🙂 )

    On attend avec impatience la partie 2 !

    Bonne journée

  • 25 techniques CSS pour être plus efficace (partie 2)
    9 mai 2007 (7:46)

    […] d’un précedent article je présentais la première partie des techniques CSS. Voici la suite avec des outils pour générer du code en ligne, valider votre site ou encore pour […]

  • charolais
    14 avril 2008 (15:45)

    Bonjour,

    je connaissais la majorité de ces pages mais je crois que c’est la première fois que je les trouve réunis sur une même page. Un marque page valant mieux que 50 au moins le résumé est en français :p

    Merci 😉

  • Scienceo
    7 juillet 2008 (22:06)

    Quelle liste intéressante !…et bien hiérarchisée ! Que du bon !

  • Antoine
    20 mai 2009 (23:02)

    Salut,

    super article !

    Sinon, connais-tu cette technique CSS ?

    Je l’ai découverte l’année dernière en faisant de l’ingénieurie inverse sur un thème d’iGoogle.

    ++

    Antoine

  • JEAN
    19 juillet 2009 (0:35)

    GENIAL !

  • Anitha
    8 juillet 2010 (8:30)

    Thank you for the information……