Der unscharfe Overlay-Effekt von iOS 7 mit CSS?

161

Es scheint, dass Apples Overlay mehr als nur eine Transparenz ist. Irgendwelche Ideen, wie dieser Effekt mit CSS und möglicherweise JS erzielt werden kann?

Mehr als nur Transparenz

Klumpig
quelle
2
Meiner Meinung nach ist es dringlicher, ein Element einzurichten, das jedem dahinter liegenden Objekt eine dynamische Unschärfe verleiht. Wenn Sie also ein Objekt hätten, das schwenken und zoomen könnte, würde das Element oben bei einem Treffer mit geringer Leistung dynamisch verschwimmen.
Rhodos
1
Siehe auch diese Frage für ein ähnliches Problem.
Keith
43
Ich finde es vielleicht am besorgniserregendsten, dass dies als "IOS7-Funktion" gewünscht wird, während die Windows Vista Aero-Oberfläche seit 2006 genau das Gleiche mit ihren Fenster-Chromes tut.
Niels Keurentjes
1
@NielsKeurentjes Heh, ein wahrer Punkt. Ich habe den Effekt vor einigen Jahren in ein Design integriert, nachdem ich mich von Windows inspirieren ließ. Damals habe ich mich jedoch für den entschieden einfacheren Weg entschieden, nur den Effekt in die Bilder zu backen. ryanwilliams.co.uk/previews/made2race/1.html
Ryan Williams

Antworten:

145

Mit CSS3 ist Folgendes möglich:

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

Beispiel hier => jsfiddle

Kana
quelle
119
Dies erzielt nicht den Effekt wie in iOS7, bei dem ein Element Teile des Hintergrunds verwischt.
Entwurf durch Adrian
9
Ich habe meine jsfiddle bearbeitet, jetzt macht es den Trick wie IOS7;) => CSS3 IOS7-Effekt
Cana
34
Wie Adrian bemerkte, verwischt der Filter nur ein Element und seine Kinder. Es kann nicht für eine Überlagerung verwendet werden, um übergeordnete Elemente oder benachbarte Elemente zu verwischen, sodass der iOS 7-Effekt mit CSS nicht möglich ist.
Jason
10
Wenn Sie denken, dass es nur Unschärfe gibt, um diesen Effekt zu erzielen, liegen Sie falsch. Ich arbeite an einem einfachen Open-Source-Repository, das diesen Effekt sowohl mit JS als auch mit CSS 3 erzielt. Bleiben Sie dran :)
Ryan Brodie
5
Dies funktioniert nicht in FX - sie unterstützen nicht -moz-filter: blur(). Stattdessen müssen Sie einen SVG-Filter verwenden. Weitere Informationen finden Sie in meiner Antwort.
Keith
48

Du hast mich dazu gebracht, es zu versuchen, also habe ich mir das Beispiel hier angesehen:

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

Verwenden von:

  1. HW Accelerated CSS-Filter
  2. JS für Klassenzuweisung und Pfeiltastenereignisse
  3. CSS-Clip-Eigenschaft für Bilder

das ist es.

Ich glaube auch, dass dies für jeden Bildschirm dynamisch durchgeführt werden kann, wenn Leinwand verwendet wird, um den aktuellen Dom zu kopieren und ihn zu verwischen.

Edo Ben Shitrit
quelle
40

[Bearbeiten] In Zukunft wird es -webkit-backdrop-filterfür (mobile) Safari 9 genau das geben. Sehen Sie diesen Stift, den ich gemacht habe, um ihn zu präsentieren.

Ich habe in den letzten 4 Wochen darüber nachgedacht und mir diese Lösung ausgedacht.

Live-Demo

[Bearbeiten] Ich habe einen ausführlicheren Beitrag über CSS-Tricks geschrieben

