Catégories
Astuces et Design

Utilisation du filtre CSS de luminosité () pour mettre en évidence le contenu de manière générique

Il semble donc que je doive accorder une meilleure attention aux normes CSS car je viens de réaliser que vous pouvez assez facilement utiliser les filtres CSS pour appliquer des effets utiles aux comportements de contrôle génériques. Bien sûr, je me souviens filter simplement des vieux jours maléfiques d'IE6 pour gérer des choses comme les ombres et l'opacité, mais il semble que les propriétés du filtre aient migré dans le courant dominant CSS avec deux opérations de filtrage maintenant largement utilisées et acceptées qui ont un certain nombre de filtres utiles disponibles.

Les deux propriétés du filtre sont:

Plusieurs fonctions de filtrage sont disponibles:

  • brouiller()
  • luminosité()
  • contraste()
  • ombre portée ()
  • niveaux de gris ()
  • rotation de la teinte ()
  • inverser()
  • opacité()
  • saturer()
  • sépia()

Certains d'entre eux sont très utiles en tant qu'outils génériques – en particulier brightness() et grayscale().

Filtre et luminosité

J'ai récemment couru découvert le brightness() filter, dont je ne savais pas qu'il existait, mais qui est très, très utile pour un certain nombre d'opérations génériques.

C'est tellement utile car cela vous permet de génériquement changer la couleur d'un élément, sans avoir à spécifier une valeur de couleur spécifique. Au lieu de cela, vous pouvez faire varier la luminosité (ou peut-être aussi la teinte ou la saturation si vous voulez avoir plus de fantaisie) et affecter fondamentalement le comportement de l'élément. Cela le rend très utile pour des choses génériques comme un contrôle «bouton» ou un autre élément surlignable.

Remarque: brightness() affecte à la fois l'élément premier plan et arrière-plan lors de l'utilisation filter.

Luminosité () Filtre pour la mise en évidence générique

Je ne peux pas vous dire combien de fois au cours des années j'ai implémenté un «bouton» personnalisé comme l'implémentation CSS. Au fil des ans, j'ai utilisé des images, des arrière-plans, des dégradés et de l'opacité pour «mettre en évidence» efficacement un contrôle. Tout cela fonctionne bien sûr, mais le problème avec la plupart de ces approches est que, d'une manière ou d'une autre, vous codez en dur une valeur de couleur, une image ou un dégradé. Ce qui signifie que chaque type de bouton a besoin de sa propre configuration de surbrillance et si vous effectuez une sorte de thématisation, les boutons doivent être remplacés pour que chaque thème fonctionne généralement.

le brightness() filter offre une alternative potentiellement plus simple en augmenter la luminosité des couleurs de l'une ou des deux couleurs de premier plan et d'arrière-plan. Car brightness() fonctionne sur les valeurs de couleur de base existantes, en utilisant un style de modificateur comme :hover, vous n'avez pas à fournir explicitement une nouvelle couleur, mais plutôt simplement à fournir une valeur de réglage de la luminosité générique.

Cela signifie que vous pouvez appliquer le comportement du bouton à n'importe quel contenu, indépendamment de quelle couleur c'est qui est génial.

Par exemple, voici ce que j'utilise pour transformer les icônes FontAwesome en un comportement de type bouton:



Voici à quoi cela ressemble:


échantillon sur CodePen

Quelle que soit la couleur appliquée à l'icône – la mise en évidence fonctionne juste!

Si vous avez prêté attention aux normes CSS, ce n'est probablement pas une nouvelle pour vous, mais je ne savais pas que c'était quelque chose que vous pourriez faire. En fait, je ne savais pas qu'il y avait autant de filtres utiles disponibles, y compris des filtres pour flouter, des niveaux de gris et quelques autres choses utiles pour des choses comme la désactivation des boutons.

Filtres d'arrière-plan avec filtre de fond

Une autre chose très utile et encore nouvelle pour moi est la possibilité d'appliquer un backdrop-filter. Un filtre de fond vous permet d'appliquer un filtre au contenu que les éléments concernés se trouve au-dessus de dans la mise en page de composition HTML.

En effet, avec un petit effort supplémentaire, vous pouvez appliquer plusieurs de ces filtres uniquement à l'arrière-plan, ce qui était auparavant très difficile à faire à moins d'utiliser le positionnement absolu et le z-index!

