HTML & CSS

Quelques exemples...

Voici quelques exemples de réalisations HTML / CSS, accompagnés de leurs commentaires mettant en lumière certains points.

Chacun de ces exemples ont été réalisés "from scratch", en ne partant de rien. Et pour chacun d'eux, l'habillage (CSS) et le contenu (HTML) sont clairement dissociés. Il est ainsi possible d'en ôter la feuille de style (CTRL + SHIFT + S sous Mozilla Firefox) sans pour autant altérer le contenu HTML.

Note : si certaines propriétés CSS3 sont d'ores-et-déjà en cours d'implémentation dans les différents navigateurs, leur rendu en demeure encore parfois un peu hazardeux.

Exemple n°1
Barre de menus horizontale & fixe, utilisation de la propriété CSS3 box-shadow
Exemple n°2 (Naturea)
Mise en page fixe sur deux colonnes, boutons de menu à deux états, propriétés CSS3 text-shadow et box-shadow, listes stylisées (catégories & liens), boîte de contenu arrondie grâce à la propriété CSS3 border-radius
Exemple n°3
Barre de menu verticale dont le background est constitué de plusieurs images (légère ombre sur le bas et papier froissé sur le haut), importation d'une police de caractère non standard via la propriété @font-face, propriété CSS3 text-shadow et box-shadow...
Exemple n°4 (Shred-Guitar)
Design élastique dans une moindre mesure (min-width et max-width définis), importation de police de caractère non standard via @face-font, menu "drop-down" 100% CSS, article du haut scindé en 2 colonnes si la place est suffisante (par l'utilisation de la propriété CSS3 column, non prise en compte par tous les navigateurs et dont le rendu reste assez "anarchique" à l'heure actuelle)