Comment recréer l'effet de superposition floue d'iOS 7 avec CSS ?

Recréation de l'effet de superposition floue d'iOS 7 avec CSS

iOS 7 a introduit un effet de superposition floue distinct qui ajoute de la profondeur et un intérêt visuel à certains éléments. Cet effet est obtenu en combinant la transparence avec un filtre de flou. Bien qu'initialement exclusif à la plateforme Apple, il peut désormais être répliqué à l'aide de CSS et, éventuellement, de JavaScript.

L'effet : plus que de la transparence

L'effet de flou iOS va au-delà de la simple transparence, car il crée un flou subtil qui adoucit le contenu sous-jacent. Cet effet est particulièrement visible dans les superpositions de volume et de luminosité présentées dans le centre de contrôle iOS.

Solution CSS

Heureusement, le CSS moderne prend en charge la propriété filter, qui comprend un Fonction blur() pour obtenir l'effet souhaité. Le code suivant montre comment créer l'effet de flou à l'aide de CSS :

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

Ce code applique un filtre de flou de 20 pixels à l'élément spécifié et réduit son opacité à 40 %. Le filtre de flou est spécifique au navigateur, donc plusieurs préfixes de fournisseurs sont utilisés pour garantir la compatibilité entre navigateurs.

Exemple en direct

Pour voir l'effet en action, consultez cette démo JSFiddle : [JSFiddle Démo](https://jsfiddle.net/e5m5efrw/embedded/)

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!