Ce tutoriel explore la propriété CSS backdrop-filter , offrant des techniques pratiques pour améliorer les interfaces utilisateur modernes. Apprenez à superposer des filtres en toile de fond sur plusieurs éléments et à les combiner avec d'autres effets visuels CSS pour créer des conceptions sophistiquées.

Voici quelques exemples de ce que vous pouvez réaliser en utilisant les techniques décrites. D'autres exemples seront présentés tout au long de l'article.

L'effet en verre brué et bruté est actuellement très populaire - peut-être en raison de récents articles approfondis sur le sujet - nous allons donc l'utiliser comme base pour nos exemples. Cependant, les principes discutés s'appliquent à tout filtre pertinent. Nous explorerons également quelques autres types de filtres.

Comprendre les filtres en toile de fond

Si vous connaissez les fonctions de filtre CSS comme blur() et brightness() , les fonctions backdrop-filter seront intuitives. Ils utilisent les mêmes fonctions. Une liste complète des fonctions de filtre prise en charge est disponible sur CSS-Tricks et MDN.

La principale différence entre filter et backdrop-filter réside dans ce qu'ils affectent. backdrop-filter modifie la toile de fond de l'élément, nécessitant un arrière-plan transparent ou semi-transparent pour que l'effet soit visible. Ceci est crucial pour:

1. Réaliser l'esthétique souhaitée.
2. Superposer des filtres sur plusieurs éléments.
3. Combinant des filtres avec d'autres effets CSS.

Améliorer la toile de fond

Bien que la conception soit subjective, certains conseils sont utiles. Si un simple filtre flou sur un fond simple semble insatisfaisant, envisagez d'ajouter des améliorations telles que des ombres, ou, plus souvent, enrichir la toile de fond elle-même.

Les décors simples peuvent être améliorés à l'aide de filtres tels que brightness() , contrast() et invert() , qui manipulent la luminosité et la teinte pour créer des résultats visuellement attrayants. Les décors texturés se marient souvent bien avec des filtres déformés comme blur() et opacity() .

<main><div>
  <h1>La météo d'aujourd'hui</h1>
    Nuageux avec une chance de boulettes de viande. Ramenstormes à 15 heures dure dix minutes.
  </div>
</main>

principal {
  Contexte: URL central / couverture ("image.jpg");
  Box-Shadow: 0 0 10px RGBA (154, 201, 255, 0,6);
  /* etc. */

  div {
    Filtre de toile de fond: Blur (10px);
    Couleur: blanc;
    /* etc. */
  }
}

Superposant les éléments avec des filtres en toile de fond

Comme mentionné, backdrop-filter a besoin d'un arrière-plan transparent ou semi-transparent pour montrer la toile de fond derrière.

Lors de la superposition de plusieurs éléments avec backdrop-filter , rendez tous sauf l'élément Bottommost semi-transparent (pas entièrement transparent). L'élément inférieur peut être transparent ou semi-transparent, à condition qu'il ait une toile de fond. Sinon, l'accumulation de filtre ne sera pas visible.

<main><div>
  <h1>La météo d'aujourd'hui</h1>
    Nuageux avec une chance de boulettes de viande. Ramenstormes à 15 heures dure dix minutes.
  <p>Afficher les détails</p>
</div>
</main>

principal {
  Contexte: URL central / couverture ("image.jpg");
  Box-Shadow: 0 0 10px RGBA (154, 201, 255, 0,6);
  /* etc. */

  div {
    Contexte: RGBA (255, 255, 255, 0,1);
    Filtre de toile de fond: Blur (10px);
    /* etc. */

    p {
      Filtre de toile de fond: luminosité (0) Contraste (10);
      /* etc. */
    }
  }
}

Combinant des filtres en toile de fond avec d'autres effets CSS

Les éléments avec des effets de filtre (à partir filter et background-filter ) créent une "racine de toile de fond" (mais pas encore un terme standardisé). backdrop-filter fonctionne bien avec d'autres effets qui utilisent également une racine de toile de fond, car ils ont tous un impact sur la même toile de fond.

Deux effets particulièrement intéressants sont mask et mix-blend-mode . backdrop-filter avec mask a produit les résultats les plus cohérents entre les principaux navigateurs de nos tests. La combinaison avec mix-blend-mode peut parfois masquer l'effet flou, de sorte que nous ne l'utiliserons pas dans nos exemples, mais l'expérimentation est encouragée.

Filtre de toile de fond avec masque

Contrairement backdrop-filter , mask affecte à la fois l'arrière-plan et le premier plan d'un élément. Cela peut être exploité pour obtenir des effets spécifiques.

<main><div>
    <div class="bg"></div>
    <h1>La météo d'aujourd'hui</h1>
      Nuageux avec une chance de boulettes de viande. Ramenstormes à 15 heures dure dix minutes.
    </div>
</main>

principal {
  Contexte: URL central / couverture ("image.jpg");
  Box-Shadow: 0 0 10px RGBA (154, 201, 255, 0,6);
  /* etc. */

  > div {
    .bg {
      Filtre de toile de fond: Blur (10px);
      Masque-IMAGE: Répéditation-gradient (90 degrés, transparent, transparent 2px, blanc 2px, blanc 10px);
      /* etc. */
    }
    /* etc. */
  }
}

Filtre de toile de fond pour le premier plan

La propriété filter applique des effets au premier plan d'un élément, ce qui rend backdrop-filter inutile dans ces cas. Cependant, si vous devez appliquer un filtre à un élément de premier plan tout en excluant certains éléments intérieurs, backdrop-filter est une solution.

<main><div class="photo">
    <div class="filter"></div>
  </div>
</main>

.photo {
  Contexte: URL centrale / couverture ("photo.jpg");

  .filter {
    Filtre de toile de fond: luminosité floue (10px) (110%);
    Masque-image: gradient radial (blanc 5px, transparent 6px);
    Masque-taille: 10px 10px;
    Transition: Filtre de fond .3s linéaire;
    /* etc.*/
  }

  &: Hover .filter {
    Filtre de toile de fond: Aucun;
    Masque-Image: Aucun;
  }
}

Survolez la photo floue dans l'exemple ci-dessus pour voir l'effet.

Il existe de nombreuses fa?ons créatives d'utiliser backdrop-filter CSS. N'oubliez pas d'utiliser des éléments semi-transparents pour superposer des filtres et d'expérimenter avec les combinaison avec d'autres propriétés affectant la toile de fond du CSS. Les conceptions d'interface utilisateur initiales présentées précédemment devraient inspirer vos propres créations.

Dès la lecture

• Filtre de toile de fond (CSS-Tricks)
• Filtre de toile de fond (MDN)
• Racine de toile de fond (module d'effets du filtre CSS niveau 2)
• Fonctions du filtre (MDN)

(Remarque: remplacez les espaces réservés aux liens entre crochets par des liens réels vers les ressources pertinentes.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!