Bei dieser Technik werden CSS-Regionen verwendet, sodass die Browserunterstützung derzeit nicht die beste ist. ( http://caniuse.com/#feat=css-regions )

Der Hauptteil dieser Technik besteht darin, Inhalte mithilfe der CSS-Region vom Layout zu trennen. Definieren Sie zuerst ein .contentElement mit flow-into:contentund verwenden Sie dann die entsprechende Struktur, um die Kopfzeile zu verwischen.

Die Layoutstruktur:

<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>

Die beiden wichtigen Teile dieses Layouts sind .header__backgroundund .phone__content- dies sind die Container, in denen der Inhalt fließen soll.

Mit CSS-Regionen ist es einfach wie flow-from:content( .contentfließt in die benannte Region content)

Jetzt kommt der schwierige Teil. Wir möchten den Inhalt immer durch das fließen lassen, .header__backgroundda dies der Abschnitt ist, in dem der Inhalt verwischt wird. (mit webkit-filter:blur(10px);)

Dies geschieht durch transfrom:translateY(-$HeightOfTheHeader)die, .contentum sicherzustellen, dass der Inhalt immer durch die fließt .header__background. Diese Transformation verbirgt dabei immer Inhalte unter der Kopfzeile. Dies zu beheben ist einfach hinzuzufügen

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

für die Transformation unterzubringen.

Dies funktioniert derzeit in:

  • Chrome 29+ (aktiviere 'experimentelle Webkit-Funktionen' / 'experimentelle Web-Plattform-Funktionen aktivieren')
  • Safari 6.1 Seed 6
  • iOS7 ( langsam und kein Scrollen )
FWeinb
quelle
1
Live-Demo funktioniert nicht mehr. Der Inhalt geht unter das Telefon, und ich erhalte den JS-Fehler "TypeError: sheet.addRule ist keine Funktion"
BoffinBrain
Funktioniert gut mit Safari auf Mac und iOS.
Carlos Silva
16

Dies ist jetzt mit FireFox dank des Attributs element style möglich.

Mit diesem experimentellen Attribut können Sie jeden HTML-Inhalt als Hintergrundbild verwenden. Um den Hintergrund zu erstellen, benötigen Sie drei Überlagerungen:

  1. Einfache Überlagerung mit festem Hintergrund (um den tatsächlichen Überlagerungsinhalt auszublenden).
  2. Überlagern Sie mit einem -moz-elementHintergrund, der den Inhalt festlegt. Beachten Sie, dass FX das filter: blur()Attribut nicht unterstützt , daher benötigen wir eine SVG.
  3. Überlagerung mit nicht unscharfem Inhalt.

Also zusammen:

SVG-Unschärfefilter (funktioniert in FX, andere Browser könnten ihn verwenden filter:blur()):

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

CSS-Unschärfestil:

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

Endlich 3 Schichten:

<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>

Um dies zu verschieben, legen Sie einfach Folgendes fest background-position(Beispiel in jQuery, aber Sie können alles verwenden):

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

Hier ist es als JS Fiddle, nur FX.

Keith
quelle
1
Ihre Lösung ähnelt der, die ich mir vorgestellt habe. Ich habe den Fehler ( jsfiddle.net/RgBzH/30 ) behoben, indem ich den unscharfen Teil des Hintergrunds erweitert habe, sodass die Unschärfe tatsächlich bei echtem Inhalt auftritt , nicht bei dem in Scheiben geschnittenen. Jedenfalls gute Ausführung.
Pier Paolo Ramon
@PierPaoloRamon nette Optimierung - wenn ich dies verwenden wollte, würde ich den SVG-Filter wahrscheinlich ein wenig erweitern, um die erhöhte Helligkeit / den reduzierten Kontrast einzubeziehen, die auch iOS7 bietet, aber FX bedeutet an dieser Stelle nur ausschließlich Sandbox. Ich habe eine andere Frage zu Problemumgehungen gestellt.
Keith
Übrigens, Ihre Lösung bringt nur ios7-ähnliche Unschärfe in Firefox OS, und das ist ordentlich (das muss ich testen).
Pier Paolo Ramon
14

Schauen Sie sich diese Demoseite an.
Diese Demo verwendet html2canvas zum Rendern von Dokumenten als Bild.

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

  1. Wenn Sie auf den Link "Popup anzeigen" klicken, wird die Funktion "makePopup" aufgerufen.
  2. 'makePopup' führt html2canvas aus, um ein Dokument als Bild zu rendern.
  3. Das Bild wird in eine Daten-URL-Zeichenfolge konvertiert und als Hintergrundbild des Popups gezeichnet.
  4. Popups Hintergrund wird durch den Webkit-Filter verwischt: Unschärfe
  5. Fügen Sie das Popup in das Dokument ein.
  6. Während Sie das Popup ziehen, ändert es seine eigene Hintergrundposition.
Gyutae Jo
quelle
1
Bitte erläutern Sie, was die Demo tatsächlich tut, da sie nach dem Ausfall keine Hilfe mehr darstellt.
Jonathan Drapeau
Das ist eine wirklich schöne Idee - leider ist html2canvas viel zu experimentell, um sich darauf zu verlassen, und wahrscheinlich einfach zu groß, es sei denn, es geht um Screenshots in Ihrer Anwendung.
Keith
5
Es ist unten @ JonathanDrapeau, wie Sie vorhergesagt haben.
Mark
Umwerben! Ich liebe Link Rot!
evolutionxbox
Verwendet immer noch Unschärfe über Bildern, ich sehe nicht, wie dies auf so etwas wie einer klebrigen Navigationsleiste funktionieren könnte.
Maninak
10

Dieser Stift, den ich neulich gefunden habe, schien es wunderbar zu machen, nur ein bisschen CSS und 21 Zeilen Javascript. Ich hatte erst von dem Befehl cloneNode js gehört, als ich ihn gefunden hatte, aber er funktionierte genau für das, was ich sicher brauchte.

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

Detail: A. Grundsätzlich wird Ihr Inhalts-Div betrachtet und ein cloneNode darauf aufgerufen, sodass ein Duplikat erstellt wird, das dann im Überlauf platziert wird: verstecktes Header-Objekt, das oben auf der Seite sitzt. B. Dann hört es einfach auf das Scrollen, so dass beide Bilder übereinstimmen und das Header-Bild verwischen ... annnnd BAM. Wirkung erzielt.

In CSS nicht wirklich vollständig machbar, bis sie ein bisschen Skriptfähigkeit in die Sprache eingebaut haben.

Lux.Kondensator
quelle
Sieht großartig aus! Obwohl dies bei dynamischen Inhalten offensichtlich nicht gut funktioniert, es sei denn, Sie aktualisieren das Duplikat jedes Mal, wenn sich etwas ändert - was wahrscheinlich ein großer Leistungseinbruch wäre.
Nass
Ich nehme an, aber nicht wirklich sicher, wo Sie die Bilder austauschen und versuchen würden, diesen Effekt zu erzielen? Wenn es richtig gemacht wird, sollte es kein großer Erfolg sein, wenn Sie den Klon recyceln. Vielleicht können Sie einen Fall im Detail dazu detailliert beschreiben? Angenommen, Sie erstellen einen Bild-Feed und möchten, dass einige Menüoptionen diesen Effekt für ein Bildmenü für jedes Element erzielen. Führen Sie dies aus, während Sie das Bedienfeld und das Bedienfeld anzeigen, das dann wie das gewünschte Poster aussieht. Fügen Sie einen kleinen Recycler hinzu, damit dom nicht jedes Mal, wenn Sie Menüs öffnen, Bilder endlos dupliziert und eine gute Leistung erzielt.
Lux.Capacitor
5
  • Klonen Sie das Element, das Sie verwischen möchten
  • Hängen Sie es an das Element an, das Sie oben haben möchten (das mattierte Fenster).
  • Klonelement mit Webkit-Filter verwischen
  • Stellen Sie sicher, dass das geklonte Element absolut positioniert ist
  • Wenn Sie durch das übergeordnete Element des Originalelements scrollen, fangen Sie scrollTop und scrollLeft
  • Setzen Sie nun mit requestAnimationFrame die Webkit-Transformation dynamisch auf translate3d mit x- und y-Werten auf scrollTop und scrollLeft

Beispiel ist hier:

  • Stellen Sie sicher, dass Sie im Webkit-Browser öffnen
  • Scrollen Sie in der Telefonansicht (am besten mit Apfelmaus ...)
  • Sehen Sie die verwischende Fußzeile in Aktion

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

user2523905
quelle
4

habe gestern eine kurze Demo gemacht, die genau das macht, worüber du sprichst. http://bit.ly/10clOM9 Diese Demo führt die Parallaxe basierend auf dem Beschleunigungsmesser aus, sodass sie am besten auf einem iPhone selbst funktioniert. Ich kopiere den Inhalt, den wir überlagern, einfach in ein Element mit fester Position, das unscharf wird.

Hinweis: Wischen Sie nach oben, um das Bedienfeld anzuzeigen.

(Ich habe schreckliche CSS-IDs verwendet, aber Sie haben die Idee)

#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);
}
ericjbasti
quelle
3

