Introduction
Les filtres sont un outil puissant que les auteurs Web peuvent utiliser pour créer des effets visuels intéressants. Dans cet article, nous allons vous présenter l'historique des effets des filtres, leur fonction et la façon de les utiliser. Nous étudierons tous les filtres prédéfinis pour CSS avec quelques exemples. Nous aborderons également les considérations liées aux performances de leur utilisation sur les ordinateurs et les appareils mobiles, car il est important de connaître l'impact des filtres sur la vitesse pour une bonne expérience utilisateur. Enfin, nous passerons en revue l'état actuel de l'implémentation dans les navigateurs récents.
Le passé, le présent et le futur des effets des filtres
Les effets de filtre proviennent de la spécification Scalable Vector Graphics (SVG). Ils ont été créés pour appliquer différents effets d'image différents basés sur des pixels à un dessin vectoriel. Au fil du temps, les éditeurs ont intégré des fonctionnalités SVG dans leurs navigateurs, et l'utilité des filtres est devenue évidente. Robert O'Callahan de Mozilla a inventé une excellente idée d'utilisation des filtres SVG via l'application du CSS au contenu HTML "normal". Robert a créé un prototype qui a montré toute la puissance de l'association de filtres et de styles CSS. Les groupes de travail CSS et SVG du W3C ont décidé d'harmoniser l'utilisation des filtres HTML et SVG via le style CSS. C'est ainsi que la propriété "filter" pour CSS est née. À l'heure actuelle, un groupe de travail conjoint, composé de personnes travaillant sur les CSS et le format SVG, s'efforce de rendre les filtres utiles à tous. Les spécifications actuelles pour tous ces éléments sont disponibles ici.
Nouvelle vie pour la propriété CSS "filter"
Deja Vu frappe parfois un développeur Web lorsqu'il voit un "filtre" dans des styles CSS. Cela est dû au fait que les anciennes versions d'Internet Explorer comportaient une propriété "filter" exposée via CSS pour exécuter certaines fonctionnalités spécifiques à la plate-forme. Elle a été obsolète. Elle a été remplacée par la propriété "filter" standard, qui fait désormais partie de CSS3. Ainsi, lorsque vous voyez un "filtre" existant sur certaines anciennes pages Web, inutile de vous sentir perdu. Toutes les actions se trouvent dans la nouvelle propriété "filter". Les nouvelles versions d'Internet Explorer l'implémentent de la même manière que tous les navigateurs récents.
Fonctionnement des filtres
À quoi sert un filtre ? La façon la plus simple de considérer un filtre est comme une étape de post-traitement qui effectue quelque chose de magique une fois que tout le contenu de votre page a été mis en page et dessiné.
Lorsqu'un navigateur charge une page Web, il doit appliquer des styles, effectuer la mise en page, puis afficher la page afin qu'il y ait quelque chose à regarder. Les filtres sont appliqués après toutes ces étapes et juste avant la copie de la page à l'écran. Ils prennent un instantané de la page rendue sous la forme d'une image bitmap, effectuent des opérations graphiques sur les pixels de l'instantané, puis tracent le résultat par-dessus l'image de la page d'origine. Vous pouvez les considérer comme un filtre placé à l'avant de l'objectif d'un appareil photo. Ce que vous voyez à travers l'objectif est le monde extérieur modifié par l'effet du filtre.
Bien entendu, cela signifie qu'il faut du temps pour dessiner une page avec des filtres, mais que les utiliser correctement aura un impact minimal sur la vitesse de votre site.
De plus, tout comme vous pouvez superposer plusieurs filtres sur l'objectif de votre appareil photo, vous pouvez appliquer un nombre arbitraire de filtres les uns après les autres pour obtenir toutes sortes d'effets.
Filtres définis à l'aide du format SVG et CSS
Étant donné que les filtres étaient à l'origine issus du format SVG, il existe différentes manières de les définir et de les utiliser. Le format SVG comporte un élément <filter> qui encapsule les définitions de divers effets de filtre à l'aide de la syntaxe XML. L'ensemble de filtres défini par CSS utilise le même modèle graphique, mais ce sont des définitions beaucoup plus simples qui sont faciles à utiliser dans une feuille de style.
La plupart des filtres CSS peuvent être exprimés en filtres SVG, et le CSS vous permet également de faire référence à un filtre spécifié en SVG si vous le souhaitez. Les concepteurs de filtres CSS se sont efforcés de faciliter l'application d'un filtre pour les auteurs Web. Cet article ne traite donc que des filtres disponibles directement à partir de CSS, sans tenir compte des définitions SVG pour le moment.
Appliquer un filtre CSS
L'utilisation de filtres CSS se fait en utilisant la propriété "filter" appliquée à n'importe quel élément visible sur votre page Web. Pour un exemple très simple, vous pouvez écrire quelque chose comme
div { { % mixin filter: grayscale(100%); % } }
Le contenu de tous les <div>éléments de la page deviendra alors gris. C'est l'outil idéal pour donner à votre page l'apparence d'une image de télévision des années 1940.
La plupart des filtres utilisent une forme de paramètre permettant de contrôler l'ampleur du filtrage. Par exemple, si vous souhaitez appliquer un style à votre contenu à mi-chemin entre la couleur d'origine et une version en nuances de gris, procédez comme suit:
div { { % mixin filter: grayscale(50%); % } }
Si vous souhaitez appliquer plusieurs filtres l'un après l'autre, rien de plus simple : il vous suffit de les organiser dans votre CSS, comme suit :
div { { % mixin filter: grayscale(100%) sepia(100%); % } }
Cet exemple crée d'abord toute la couleur d'origine en nuances de gris, puis applique un effet sépia. Le résultat se présente alors comme suit:
Grâce à la flexibilité offerte par l'application de filtres l'un après l'autre, il est possible d'obtenir toutes sortes d'effets. À vous de laisser libre cours à votre imagination pour créer des résultats incroyables.
Quels sont les effets de filtres disponibles avec CSS ?
Le mécanisme initial de filtre SVG est donc à la fois performant, mais il peut paraître intimidant à utiliser. C'est pourquoi le CSS introduit un certain nombre d'effets de filtre standards qui facilitent leur utilisation.
Examinons chacun d'eux et voyons ce qu'ils font.
- échelle de gris(montant)
- Cela convertit la couleur de l'image d'entrée en une nuance de gris. Le "montant" appliqué détermine le niveau de conversion grise appliqué. Si la valeur est de 100 %, tout sera dans une nuance de gris. S'il est égal à 0 %, les couleurs resteront inchangées. Vous pouvez utiliser un nombre à virgule flottante ici si vous préférez cette valeur aux pourcentages. Par exemple, 0 équivaut à 0 %, tandis que 1,0 équivaut à 100%.
- sépia(quantité)
- Les couleurs sont ainsi transmises avec une teinte sépia, comme sur les photos anciennes. La quantité appliquée fonctionne de la même manière que pour le filtre "Nuances de gris" : 100% rend toutes les couleurs complètement sépia, tandis que des valeurs inférieures permettent d'appliquer l'effet en plus petites proportions.
- saturate(quantité)
- Cela applique un effet de saturation des couleurs aux couleurs, qui les rend plus vives. Cet effet sympa peut donner l'impression que les photos sont des affiches ou des dessins animés.Cet effet vous permet également d'utiliser une valeur supérieure à 100% pour accentuer réellement la saturation. C'est indéniablement un effet qui donnera une touche d'originalité à votre page !
- teinte-rotation(angle)
- Ceci est un effet geek qui peut être utilisé pour obtenir des résultats intéressants. Elle déplace les couleurs pour que l'image d'entrée soit complètement différente. Imaginons qu'un spectre de couleurs passe du rouge au violet autour d'une roue chromatique. Cet effet utilise comme entrée la couleur d'origine de la roue et la fait pivoter à l'aide du paramètre "angle" pour produire la couleur de la roue vers laquelle la rotation est effectuée comme valeur de la couleur de sortie. Ainsi, toutes les couleurs de l'image sont décalées selon le même "angle" sur la roue. Bien sûr, il s'agit d'une simplification de ce que cela fait, mais nous espérons qu'il est assez proche pour que cela ait du sens.
- invert(amount)
- Cet effet inverse les couleurs. Ainsi, si la "quantité" appliquée est de 100 %, la sortie obtenue ressemble à une photo négative prise à l'époque où les caméras étaient auparavant filmées. Comme précédemment, l'utilisation de valeurs inférieures à 100% applique progressivement l'effet d'inversion.
- opacité(quantité)
- Si vous souhaitez que le contenu filtré soit semi-transparent, utilisez cette option. La valeur "amount" définit le degré d'opacité de la sortie. Une valeur de 100% est donc complètement opaque. La sortie est donc exactement la même que l'entrée. Lorsque la valeur passe en dessous de 100 %, l'image de sortie devient moins opaque (plus transparente), et elle est de moins en moins visible. Cela signifie évidemment que si elle chevauche autre chose sur la page, le contenu en dessous commencera à devenir visible. Un "montant" de 0% signifie qu'il disparaîtra complètement. Notez toutefois que des événements tels que des clics de souris, etc., se produisent sur des objets totalement transparents. C'est donc pratique si vous souhaitez créer des zones cliquables sans afficher quoi que ce soit.
Son fonctionnement est le même que pour la propriété "Opacité" que vous connaissez déjà. En général, la propriété "opacité" du CSS n'est pas accélérée par le matériel, mais certains navigateurs qui implémentent des filtres à l'aide de l'accélération matérielle accélèrent la version de l'opacité du filtre, ce qui permet d'obtenir de bien meilleures performances.
- luminosité(montant)
- C'est la même chose que la commande de luminosité sur votre téléviseur. Elle ajuste les couleurs entre le noir complet et la couleur d'origine en fonction du paramètre "amount" (quantité). Si vous définissez cette valeur sur 0 %, vous ne verrez que du noir, mais lorsque la valeur augmente vers 100 %, l'image d'origine s'éclaire de plus en plus, jusqu'à atteindre 100 %, alors qu'elle correspond à l'image d'entrée. Bien sûr, vous pouvez continuer. Par exemple, une valeur de 200% rend l'image deux fois plus lumineuse que l'original. Parfait pour régler les prises de vue par faible luminosité !
- contraste(quantité)
- Plus de commandes depuis votre téléviseur ! Cela ajustera la différence entre les parties les plus sombres et les plus claires de l'image d'entrée. Si vous utilisez 0 %, vous obtenez du noir, tout comme la "luminosité", c'est-à-dire pas trop intéressant. Toutefois, si vous augmentez la valeur à 100 %, la différence d'obscurité change jusqu'à atteindre 100% et revenir à l'image d'origine. Vous pouvez également aller au-delà de 100% pour cet effet, ce qui augmente encore plus la différence entre les couleurs claires et sombres.
- floutage(rayon)
- Si vous souhaitez ajouter des bords doux à votre contenu, vous pouvez ajouter un floutage. Celui-ci ressemble à la vaseline classique sur une plaque de verre, qui était autrefois une technique populaire pour la réalisation de films. Il tache toutes les couleurs et étale leur effet, un peu comme lorsque vos yeux sont flous. Le paramètre "radius" influe sur le nombre de pixels à l'écran qui se fondent les uns dans les autres. Plus la valeur est élevée, plus le flou est élevé. Bien entendu, l'absence de modification laisse l'image telle quelle.
- drop-shadow(shadow)
- C'est très agréable de pouvoir donner l'impression que votre contenu se trouve à l'extérieur, sous le soleil, avec une ombre derrière le sol, et c'est bien sûr à cela que sert l'ombre portée. Elle prend un instantané de l'image, l'unie, la floute, puis décale légèrement le résultat de sorte qu'il ressemble à une ombre du contenu d'origine. Le paramètre "shadow" transmis est un peu plus compliqué qu'une simple valeur. Il s'agit d'une série de valeurs séparées par un espace, et certaines valeurs sont également facultatives ! Les valeurs "ombre" contrôlent l'emplacement de l'ombre, le niveau de flou appliqué, la couleur de l'ombre, etc. Pour en savoir plus sur la fonction des valeurs d'ombre, la spécification CSS3 Backgrounds définit "box-shadow" avec une grande précision. Les exemples ci-dessous devraient vous donner une bonne idée des différentes possibilités.
Il s'agit d'une autre opération de filtrage semblable à la fonctionnalité CSS existante disponible via la propriété "box-shadow". L'utilisation de l'approche de filtrage implique que le matériel peut être accéléré par certains navigateurs, comme nous l'avons décrit pour l'opération "Opacité" ci-dessus.
- URL faisant référence à des filtres SVG
- Les filtres sont issus du format SVG. Il est donc logique que vous puissiez appliquer un style à votre contenu à l'aide d'un filtre SVG. C'est facile avec la proposition actuelle de propriété "filtre". Tous les filtres SVG sont définis avec un attribut "id" qui peut être utilisé pour référencer l'effet du filtre. Ainsi, pour utiliser n'importe quel filtre CSS issu de CSS, il vous suffit de le référencer en utilisant la syntaxe "url".
Par exemple, le balisage SVG d'un filtre peut se présenter comme suit:
<filter id="foo">...</filter>
À partir du CSS, vous pouvez faire quelque chose d'aussi simple:
div { { % mixin filter: url(#foo); % } }
Et voilà ! Tous les <div> de votre document seront stylisés avec les définitions de filtre SVG.
- personnalisé (bientôt disponible)
- Les filtres personnalisés seront bientôt disponibles. Ils exploitent la puissance de votre GPU graphique pour utiliser un langage d'ombrage spécial afin d'obtenir des effets incroyables limités par votre propre imagination. Cette partie de la spécification du "filtre" est encore en cours de discussion et en cours d'évolution, mais dès qu'elle sera proposée sur un navigateur proche de chez vous, nous vous expliquerons ce qu'il est possible de faire.
Considérations sur les performances
L'une des choses dont tout développeur Web se soucie concerne les performances de sa page Web ou de son application. Les filtres CSS sont un outil puissant pour les effets visuels, mais ils peuvent, en même temps, avoir un impact sur les performances de votre site.
Il est important de comprendre leur fonctionnement et l'impact sur les performances, en particulier si vous souhaitez que votre site fonctionne correctement sur les appareils mobiles s'ils acceptent les filtres CSS.
Tout d'abord, tous les filtres ne se valent pas ! En fait, la plupart des filtres s'exécutent très rapidement sur n'importe quelle plate-forme et n'ont que très peu d'impact sur les performances. Toutefois, les filtres qui effectuent n'importe quel type de floutage ont tendance à être plus lents que les autres. Cela signifie bien sûr qu'ils sont flous et qu'ils font de l'ombre projetée. Cela ne signifie pas que vous ne devez pas les utiliser, mais comprendre leur fonctionnement peut vous aider.
Lorsque vous effectuez une opération blur, elle mélange les couleurs des pixels tout autour du pixel de sortie pour générer un résultat flouté. Ainsi, si votre paramètre radius est défini sur 2, le filtre doit regarder 2 pixels dans toutes les directions autour de chaque pixel de sortie pour générer la couleur mixte. Cela se produit pour chaque pixel de sortie, ce qui signifie de nombreux calculs qui s'agrandissent lorsque vous augmentez la valeur radius. Étant donné que blur regarde dans toutes les directions, doubler le "rayon" signifie que vous devez regarder quatre fois plus de pixels. En fait, il est en fait quatre fois plus lent pour chaque doublement de la radius. Le filtre drop-shadow a pour effet un blur. Il se comporte donc comme blur lorsque vous modifiez les parties radius et spread du paramètre shadow.
Tout n'est pas perdu avec blur, car sur certaines plates-formes, il est possible d'utiliser le GPU pour l'accélérer, mais cela ne sera pas nécessairement disponible dans tous les navigateurs. En cas de doute, la meilleure chose à faire est de tester le "rayon" qui donne l'effet souhaité, puis d'essayer de le réduire autant que possible tout en conservant un effet visuel acceptable. Ainsi, vos visiteurs seront plus satisfaits, surtout s'ils accèdent à votre site depuis un téléphone.
Si vous utilisez des filtres basés sur url qui font référence aux filtres SVG, ils peuvent contenir n'importe quel effet de filtre arbitraire. Sachez qu'ils peuvent eux aussi être lents. Par conséquent, assurez-vous de savoir ce que fait l'effet de filtre et faites des tests sur un appareil mobile pour vous assurer que les performances sont satisfaisantes.
Disponibilité dans les navigateurs récents
Un certain nombre d'effets filter CSS sont actuellement disponibles dans les navigateurs basés sur WebKit et dans Mozilla. Nous devrions les retrouver prochainement dans Opera ainsi que sur Internet Explorer 10. Les spécifications étant encore en cours de développement, certains fournisseurs de navigateurs ont implémenté ces éléments à l'aide de préfixes de fournisseurs. Par conséquent, dans WebKit, vous devez utiliser -webkit-filter, dans Mozilla, vous devrez utiliser -moz-filter et surveiller les autres implémentations de navigateur au fur et à mesure qu'elles apparaissent.
Tous les navigateurs ne sont pas compatibles avec l'ensemble des effets de filtre dans un premier temps. La distance parcourue peut donc varier. À l'heure actuelle, le navigateur Mozilla n'accepte que la fonction filter: url(), sans le préfixe du fournisseur, car cette implémentation est antérieure aux autres fonctions d'effet.
Nous avons résumé les effets des filtres CSS disponibles dans les différents navigateurs ci-dessous, ainsi que des indicateurs de performances approximatifs indiquant quand ils sont implémentés dans le logiciel. Notez qu'un certain nombre de navigateurs récents commencent à les implémenter sur le matériel (accélération GPU). Lorsqu'ils sont compatibles avec les GPU, les performances seront considérablement améliorées pour les effets plus lents. Comme d'habitude, les tests dans différents navigateurs sont le meilleur moyen d'évaluer les performances.
| Effet du filtre | Prise en charge des navigateurs | Performances |
|---|---|---|
| Niveaux de gris | Chrome | très rapide |
| sépia | Chrome | très rapide |
| saturer | Chrome | très rapide |
| teinte-rotation | Chrome | rapide |
| inverser | Chrome | très rapide |
| opacity | Chrome | peut être lente |
| luminosité | Chrome | rapide |
| contraste | Chrome | rapide |
| flouter | Chrome | lent à moins qu'il ne soit accéléré |
| drop-shadow | Chrome | peut être lente |
| URL() | Chrome, Mozilla | Variable, rapide à lente |
Autres ressources utiles
Une application géniale de peinture abstraite interactive avec filtres qui vous permet de tester et de partager vos œuvres. Consultez la page des filtres interactifs d'Eric Bidelman. Un tutoriel sur les filtres avec des exemples. Le brouillon officiel de la spécification W3C Filter Effects 1.0 http://dev.w3.org/fxtf/filters/ Exemple d'interface utilisateur créée à l'aide de filtres