Blog iamvdo.meComme 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 (attributinimplicite) et la couche alpha de l’élément où s’applique le filtre (attributin2) avec l’opérateurout. - 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é !
:)
#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