Cela facilite beaucoup la mise en évidence du contenu qui se trouve au-dessus des images d'arrière-plan, par exemple.



Icon

qui produit ceci:


échantillon sur CodePen

Ce qui fait que ce travail est le backdrop-filter qui vous permet d'appliquer un filtre à tout ce qui se trouve derrière l'élément filtré. Il était notoirement difficile de faire autrement, car sans le backdrop-filter l'application d'un filtre ou d'une opacité à un élément d'arrière-plan s'appliquerait également à tout contenu enfant contenu dans un élément parent.

Notez que l'utilisation backdrop-filter est différent du réglage filter sur l'élément de fond, car filter aussi s'applique à tous les éléments contenus.

Si vous faites cela, ce qui semble très similaire:

.image-background-text {     
   ...
   filter: blur(10px);
}
.text-overlay {
    /*backdrop-filter: blur(2px);*/
    ...

Vous obtenez ce résultat insatisfaisant:


échantillon sur CodePen

En utilisant backdrop-filter sur les éléments de niveau supérieur au lieu de blur sur l'élément du bas, cela fonctionne réellement car il applique le filtre à n'importe quel contenu derrière l'élément supérieur.

Ce n'est toujours pas vraiment facile de faire ce type de mise en page, car vous devez toujours vous assurer que le contenu du haut recouvre complètement le conteneur du bas afin d'assurer un remplissage complet. Mais c'est encore beaucoup plus facile que d'avoir à jouer explicitement avec une disposition de positionnement relatif et absolu au milieu de votre document.

Mises en garde concernant les filtres Backdrop

Pour être clair: le backdrop-filter ne s'applique pas aux propriétés d'arrière-plan de l'élément concerné telles que background, background-image, dégradés et ainsi de suite. Il est plutôt appliqué à tout contenu qui se trouve derrière l'élément courant. Seule la zone «  couverte '' par l'élément avec le backdrop-filter obtient le filtre appliqué.

Aussi utile que je pense que backdrop-filter c'est que la mauvaise nouvelle est qu'il faut un navigateur très récent pour fonctionner. Il nécessite Chromium 76 ou version ultérieure (actuel 84).

Dans la version Evergreen actuelle, publiez la version FireFox (79) dont vous avez besoin pour:

  • aller à about:config
  • ensemble layout.css.backdrop-filter.enabled à true
  • ensemble gfx.webrender.all à true

ce qui est malheureux. Impossible de trouver quoi que ce soit sur les plans pour intégrer cela sans indicateurs dans Firefox. Le statut officiel de backdrop-filter est Brouillon de l'éditeur.

À partir d'aujourd'hui, voici le tableau de compatibilité pour backdrop-filter (pas pour filter qui fonctionne dans tous les navigateurs):

cliquez pour aller à la page de compatibilité mise à jour

Il fonctionne dans les navigateurs Chromium actuels. FireFox nécessite des indicateurs de configuration spéciaux pour le moment, et il semble qu'iOS nécessite toujours -webkit-backdrop-filter (apparemment plus nécessaire dans IOS 13). Cette fonctionnalité est donc assez nouvelle et en fait simplement des navigateurs à feuilles persistantes.

Résumé

Les filtres existent depuis longtemps, mais ils ont une mauvaise réputation, principalement à cause des bizarreries qui découlent de l'utilisation d'origine avec Internet Explorer. Mais les filtres font désormais partie intégrante de la norme CSS. Ils sont étonnamment utiles, en particulier pour le style générique des éléments pour les comportements de survol dynamiques que j'ai utilisés filter pour beaucoup ces derniers temps pour réduire un tas de règles de style codées en dur redondantes.

backdrop-filter est encore un peu trop avant-gardiste en termes de prise en charge du navigateur pour être largement utilisé, à moins que vous ne cibliez explicitement les navigateurs qui le prennent en charge aujourd'hui. Mais comme il s'agit principalement de fonctionnalités esthétiques, vous pouvez probablement vous en sortir sans appliquer les filtres dans les navigateurs non pris en charge pour une expérience légèrement moins visuelle. Néanmoins, backdrop-filter est utile pour certains effets sympas qui sont autrement difficiles à obtenir via un contenu en couches et il semble qu'il sera bientôt disponible pour tous les navigateurs Everygreen.

Ressources

Autres articles susceptibles de vous plaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *