Donner un effet visuel de pression sur les liens d’un blog.

Il est désormais fréquent sur les écran tactiles d’avoir des effets visuels qui offrent une sensation de “renfoncement” lors d’un clic. Aujourd’hui je vous propose divers effets dans ce sens qui s’appliquent aux liens…

Lire la suite

   Sur les iPhones, Archos5 ou autres appareils à écran tactile, les effets de reliefs sont primordiaux pour donner une sensation de pression. Cela reste visuel, mais associé au geste créée l’illusion.

   Je me suis donc interrogé sur l’utilité d’un tel principe associé à un blog, et à la vue des liens de ce blog ayant aucune interaction au clic, je me suis dit qu’il fallait franchir le pas au nom de l’expérience utilisateur ! Car aussi subtil que cela puisse paraître, le moindre petit effet visuel contribue à passer d’un contenu “statique” à un contenu dynamique aux yeux des visiteurs.

   Après l’effet de PagePeel que j’utilise pour la zone d’abonnement, cela était dans la site logique des choses.

J’ai donc testé pour vous quelques effets tout simples à mettre en place via la feuille CSS:

1. “simili-pression” via un recul de marges;
2. fond coloré;
3. fond avec image;
4. transparence.

1. Le jeu de marges:

Le principe: lors du clic, le lien ou l’image remonte d’1 pixel et recule d’1 pixel aussi vers la gauche.

Le code: “ a:active { margin-top: –1px; margin-left:–1px} “

Efficace visuellement, mais peut poser quelques problèmes sur les blogs ayant des thèmes compliqués avec par exemples des images derrière le titre comme c’est le cas ici.

2.Fond de lien qui se colorise:

Le principe: une couleur apparait lors du clic derrière le lien

Le code: “ a:active {background-color:#cccccc}

Met très bien en valeur l’action, mais sur les thèmes possédant plusieurs couleurs à utiliser avec précaution. À moins de définir une couleur pour chaque section…

3.Fond de lien avec image:

{background-color:#cccccc} 

Le principe: pareil qu’avec la couleur.

Le code: “ a:active{background:url(‘http://Votre Image’) no-repeat; width:100%; height:100%}

Un peu complexe à mettre en œuvre selon l’effet que l’on souhaite donner. Mais le résultat sera à coup sûr original.

4. La transparence des liens:

Le principe: Le lien cliqué devient transparent selon un pourcentage défini.

Le code: “ a:active{ display:transparent; moz-opacity:0.55;opacity: 0.55;filter:alpha(opacity=55)}

C’est l’effet que j’ai appliqué ici. Très discret, il s’accorde avec tout type de thème et crée une sorte de “flash” lors du clic. La transparence se règle d’ailleurs en tout point et est même compatible avec i.e 6.0.

La liste de ces effets n’est pas exhaustive, et j’espère qu’elle aidera certains à réfléchir sur l’interactivité de leur blog et d’apporter quelques solution simple et efficaces.

crédit image: |||||||||||||||||||

Weblog multithématique traitant du Design, des Technologies, de la Photo, ainsi que de la musique heavy metal.