Composants CSS

Composants pour améliorer et simplifier le design de vos pages Web sans recourir à un framework JavaScript.

Case à cocher au look professionnel

Elles peuvent être personnalisées sans framework.

Galerie de vignettes

Comment aligner des vignettes et du texte verticalement, avec un code minimal, grâce à une feuille de style.

Galerie d'images sur plusieurs lignes

Pour aligner des vignettes avec un commentaire, grâce à un code CSS compatible avec tous les navigateurs.

Text-shadow

Cette propriété CSS 3 qui ajoute une ombre aux caractères, est implémentée sous tous les navigateurs sauf IE 6 à 8 qui utilisent un filtre.

Infobulle en CSS pur, contenant des images

On personnalise les bulles d'information pour choisir leur apparence et aussi leur contenu, avec des images, des titres.

Editeur pour créer une ombre en ligne

Créer une box-shadow de façon interactive et récupérer le code CSS.

Quelle taille d'écran pour un ordinateur?

La largeur de la page se définit en fonction de la taille d'écran la plus commune. Les chiffres de mai 2012 fournis par StatCounter indiquent que 1600x1050 et 1920x1080 sont les résolutions les plus courantes.

Templates gratuits (liens externes)

Normalize.js. Une feuille de style pour harmoniser l'apparence sur tous les navigateurs.
Columnal. Conception en multiples colonnes mais fluide, il devient minimal avec une seule colonne sur les écrans réduits des mobiles.
1140grid. Template similaire.
Skeleton. Template fluide avec une ou plusieurs colonnes selon la taille de l'écran. Onglets, boutons personalisés, etc. Utilise jQuery. Sur Github.
Bootstrap. Créé par Twitter, basé sur jQuery, offre les composants essentiels pour le design d'un site Web. Il est possible avec une interface en ligne de définir une version personnalisée avec les modules dont on a besoin et de la télécharger.

Ressources et applications

Tracer des formes en CSS. Cercle, étoile, coeur, tout peut être fait en CSS.
The expressive Web. Des démonstrations CSS 3 et HTML 5 par Adobe.
Alice. Démonstrations des capacités de CSS.
Navigation avec pop-up. Voir la démonstration de cet effet graphique.
CSS Dock. Le dock d'OS X d'Apple en pur CSS! A télécharger sur GitHub. Une autre version.
Flipboard. Faire tourner la page...

Questions?

Voir la FAQ CSS.

Outils

Closure Stylesheet. Logiciel Java qui étend CSS avec des variables et des fonctions.
Les outils du web design.

Pourquoi se compliquer la vie?