HTML & CSS

Trucs et astuces CSS

Cette page regroupe des trucs & astuces CSS que j’ajoute régulièrement : bookmarkez, blogmarker, favorisez, bref faites tourner… Si vous cherchez plutôt des exemples de design CSS plus complets, les billets présents dans cette page consacrée au design web avec CSS devrait vous intéresser 😉

Si vous avez vous aussi quelques astuces CSS à partager, n’hésitez pas à le faire dans les commentaires.

→

Design & Graphisme

Avec Color Blender, Eric Meyer ne me quitte plus ;)

En plus de ses bouquins, Eric Meyer, un maitre ès CSS, a eu la bonne idée de mettre des outils à la disposition des webmasters sur son site web. Color Blender permet de déduire les couleurs intermédiaires à partir d’une couleur de départ et une couleur d’arrivée. Je vous propose une traduction (approximative) du mode d’emploi :

Choisissez un format de couleur (hex, rgb, rgb%), entrez deux couleurs dans le format voulu, et indiquez le nombre de couleurs intermédiaires que vous désirez. Cliquez sur Blend et le résultat apparait plus bas.
Toutes les valeurs sont arrondies au nombre entier le plus proche.
Vous pouvez cliquer sur un carré de couleur de la palette des couleurs à droite pour remplir le champ qui a le focus, avec la valeur appropriée.
Passer d’un format à un autre aura pour effet de traduire toutes les valeurs déjà en place.
Le bouton Clear efface toutes les valeurs et les couleurs, mais ne change pas la valeur du format de couleur en cours.
Si vous voulez utiliser Color Blender offline, enregistrez la page sur votre disque dur.

Attention, utiliser Color Blender une fois, c’est l’utiliser toujours !

MAJ du 24/11/06 : colorblender.com propose à peu près les mêmes fonctionnalités.

Intégration web

Tracker les liens sortants

Les pages de redirection sont souvent utilisées pour assurer le tracking des liens sortants. Ce système — lourd à mettre en place — peut être avantageusement remplacé par la classe XHRConnection de Thanh qui ne cesse de trouver des applications aussi pratiques qu’élégantes.

Ce tutoriel explique comment — tout en laissant les liens en dur dans la page et en redéfinissant leur comportement onclick — associer une action pour envoyer à un script côté serveur (tracker.php) l’URL de la page courante ainsi que l’URL de la page demandée par l’utilisateur.

La fonction track() renvoit ensuite true pour que le navigateur effectue la requête de l’utilisateur en accédant à l’URL demandée. Le résultat apparait sous la forme d’un tableau affichant la date, l’heure, l’URL demandée ainsi que l’url de la page appelante. Deux derniers mots : merci Thanh !

HTML & CSS

Design CSS : fixe, élastique ou liquide ?

Difficile de choisir la bonne formule pour ses mises en pages CSS. Surtout si l’on se préoccupe des standards du W3C et des bonnes manières pour un web qui prenne du sens et perde du poids ! Entrons dans le vif du sujet en précisant rapidement de quoi il s’agit : →