Ich bin mir da nicht ganz sicher, ich glaube, dass CSS dies im Moment nicht kann

Chris Coyier hat jedoch über eine alte Technik mit mehreren Bildern gebloggt, um einen solchen Effekt zu erzielen: http://css-tricks.com/blurry-background-effect/

Zyad Sherif
quelle
Schnappschuss des Bildschirms auf Leinwand funktioniert möglicherweise und "sperrt" die Symbole und den Hintergrund zusammen, bevor ich dies tue, aber ich konnte nicht sehen, ob der Hintergrund noch den Parallaxeeffekt unter den Symbolen hatte, als er unscharf war ... wenn nicht In dem Moment, in dem Sie das Bedienfeld bewegen (transparente Überlagerung), erstellt das Gerät ein Bild des Bildschirms und führt diesen Trick über dem Bildschirm aus. Wohlgemerkt, sie sind dabei nicht nur auf webbasierte Dinge wie Canvas beschränkt, da sie sich auf der Betriebssystemebene befinden und möglicherweise nicht auf Webkit-Inhalte beschränkt sind.
neugierig
3

Schauen Sie sich dieses an http://codepen.io/GianlucaGuarini/pen/Hzrhf Scheint, als würde es den Effekt erzielen, ohne das Hintergrundbild des Elements unter sich zu duplizieren. Siehe Texte verschwimmen auch im Beispiel.

