25 techniques CSS pour ne pas avoir à réinventer la roue (partie 1)
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
CSS Tabs
11 styles de menus différents pour habiller votre site
Menu déroulant vertical et horizontal
Pratique : cette une technique est assortie d’une explication en Français
Un autre menu déroulant vertical
Idéal si vous avez plusieurs niveaux dans votre menu
CSS Based Navigation
Un menu avec un très beau design
Navigation Matrix Reloaded
Une autre très beau menu CSS où le remplacement des images est relativement facile
Tableau et Formulaire
Pour peaufiner un formulaire
Permet de gérer l’affichage des élements radiobutton et checkbox de vos formulaires
Superbes messages
Technique CSS pour avoir des messages clairs : erreur, alerte, information…
Une meilleure accessibilité de vos formulaires
Vous trouverez dans cette liste de lien les façons de rendre vos formulaires accessibles, fonctionnels et beaux!
Les meilleures techniques pour la création des formulaires
Je vous conseille également cet excellent PDF “Best practices for web form design”
Rendre vos tableaux splendides
Une autre page de liens pour rendre vos tableaux attrayants et accessibles
Tableau “retractable”
Une technique qui permet de de cacher puis d’afficher le contenu d’un tableau.
Images
Générer les coins arrondis
Un site qui permet de générer le CSS pour rendre vos bords arrondis (seconde technique)
Pour mettre une ombre à vos images
Pour vous permettre d’ajouter une ombre grâce à un style
Zoom sur vos images avec des CSS
Une technique CSS pour vous permettre de zoomer au passage de la souris sur une image
Le texte autour d’un arrondi
Une technique qui peut vous servir à afficher du texte autour d’une image arrondie
Un image avec des zones chaudes
Permet d’avoir une imageMap évoluée avec des rollovers sur certaines zones
Divers
Une liste de liens cliquables
Permet sur un liste d’étendre la zone de clic et créer un effet sur le survol.
5 étoiles cliquables
Très web 2.0, cette technique laisse la possibilité de voter en 1 clic. (seconde technique)
Ajustement de la page à toutes les tailles
Une solution pour afficher votre page sur toutes les résolutions
Gérer plusieurs tailles de texte
Une technique pour laisser aux visiteurs le choix de la taille du texte.
Une lettrine en CSS
Une lettrine est large et bien mise en valeur, elle représente en général trois hauteurs de ligne.
Utilisation des effets Scriptaculous
Techniques pour utiliser les effets de la librairie scriptaculous.
Gestion des liens visités et externes
Techniques pour une gestion optimale des liens visités.
Documentation sur l’impression
Techniques pour faire une bonne impression des pages internet.
Documentation les CSS dans les emails
A lire si vous faites des campagnes emailing au format HTML/CSS .
J’ai vraiment bien aimé la vidéo de Thierry Lhermitte cela ma bien fait rire...
12 avril 2007
Piouf !
Excellente bibliothèque de liens, je garde ça sous le coude ça peut toujours servir.
Merci !
13 avril 2007
Sur smashingmagazine on peut retrouver une liste un peu dans le même genre avec pas mal de liens sympatiques
smashingmagazine
13 avril 2007
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.
13 avril 2007
Sympa merci pour ces liens
“Un image avec des zones chaudes”
13 avril 2007
bon travail
14 avril 2007
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/e.....r-la-bete/
14 avril 2007
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)
14 avril 2007
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
16 avril 2007
Très bon blog, bravo à toi et bravo également pour cet article.
25 avril 2007
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
14 avril 2008
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