Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Effet de dégradé sur texte style Twitter

Utilisation des pseudo-éléments :before et :after

Création: janvier 2011Modifié:

Hover Me!

Contenu
Full CSS Pas de JavaScript Pas d’images
Navigateurs
Firefox Safari Chrome
Partagez
Facebook Twitter

Votez

37 votes4.15

Utiisation des pseudo-éléments CSS3 ::after et ::before pour créer cet effet de dégradé. Aucune image utilisée, ni Javascript. Le contenu du menu est masqué par un dégradé qui est progressivement transparent. Le déplacement lors du hover permet de mieux apprécier l’effet.

Envie d'une nouvelle démo?

Un p'tit mot...

#1par Yukulélé, le 14 avril 2011

vous pourriez aussi utiliser la propriété css

pointer-event:none ;

sur vos gradients (:before :after) ce qui permet de garder le :hover effectif sur toute la barre.
cette propriété très pratique est assez méconnue, elle est disponible sur la plupart des navigateurs.

#2par SolidSnake, le 12 mai 2011

Avec l’intégration du dégradé linéaire sous Opera, j’imagine que cet effet doit être possible aussi.

#3par both, le 19 avril 2012

bjr !! la demo de ce tuto est vraiment interessant.pourrai je avoir un tuto détaillé de celui-ci !! merci d’avance

#4par SouL Des, le 12 janvier 2013

Merci ♥


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)