Vague.js

var vague = $blurred.find('iframe').Vague({
  intensity:5 //blur intensity
});
vague.blur();
Onur Çelik
quelle
1
Es dupliziert den Inhalt (es gibt zwei Iframes im codepen Beispiel Sie verbunden sind ). Klicken Sie auf einen Menüpunkt. Der unscharfe Iframe wird nicht aktualisiert.
Guglie
Es ist sowieso eine Art Lösung.
Onur Çelik
2

Gute Nachrichten

Ab dem heutigen 11. April 2020 ist dies mit der backdrop-filterCSS-Eigenschaft, die jetzt eine stabile Funktion in Chrome, Safari & Edge ist, problemlos möglich .

Ich wollte dies in unserer Hybrid-App für Mobilgeräte, die auch in Android / Chrome Webview und Safari WebView verfügbar ist.

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
  2. https://caniuse.com/#search=backdrop-filter

Codebeispiel:

Fügen Sie einfach die CSS-Eigenschaft hinzu:

.my-class {
    backdrop-filter: blur(30px);
    background: transparent;     // Make sure there is not backgorund
}

UI-Beispiel 1

Sehen Sie, wie es in diesem Stift funktioniert, oder probieren Sie die Demo aus:

#main-wrapper {
  width: 300px;
  height: 300px;
  background: url("https://i.picsum.photos/id/1001/500/500.jpg") no-repeat center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.my-effect {
  position: absolute;
  top: 300px;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  transition: top 700ms;
}

#main-wrapper:hover .my-effect {
  top: 0;
}
<h4>Hover over the image to see the effect</h4>

<div id="main-wrapper">
  <div class="my-effect">
    Glossy effect worked!
  </div>
</div>

UI-Beispiel 2

Nehmen wir ein Beispiel für die McDonald's-App, weil sie ziemlich farbenfroh ist. Ich habe den Screenshot gemacht und als Hintergrund in bodymeine App eingefügt .

Ich wollte einen Text darüber mit dem Glanzeffekt zeigen. Mit backdrop-filter: blur(20px);dem Overlay darüber konnte ich Folgendes sehen: 😍

Haupt-Screenshot Geben Sie hier die Bildbeschreibung ein

Shashank Agrawal
quelle
backdrop-filterfunktioniert in Firefox jedoch nicht automatisch. Ich bezweifle, dass Benutzer die Optionen zum backdrop-filterabsichtlichen Aktivieren aktivieren , um diesen Effekt zu sehen.
Richard
0

Ich habe SVG-Filter verwendet, um ähnliche Effekte für Sprites zu erzielen

<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>
  • Das viewBox-Attribut wählt nur den Teil Ihres eingeschlossenen Bildes aus, den Sie möchten.
  • Ändern Sie einfach den Filter in einen beliebigen Filter, wie <feGaussianBlur stdDeviation="10"/>z. B. das Beispiel von Keith .
  • Verwenden Sie das <image ...>Tag, um es auf ein Bild anzuwenden, oder verwenden Sie sogar mehrere Bilder.
  • Sie können dies mit js aufbauen und als Image verwenden oder die ID in Ihrem CSS verwenden.
