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

Effet de superposition floue d'iOS 7 recréé avec CSS

L'effet de superposition d'Apple dans iOS 7 n'est pas simplement une question de transparence, mais implique une subtile flou qui ajoute de la profondeur et de l'intérêt. Cet article explore comment reproduire cet effet à l'aide de CSS, révélant les secrets de la superposition floue.

Filtre de flou CSS

La clé pour obtenir cet effet flou réside dans le Filtre CSS Blur(), disponible dans les navigateurs modernes tels que Chrome, Firefox, Safari et IE10. La syntaxe d'utilisation du filtre flou() est simple :

<code class="css">filter: blur(value);</code>

où la valeur représente le rayon de flou souhaité en pixels. Pour un flou subtil similaire à la superposition d'Apple, une valeur d'environ 20 pixels est recommandée.

Exemple de mise en œuvre

Pour appliquer l'effet de flou à un élément de votre page, ajoutez simplement la règle CSS suivante :

<code class="css">#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}</code>

Notez que vous devrez peut-être inclure les préfixes du fournisseur pour assurer la compatibilité avec les anciens navigateurs. N'oubliez pas non plus de préciser une valeur d'opacité pour vous assurer que la superposition floue n'obscurcit pas complètement le contenu sous-jacent.

Exemple en JavaScript

Si vous préférez appliquez l'effet de flou de manière dynamique à l'aide de JavaScript, vous pouvez utiliser le code suivant :

<code class="javascript">var element = document.getElementById('myDiv');
element.style.filter = 'blur(20px)';
element.style.opacity = 0.4;</code>

En utilisant le filtre flou() et en le combinant éventuellement avec JavaScript, vous pouvez facilement recréer l'effet de superposition flou utilisé dans iOS 7. , améliorant l'esthétique visuelle de vos applications Web.

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!