Composants CSS
Composants pour améliorer et simplifier le design de vos pages Web sans recourir à un framework JavaScript.
Menu contextuel JavaScript et CSS
Sans aucun framework, créez un menu de remplacement pour le bouton droit de la souris.
Case à cocher au look professionnel
Elles peuvent être personnalisées sans framework.
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.
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.
Outils en ligne
Editeur pour créer une ombre en ligne
Créer une box-shadow de façon interactive et récupérer le code CSS.
Templates gratuits
Interface HTML 5: Remplir la surface de la fenêtre du navigateur.
Contrairement aux pages web, l'interface d'une application ne doit être déroulée, elle doit s'aligner aux dimensions du navigateur et être ajustée lorsque l'utilisateur change la taille de la fenêtre du navigateur. Une feuille de style pour obtenir ce résultat.
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.
- 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?
Outils
- Closure Stylesheet. Logiciel Java qui étend CSS avec des variables et des fonctions.
- Les outils du web design.
Pourquoi se compliquer la vie?
