Share
Dans ce tutoriel, nous examinerons un jouet CSS émergent appelé "Backdrop Filter"..
La proposition de filtre de fond est fortement influencée par le langage de conception d’Apple, en particulier celui fond transparent-flou vu dans leurs plus récentes interfaces iOS et macOS. Vous l'aurez remarqué dans le Dock, le menu contextuel et le centre de notifications.
Le filtre de fond est actuellement cuit sous les filtres CSS de niveau 2 et, au moment de la rédaction, il ne fonctionne que dans Safari 9 avec le -webkit- préfixe, Chrome et Opera en activant les «fonctionnalités de la plateforme Web expérimentale» sous le chrome: // drapeaux menu.
Le filtre de fond est inclus dans la spécification des filtres CSS et donc, de la même manière que le filtre propriété, elle hérite de toutes les fonctions de filtrage habituelles telles niveaux de gris (), brouiller(), et sépia(). La seule différence ici est que cela affectera les éléments situés sous l'élément sélectionné..
Pour l'utiliser, nous aurons besoin d'au moins deux éléments. le premier élément sera la cible, tandis que le second se situera en dessous. Par exemple:
Définissez un arrière-plan dans le premier élément avec une opacité faible pour pouvoir ajouter filtre de fond avec une fonction, par exemple, niveaux de gris () tourner la toile de fond en noir et blanc.
.filter -webkit-backdrop-filter: flou (10 pixels); / * Safari 9+ * / Filtre de fond: flou (10 pixels); / * Chrome et Opera * / background-color: rgba (255, 255, 255, 0.3);
Notez dans la démo suivante que les descendants des .filtre éléments (un bouton dans ce cas) restent nettes malgré la brouiller() addition de fonction. C'est un avantage filtre de fond a sur le filtre propriété; où tous les descendants sont touchés.
Remarque: image ici extraite du tutoriel Comment créer un petit chaperon rouge inspiré d'une illustration de conte de fées dans l'outil de peinture SAI.
La combinaison de deux fonctions de filtre dans une seule déclaration est également acceptable. Par exemple, en gardant notre brouiller(), mais en ajoutant le niveaux de gris () fonction pour décaper le fond de couleur.
.filtre -webkit-backdrop-filter: niveaux de gris () flou (10 pixels); / * Safari 9+ * / Filtre de fond: niveaux de gris () flou (10 pixels); / * Chrome et Opera * / background-color: rgba (255, 255, 255, 0.3);
Les autres fonctions que vous pouvez ajouter au mixage incluent:
Accentsconagua
luminosité(): acceptant un nombre compris entre 0 et l'infini, ou un pourcentage. N'importe quel nombre ci-dessous 1, par exemple. 0.8, va assombrir l'élément, et spécifier un nombre quelconque ci-dessus 1 va alléger l'élément.contraste(): accepte un nombre et un pourcentage qui fonctionne comme le luminosité() fonction, sauf que cette fonction définit le contraste de l'élément.inverser(): cette fonction génère les couleurs opposées ou négatives du fond. De même, la fonction accepte également un nombre et un pourcentage comme valeur.Si vous ne trouvez pas l'effet souhaité à partir de ces fonctions par défaut, vous pouvez toujours ajouter un filtre plus avancé via SVG. Créez un filtre SVG avec un ID unique et enregistrez-le dans un fichier. .svg fichier:
Référez le filtre avec le url () fonction, comme si.
.filter -webkit-backdrop-filter: url (… /images/filter.svg#morph); / * Safari 9 * / backdrop-filter: url (… /images/filter.svg#morph); / * Chrome et Opera * /
Malheureusement, l'ajout d'un filtre avec le url () la fonction ne semble pas fonctionner dans aucun navigateur au moment présent. Mais une fois correctement implémentée, l'image devrait ressembler à ceci.
Filtre personnalisé avec SVG. Il existe un certain nombre d'implémentations pratiques sur le Web où nous pourrions appliquer des filtres d'arrière-plan d'une manière plus significative que la simple garniture. Un bon exemple est Médium, qui assombrit la couverture d’image post ainsi que les images contenues dans le contenu de la publication avant que l’image ne soit entièrement chargée..
Image floue dans Medium.comFacebook est un autre excellent exemple du monde réel, qui rend floues les images avec un contenu mature, inapproprié ou gênant, avant que les utilisateurs n'aient consenti à la visualisation complète de l'image..
Facebook brouillant une image violente conformément à la directive de la communauté Facebook.Au fil des années, CSS s'est enrichi de nouvelles spécifications permettant aux concepteurs de créer des interfaces plus convaincantes sur le Web. Les transformations, les transitions et les animations ont tous joué leur rôle et maintenant, les filtres de fond viennent également à notre rencontre.
Bien qu'il soit peut-être trop tôt pour utiliser le filtre de fond en production, ces démos montrent que nous pourrons bientôt appliquer des effets de filtrage aux éléments de manière plus simplifiée et moins dépendante de bibliothèques JavaScript ou Canvas. En attendant, suivez le blog Webkit pour les mises à jour de ce projet et d’autres projets..
