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

Ombre interne sur du texte

Utiliser les filtres SVG en CSS

Création: novembre 2013Modifié:

CSS3.

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

Votez

17 votes3.82

Un snippet CSS pour émuler une fonctionnalité non existante en CSS, text-shadow: inset ... ;

Comme pour la démo précédente « Simuler background-clip : text », je vous propose un snippet pour recréer une ombre interne sur n’importe quel élément d’une page web. C’est notamment utile sur les textes car la propriété text-shadow n’a pas de mot-clé inset, comme c’est le cas pour box-shadow.

Pour simuler cet effet, nous utilisons les filtres SVG appliqués depuis CSS sur du contenu HTML. Le code SVG du filtre est légèrement plus complexe que la démo précédente :

<filter id="filter">

   <feFlood flood-color="black" flood-opacity=".6" />
   <feComposite in2="SourceAlpha" operator="out" />
   <feGaussianBlur stdDeviation="2"/>
   <feOffset dx="0" dy="10" />
   <feComposite in2="SourceAlpha" operator="in" />
   <feMerge>
       <feMergeNode in="SourceGraphic" />
       <feMergeNode />
   </feMerge>

</filter>

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

.element {
   -webkit-filter: url('#filter'); /* webkit browser */
           filter: url('#filter'); /* all others browsers */
}

Voici en détails le fonctionnement du filtre :

  • La primitive <feFlood> remplit l’espace graphique avec la couleur et l’opacité définie (c’est la future couleur de l’ombre interne)
  • La primitive <feComposite> réalise une étape de compositing entre la couleur (attribut in implicite) et la couche alpha de l’élément où s’applique le filtre (attribut in2) avec l’opérateur out.
  • La primitive <feGaussianBlur> floute le résultat obtenu
  • La primitive <feOffset> décale de 10px sur l’axe Y
  • De nouveau, la primitive <feComposite> fusionne le résultat obtenu avec la couche alpha de départ. (l’ombre se forme)
  • Enfin, les primitives <feMergeNode> rassemblent la source graphique et le résultat pour le rendu final.

Ce filtre SVG appliqué sur le HTML est supporté par Firefox, Chrome, Opera 15+ et théoriquement Safari 7 (mais celui bug fortement). Dans les faits, sur iOS7 il fonctionne à peu près mais pas sur Safari 7 Mac. :/

Si vous avez plus d’infos, ou si vous avez une démo en ligne, je suis très intéressé !

 :)

Envie d'une nouvelle démo?

Un p'tit mot...

#1par Fabien, le 26 novembre 2013

Je crois que je vais commencer à m’intéresser de plus prêt aux filtres. J’adore le rendu !

#2par nektar, le 26 novembre 2013

lol tes ombres bug(ent) lorsque tu passes la souris sur les autres démos dans le menu a gauche... (win 7 , chrome)

#3par css3create, le 26 novembre 2013

@nektar : Oui, j’ai vu ça aussi. On sent bien le coté expérimental du truc :P


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