CSS3 : opacité des images et couleur du texte sélectionné

Nicolas, le 03 mai 2011

A mes minutes (heures, c’est trop long) perdues, je me replonge avec bonheur dans le HTML et le CSS. Le premier étant passé en version 5 et le second en version 3, j’ai de quoi assurer un bon moment de plaisirs et de (re)découvertes.
Parce que c’est vraiment la sensation que j’ai : redécouvrir le html et le css, ainsi que leur champs drastiquement élargi.

Alors, je m’amuse à faire quelques tests sur ce présent blog avant de me lancer dans une refonte complète du template (oui, ça ne va pas tarder après quelques années sans changement de thème).

J’avais déjà évoqué comment embarquer une police dans la page html avec le css dans un précédent article.

Attaquons-nous à des fonctions qui peuvent paraître aussi nécessaires qu’un gif animé, mais qui pourraient être nettement plus pertinentes en d’autres circonstances.

Modifier l’opacité d’une image au survol par la souris
Idéal pour des menus imagés, pour mettre en avant une image dans une gallerie, ces quelques lignes de code sont loin d’être compliquées.
La première partie modifie l’opacité (alpha) par défaut de l’ensemble des images de la page ( img { } ) en établissant la valeur à 75% (opacity:0.75;) de l’opacité « normale ». Comme mon fond est blanc, ça aura comme conséquence d’éclaircir l’image.
La deuxième partie modifie l’opacité au survol des images par la souris ( img:hover { } ) en rétablissant l’opacité complète (opacity:1;).
On note que dans les 2 parties, on ajoute une ligne de code pour assurer une transition linéaire douce entre les 2 valeurs de l’opacité sur une durée de 0.7s.

img {
-webkit-transition: opacity 0.7s linear;
opacity: 0.75;
}
img:hover {
-webkit-transition: opacity 0.7s linear;
opacity: 1;
}

Changer la couleur de sélection du texte
Ici aussi, de la pure cosmétique avec le changement de la couleur de sélection du texte. Au lieu de compter sur la couleur par défaut de mon navigateur (bleu ciel), j’ai décidé de me mettre en accord avec la charte du blog : le orange.
La première partie du code s’en charge très bien en établissant la valeur hexadécimale de la couleur de sélection à #FF8000 (mon « orange »).
La deuxième partie du code est optionnelle. Je l’ai composée pour éviter que la sélection ne dépasse littéralement de la ligne de texte (elle avait la fâcheuse tendance d’empiéter sur la sidebar). Phénomène que j’ai croisé très souvent sur le web, mais qui semble ne gêner que moi. Cette ligne de code n’a pour seul intérêt que de masquer ce qui « sort » de la zone nommée « content », zone qui délimite le texte dans mon thème.

::-moz-selection {
background:#FF8000;
}
::selection {
background:#FF8000;
}

#content {
overflow: hidden;
}

Voilà, vous savez tout. Amusez-vous bien.

#blog #hack it yourself #sciences