Vous connaissez certainement l'effet de rollover qui consiste à subsituter une image de fond survolée par la souris avec une autre image. Cet effet permet d'ajouter de l'interacivité à votre site, et est très souvent utilisé pour animer des boutons.
Plusieurs techniques permettent d'obtenir cet effet, du simple code HTML (non conforme XHTML) à l'utilisation du javascript.
Ces méthodes traditionnelles présentent cependant des désavantages:

• avec de petites connections (modem par exemple), l'image de substitution peut ne pas être chargée à temps. Le palliatif traditionnel est de précharger l'image par javascript ou HTML (dans un élément invisible), ce qui a pour effet de multiplier les transactions avec le serveur d'images.
• si vous changez ou déplacez une image, vous devrez penser à aussi modifier la deuxième image.
• lorsque le javascript est désactivé, il n'y a plus de rollover.

Saviez-vous que par une petite astuce, on peut obtenir le même effet en CSS et ce avec une seule image? Ainsi vous réduirez la charge des serveurs et faciliterez la maintenance de votre site en ne modifiant plus qu'une seule image.
L'astuce est simple. Prenons le cas d'une image-bouton de 100x100px qui changera de couleur lorsqu'elle sera survolée par la souris. Traditionnellement, nous écririons le code HTML suivant pour afficher l'image dans un lien:



Le CSS nous permettant d'appliquer une image en fond d'un élément, nous pouvons aussi écrire ce code équivalent:


et encore mieux, en séparant le fond de la forme:

pour le HTML et

pour le CSS.

Tout cela est bien beau, mais nous n'avons pour le moment qu'une image qui ne fait pas de rollover. Nous y venons...
Si l'on considère que le CSS permet à la fois de positionner une image de fond, de masquer une partie du contenu et d'agir au passage de la souris sur un lien, nous concluons qu'il suffit de fusionner les deux images du bouton en une seule, l'une au dessus de l'autre par exemple, et d'utiliser à bon escient ces fonctionnalités pour obtenir notre effet de rollover.
Deux images de 100x100 deviennent ainsi une seule image de 100x200:

Il ne reste plus qu'à modifier le CSS pour le bouton en postionnant l'image de fond et masquant le dépassement:

Beaucoup utilisent les curseurs de souris personnalisés sur leurs pages et la plupart du temps, ceux-ci ne sont visibles que pour les versions récentes d'Internet Explorer.
Ce court article vous donne l'astuce qui permettra à vos visiteurs de profiter de votre curseur personnalisé et ce même avec d'autres navigateurs, tels que FireFox ou Opera.
Il suffit juste dans votre feuille de style CSS de définir le curseur de la souris de cette façon:
cursor: url(url_du_curseur), default;

Il semble en effet que le moteur de rendu des navigateurs Gekko (dont fait partie FireFox) ait un bug dans la gestion des curseurs personnalisés. Le fait d'ajouter le mot default en fin de ligne débloque la fonctionnalité (pour un curseur par de pointage par défaut). Vous pouvez bien évidemment remplacer ce mot-clé par un de ceux proposés dans la spécification CSS2 du W3C.

Ceci ne fonctionne qu'avec les curseurs fixes (au format .cur).
Passez la souris ici pour un exemple de curseur fixe (.cur)

En HTML/CSS, on peut aisément habiller des blocs avec des bordures de couleur grâce aux propriétés CSS de la famille border, mais ces bordures exclusiviment de forme rectiligne horizontale ou verticale. Exclusivement? Pas tout à fait, car si on examine de plus près les styles de bordure inset / outset, on s'aperçoit que la petite partie à l'intersection de deux bordures est oblique.
Nous pouvons donc exploiter cette particularité afin de dessiner des formes obliques.
L'utilité de cette technique est bien limitée puisqu'elle ne s'appliquera pratiquement jamais à un design.
C'est donc pour le fun, que je vous livre quelques essais.

Les carreaux

Nous pouvons, par une alternance de blocs à bordure solide correctement définie, obtenir un joli pavé carrelé:
Comment est-ce réalisé ? Nous créons un cadre avec une largeur et une hauteur définies en pixels (ici 300) dans lequel non insérons des blocs carrés flottants sans overflow de 50px de coté avec un style alterné. Le style de chaque bloc se contente de définir deux bordures perpendiculaires.
Le code HTML de ce carrelage:

Des vagues

Nous pouvons, en changeant simplement le CSS, obtenir un effet de vagues, comme dans l'exemple suivant:
Absolument inutile, ce point méconnu du CSS nécessitait d'être souligné !!
(NB : Comme toujours, IE n'apprécie pas qu'on exploite le CSS trop intensément et donne un résultat médiocre, surtout lors de l'utilisation de bordures non solides).