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
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
Un menu avec un très beau design
Une autre très beau menu CSS où le remplacement des images est relativement facile
Tableau et Formulaire
Permet de gérer l’affichage des élements radiobutton et checkbox de vos formulaires
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
Une technique qui permet de de cacher puis d’afficher le contenu d’un tableau.
Images
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
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
Permet sur un liste d’étendre la zone de clic et créer un effet sur le survol.
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 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 .
Envie de discuter de cet article ? Envoyer un message sur Twitter ou envoyez-moi un e-mail. Si cet article vous a plu, n'hésitez pas à le partager sur Twitter ou Facebook.
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……