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

Simuler background-clip : text

Combiner les filtres CSS, SVG et @supports

Création: novembre 2013Modifié:

Hello.

Contenu
Pas de JavaScript Avec images
Navigateurs
Firefox Chrome Opera
CSS3...
Filtres CSS
Partagez
Facebook Twitter

Votez

19 votes3.93

Un snippet CSS pour simuler la propriété non standard : background-clip: text, en profitant de la puissance des filtres SVG.

La propriété background-clip: text n’étant pas standard et non reconnue au sein des navigateurs non WebKit, je vous propose un petit snippet pour profiter de cette propriété, dans la quasi majorité des navigateurs du marché.

Pour simuler cet effet, nous utilisons les filtres SVG appliqués depuis CSS sur du contenu HTML. Le code SVG du filtre est très simple :

<filter id="filter">
   
   <!-- faking background-clip:text -->
   <feImage xlink:href="grass-texture.jpg" width="450" height="450" />
   <feTile />
   <feComposite in2="SourceGraphic" operator="in" />

</filter>

Et il suffit donc de le référencer depuis CSS :

.element {
   filter: url('#filter');
}

Voici en détails ce que fait le filtre :

  • La primitive <feImage> extrait les pixels d’une image
  • La primitive <feTile> se charge de créer une mosaïque recouvrant l’intégralité de la source graphique sur laquelle le filtre s’applique (en se basant sur les pixels récupérés de l’image)
  • Enfin, la primitive <feComposite> réalise l’étape de compositing entre la mosaïque créée (attribut in implicite) et la source graphique d’origine (attribut in2). Cette étape est réalisée avec l’opérateur in.

Pour profiter d’un support maximal, tout en prenant en compte l’amélioration progressive, l’appel à ce filtre peut être fait au sein de la règle CSS @supports.

.element {
   color: green; /* fallback */
}

/* si -webkit-background-clip: text et @supports sont supportés */
@supports (-webkit-background-clip: text) {
   
   .element {
       /* applique un background par défaut + clip:text */
       background: url('grass-texture.jpg');
       -webkit-background-clip: text;
       /* pour surcharger color */
       -webkit-text-fill-color: transparent;
   }

}

/* si -webkit-background-clip: text n'est pas supporté, mais que @supports l'est :) */
@supports not (-webkit-background-clip: text) {
   
   .element {
       filter: url('#filter'); /* applique le filtre */
   }

}

Le support final est donc effectif pour Firefox 22+, Chrome 28+, Opera 15+ comme le montre ce support sur CanIUse. Le fallback servira donc principalement pour Safari et IE.

Pour améliorer le rendu avec Safari (où background-clip: text existe également), il est possible d’inverser le test du @supports. Attention, la dégradation gracieuse risque de ne plus être maintenue. Votre code pourrait ressembler à cela pour un support Firefox 22+, Chrome, Safari, Opera :

.element {
   
   /* applique un background par défaut + clip:text */
   background: url('grass-texture.jpg');
   -webkit-background-clip: text;
   /* pour surcharger color */
   -webkit-text-fill-color: transparent;

}

/* si -webkit-background-clip: text n'est pas supporté, mais que @supports l'est :) */
@supports not (-webkit-background-clip: text) {
   
   .element {
       background: none; /* override background */
       filter: url('#filter'); /* applique le filtre */
   }

}

Pour IE, vous pouvez éventuellement passez par du full SVG. Regardez du coté de RaphaëlJS ou de Snap.svg

Retrouvez également le second snippet utilisant les filtres SVG : « Ombre interne sur du texte »

 :)

Envie d'une nouvelle démo?

Un p'tit mot...

Aucun message actuellement. Soyez le premier!


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.)