Technosaurus
quelle
Haben Sie irgendwo ein funktionierendes Beispiel dafür? Vielleicht eine jsFiddle oder ähnliches? Danke
Blaker
0

Das könnte dir helfen !!

Dies ändert dynamisch den Hintergrund, den nur IOS hat

.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;
}
Godwin Vinny Carole
quelle
-1

Hier ist meine Einstellung dazu mit jQuery. Die Lösung ist nicht universell, was bedeutet, dass man einige der Positionen und Dinge abhängig vom tatsächlichen Design anpassen müsste.

Grundsätzlich habe ich Folgendes getan: Beim Auslösen klonen / entfernen Sie den gesamten Hintergrund (was unscharf sein sollte) in einen Container mit unscharfem Inhalt (der optional einen versteckten Überlauf aufweist, wenn er nicht die volle Breite hat) und positionieren Sie ihn korrekt. Vorsichtsmaßnahme ist, dass bei der Größenänderung von Fenstern unscharfe Divs in Bezug auf die Position nicht mit dem Original übereinstimmen, dies könnte jedoch mit einigen Funktionen zur Größenänderung von Fenstern behoben werden (ehrlich gesagt könnte mich das jetzt nicht stören).

Ich würde mich sehr über Ihre Meinung zu dieser Lösung freuen!

Vielen Dank

Hier ist die Geige , nicht im IE getestet.

HTML

<div class="slide-up">
<div class="slide-wrapper">
    <div class="slide-background"></div>
    <div class="blured"></div>
    <div class="slide-content">
         <h2>Pop up title</h2>

        <p>Pretty neat!</p>
    </div>
</div>
</div>
<div class="wrapper">
<div class="content">
     <h1>Some title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie magna elit, quis pulvinar lectus gravida sit amet. Phasellus lacinia massa et metus blandit fermentum. Cras euismod gravida scelerisque. Fusce molestie ligula diam, non porta ipsum faucibus sed. Nam interdum dui at fringilla laoreet. Donec sit amet est eu eros suscipit commodo eget vitae velit.</p>
</div> <a class="trigger" href="#">trigger slide</a>

</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
    <feGaussianBlur stdDeviation="3" />
</filter>
</svg>

CSS

body {
margin: 0;
padding: 0;
font-family:'Verdana', sans-serif;
color: #fff;
}
.wrapper {
position: relative;
height: 100%;
overflow: hidden;
z-index: 100;
background: #CD535B;
}
img {
width: 100%;
height: auto;
}
.blured {
top: 0;
height: 0;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: url(#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
position: absolute;
z-index: 1000;
}
.blured .wrapper {
position: absolute;
width: inherit;
}
.content {
width: 300px;
margin: 0 auto;
}
.slide-up {
top:10px;
position: absolute;
width: 100%;
z-index: 2000;
display: none;
height: auto;
overflow: hidden;
}
.slide-wrapper {
width: 200px;
margin: 0 auto;
position: relative;
border: 1px solid #fff;
overflow: hidden;
}
.slide-content {
z-index: 2222;
position: relative;
text-align: center;
color: #333333;
}
.slide-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 1500;
opacity: 0.5;
}

jQuery

// first just grab some pixels we will use to correctly position the blured element
var height = $('.slide-up').outerHeight();
var slide_top = parseInt($('.slide-up').css('top'), 10);
$wrapper_width = $('body > .wrapper').css("width");
$('.blured').css("width", $wrapper_width);

$('.trigger').click(function () {
    if ($(this).hasClass('triggered')) { // sliding up
        $('.blured').animate({
            height: '0px',
            background: background
        }, 1000, function () {
            $('.blured .wrapper').remove();
        });
        $('.slide-up').slideUp(700);
        $(this).removeClass('triggered');
    } else { // sliding down
        $('.wrapper').clone().appendTo('.blured');
        $('.slide-up').slideDown(1000);
        $offset = $('.slide-wrapper').offset();
        $('.blured').animate({
            height: $offset.top + height + slide_top + 'px'
        }, 700);
        $('.blured .wrapper').animate({
            left: -$offset.left,
            top: -$offset.top
        }, 100);
        $(this).addClass('triggered');
    }
});
Bojana Šekeljić
quelle