L'effet de superposition floue d'iOS 7 à l'aide de CSS ?

Question

Il semble que la superposition d'Apple soit plus qu'une simple transparence. Avez-vous des idées sur la façon d'obtenir cet effet avec CSS et éventuellement JS ?

Answer 1

C'est possible avec CSS3 :

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

Exemple ici => jsfiddle

Answer 2

Vous m'avez donné envie d'essayer, alors je l'ai fait, regardez l'exemple ici :

http://codepen.io/Edo_B/pen/cLbrt

Utilisation :

1. Filtres CSS accélérés HW
2. JS pour l'attribution des classes et les événements liés aux touches fléchées
3. Images CSS Clip property

c'est tout.

Je pense également que cela pourrait être fait dynamiquement pour n'importe quel écran si l'on utilise le canevas pour copier le domaine actuel et le rendre flou.

Answer 3

[Edit] Dans le futur (mobile) Safari 9 il y aura -webkit-backdrop-filter pour exactement cela. Voir ce que j'ai fait pour le mettre en valeur.

J'y ai pensé pendant les 4 dernières semaines et j'ai trouvé cette solution.

Démonstration en direct

[Edit] J'ai écrit un billet plus approfondi sur CSS-Tricks

Cette technique utilise Régions CSS donc le support du navigateur n'est pas le meilleur pour le moment. ( http://caniuse.com/#feat=css-regions )

L'élément clé de cette technique consiste à séparer le contenu de la mise en page en utilisant le CSS Region. Définissez d'abord une .content élément avec flow-into:content et ensuite utiliser la structure appropriée pour brouiller l'en-tête.

La structure de la mise en page :

<div class="phone">
 <div class="phone__display">
  <div class="header">
    <div class="header__text">Header</div>
    <div class="header__background"></div>
  </div>
  <div class="phone__content">
  </div>
 </div>
</div>

Les deux parties importantes de cette disposition sont .header__background et .phone__content - Ce sont les conteneurs dans lesquels le contenu doit circuler.

Pour utiliser les régions CSS, il suffit de flow-from:content ( .content s'écoule dans la région nommée content )

Maintenant vient la partie délicate. Nous voulons que le contenu passe toujours par le .header__background car c'est la section où le contenu sera blidé. (en utilisant webkit-filter:blur(10px); )

Pour ce faire, il faut transfrom:translateY(-$HeightOfTheHeader) le site .content afin de s'assurer que le contenu passe toujours par le canal .header__background . Cette transformation tout en cachant toujours une partie du contenu sous l'en-tête. Pour résoudre ce problème, il suffit d'ajouter

.header__background:before{
  display:inline-block;
  content:'';
  height:$HeightOfTheHEader
}

pour tenir compte de la transformation.

Cela fonctionne actuellement dans :

• Chrome 29+ (activer 'experimental-webkit-features'/'enable-experimental-web-platform-features')
• Safari 6.1 Seed 6
• iOS7 ( lent et sans défilement )

Answer 4

C'est en quelque sorte possible avec FireFox maintenant grâce à la fonction élément attribut de style.

Cet attribut expérimental vous permet d'utiliser n'importe quel contenu HTML comme image de fond. Ainsi, pour créer l'arrière-plan, vous avez besoin de trois superpositions :

1. Une simple superposition avec un arrière-plan solide (pour cacher le contenu réel de la superposition).
2. Recouvrement avec un -moz-element qui définit le contenu. Notez que FX ne prend pas en charge l'option filter: blur() Nous devons donc utiliser un SVG.
3. Superposition avec un contenu non flou.

Donc, mis ensemble :

Filtre de flou SVG (fonctionne avec FX, d'autres navigateurs pourraient l'utiliser) filter:blur() ) :

<svg>
  <defs>
    <filter id="svgBlur">
      <feGaussianBlur stdDeviation="10"/>
    </filter>
  </defs>
</svg>

Style de flou CSS :

.behind-blur 
{
    filter         : url(#svgBlur); 
    opacity: .4;
    background: -moz-element(#content);
    background-repeat: no-repeat;
}

Enfin 3 couches :

<div class="header" style="background-color: #fff">&nbsp;</div>
<div class="header behind-blur">&nbsp;</div>
<div class="header">
    Header Text, content blurs behind
</div>

Pour le déplacer, il suffit de définir le paramètre background-position (exemple en jQuery mais vous pouvez utiliser n'importe quoi) :

$('.behind-blur').css({
    'background-position': '-' + left + 'px -' + top + 'px'
}); 

Le voici comme un JS Fiddle, FX seulement.

Answer 5

Consultez cette page de démonstration.
Cette démo utilise html2canvas pour rendre le document comme une image.

http://blurpopup.labs.daum.net/

1. Lorsque le lien "Show popup" est cliqué, la fonction "makePopup" est appelée.
2. Exécution de 'makePopup html2canvas pour rendre le document sous forme d'image.
3. L'image est convertie en chaîne data-url et elle est peinte comme image d'arrière-plan de la fenêtre contextuelle.
4. L'image de la fenêtre est brouillée par les éléments suivants -webkit-filter:blur
5. Ajoutez le popup dans le document.
6. Pendant que vous faites glisser la fenêtre contextuelle, elle change sa propre position d'arrière-plan.