web-dev-qa-db-fra.com

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

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

More than just transparency

javascriptcssuser-interfaceblur
160
Lumpy

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

146
Cana

Vous m'avez donné envie d'essayer, alors j'ai regardé l'exemple suivant:

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

En utilisant:

  1. Filtres CSS accélérés
  2. JS pour les événements d'affectation de classe et de flèche
  3. Images CSS Clip property

c'est ça.

Je pense aussi que cela pourrait être fait de manière dynamique pour n’importe quel écran si vous utilisiez canvas pour copier le dom actuel et le rendre flou.

47
Edo Ben Shitrit

[Modifier] Dans le futur (mobile) Safari 9, il y aura -webkit-backdrop-filter exactement pour cela. Voir ceci stylo j'ai fait pour le présenter.

J'y pensais depuis 4 semaines et je proposais cette solution.

Démo en direct

[Modifier] J'ai écrit un article plus détaillé sur CSS-Tricks

Cette technique utilise CSS Regions , le support du navigateur n’est donc pas optimal pour le moment. ( http://caniuse.com/#feat=css-regions )

L’essentiel de cette technique consiste à séparer le contenu de la présentation en utilisant CSS Region. Définissez d’abord un élément .content avec flow-into:content, puis utilisez la structure appropriée pour brouiller l’en-tête.

La structure de 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 mise en page sont .header__background et .phone__content - il s’agit des conteneurs dans lesquels le contenu doit circuler.

Utiliser les régions CSS est simple car flow-from:content (.content coule dans la région nommée content)

Maintenant vient la partie la plus délicate. Nous voulons toujours faire passer le contenu à travers le .header__background parce que c'est la section où le contenu sera estompé. (en utilisant webkit-filter:blur(10px);)

Ceci est effectué par transfrom:translateY(-$HeightOfTheHeader) le .content pour s'assurer que le contenu sera toujours transmis par le .header__background. Cette transformation permet de toujours masquer du contenu sous l'en-tête. Résoudre ceci est une facilité d’ajout

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

pour accueillir la transformation.

Cela fonctionne actuellement dans:

  • Chrome 29+ (activez les 'fonctionnalités expérimentales du kit Web'/'activez les fonctionnalités de la plateforme Web expérimentale')
  • Safari 6.1 Seed 6
  • iOS7 ( lent et pas de défilement )
38
FWeinb

C'est en quelque sorte possible avec FireFox maintenant grâce à l'attribut style element .

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

  1. Superposition simple avec un arrière-plan solide (pour masquer le contenu réel de la superposition).
  2. Superposez avec un arrière-plan -moz-element qui définit le contenu. Notez que FX ne supporte pas l'attribut filter: blur(), nous avons donc besoin d'un SVG.
  3. Superposition de contenu non flou.

Alors, mettez ensemble:

Filtre de flou SVG (fonctionne dans FX, d’autres navigateurs pourraient 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>

Ensuite, pour déplacer ceci, définissez simplement le background-position (exemple dans jQuery mais vous pouvez utiliser n'importe quoi):

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

Le voici en JS Fiddle, FX uniquement.

15
Keith

Consultez cette page de démonstration.
Cette démonstration utilise html2canvas pour rendre le document sous forme d'image.

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

  1. Lorsque vous cliquez sur le lien "Afficher le menu contextuel", la fonction "makePopup" est appelée.
  2. 'makePopup' exécute html2canvas pour rendre le document sous forme d'image.
  3. L'image est convertie en chaîne data-url et est peinte comme image d'arrière-plan de la fenêtre.
  4. Le bg de Popup est flou avec - webkit-filter: blur
  5. Ajoutez la fenêtre contextuelle au document.
  6. Lorsque vous faites glisser la fenêtre contextuelle, celle-ci change de position.
14
Gyutae Jo

Ce stylo que j'ai trouvé l'autre jour semblait bien le faire, juste un peu de css et 21 lignes de javascript. Je n'avais pas entendu parler de la commande cloneNode js avant de l'avoir trouvée, mais cela fonctionnait parfaitement pour ce dont j'avais besoin, c'est certain.

http://codepen.io/rikschennink/pen/zvcgx

Détail: A. Essentiellement, il examine votre div de contenu et y invoque un cloneNode afin de créer un duplicata qu’il place ensuite dans l’objet débordement: en-tête masqué situé en haut de la page. B. Ensuite, il écoute simplement le défilement de sorte que les deux images semblent correspondre et brouille l'image d'en-tête ... annnnd BAM. Effet atteint.

Ce n’est vraiment pas complètement faisable en CSS tant qu’ils n’ont pas la possibilité de créer un script intégré dans le langage.

10
Lux.Capacitor
  • cloner l'élément à brouiller
  • ajoutez-le à l'élément que vous voulez être sur le dessus (la fenêtre dépolie)
  • élément flou cloné avec le filtre Webkit
  • assurez-vous que l'élément cloné est positionné absolu
  • lors du défilement du parent de l'élément d'origine, intercepte scrollTop et scrollLeft
  • à l'aide de requestAnimationFrame, définissez à présent dynamiquement webkit-transform sur translate3d avec les valeurs x et y sur scrollTop et scrollLeft

Exemple est ici:

  • assurez-vous d'ouvrir dans webkit-browser
  • faire défiler l'écran du téléphone (mieux avec Apple souris ...)
  • voir le pied de page flou en action

http://versie1.com/TEST/ios7/

5
user2523905

fait une démo rapide hier qui fait vraiment ce que vous parlez. http://bit.ly/10clOM9 Cette démo effectue la parallaxe en fonction de l'accéléromètre, de sorte qu'elle fonctionne mieux sur un iPhone lui-même. Fondamentalement, je copie simplement le contenu que nous superposons dans un élément à position fixe qui devient flou.

remarque: balayez vers le haut pour voir le panneau.

(J'ai utilisé d'horribles identifiants css, mais vous avez l'idée)

#frost{
 position: fixed; 
 bottom: 0; 
 left:0; 
 width: 100%; 
 height: 100px; 
 overflow: hidden;
 -webkit-transition: all .5s;
}
#background2{
 -webkit-filter: blur(15px) brightness(.2);
}

#content2fixed{
 position: fixed;
 bottom: 9px;
 left: 9px;
 -webkit-filter: blur(10px);
}
4
ericjbasti

Vérifiez celui-ci http://codepen.io/GianlucaGuarini/pen/Hzrhf Il semble que cela produise l'effet sans duplication de l'image d'arrière-plan de l'élément sous lui-même. Voir les textes sont également flous dans l'exemple.

Vague.js

var vague = $blurred.find('iframe').Vague({
  intensity:5 //blur intensity
});
vague.blur();
3
Onur Çelik

Je ne suis pas très sûr de cela, je pense que CSS n'est pas capable de le faire pour le moment.

Cependant, Chris Coyier a publié sur son blog une ancienne technique utilisant plusieurs images pour obtenir un tel effet, http://css-tricks.com/blurry-background-effect/

3
Zyad Sherif

J'utilise des filtres svg pour obtenir des effets similaires sur les sprites

<svg id="gray_calendar" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 48 48 48">
  <filter id="greyscale">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
  <image width="48" height="10224" xlink:href="tango48i.png" filter="url(#greyscale)"/>
</svg>
  • L'attribut viewBox sélectionnera uniquement la partie de l'image incluse que vous souhaitez.
  • Modifiez simplement le filtre comme vous le souhaitez, tel que l'exemple <feGaussianBlur stdDeviation="10"/> de Keith.
  • Utilisez la balise <image ...> pour l'appliquer à une image ou même pour utiliser plusieurs images.
  • Vous pouvez construire cela avec js et l'utiliser comme une image ou utiliser l'identifiant dans votre css.
0
technosaurus

Cela pourrait vous aider!

Ceci change dynamiquement l'arrière-plan juste IOS fait

.myBox {
  width: 750px;
  height: 500px;
  border: rgba(0, 0, 0, 0.5) 1px solid;
  background-color: #ffffff;
}

.blurBg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.blurBg img {
  -webkit-filter: blur(50px);
  margin-top: -150px;
  margin-left: -150px;
  width: 150%;
  opacity: 0.6;
}
0
Godwin Vinny Carole