Unscharfe Box wie auf der Blizzard Website

Question

Bereits vor einiger Zeit sah ich, dass der Hintergrund der Navigation auf Blizzards Website (www.blizzard.com) irgendwie "verschwommen" ist. Nicht im Sinne des normalen Blur Filters in CSS, da der Rahmen dieser Box selbst nicht unscharf ist. In meinem aktuellen Projekt möchte ich diesen Effekt implementieren, aber da ich den Quellcode von Blizzard gar nicht verstehe, würde ich mich sehr freuen, wenn jemand erklären könnte, wie das alles funktioniert.

oh und btw .. Ich möchte die zwei transparenten Boxen in dieser Geige verschwimmen:

html, body { 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    
 
} 
 
body { 
 
    background-image: url("https://s-i.huffpost.com/gen/1914112/images/o-PARIS-facebook.jpg"); 
 
} 
 
#costumNavigationBar { 
 
\t position: fixed; 
 
\t z-index: 300; 
 
\t width: 100%; 
 
    
 
} 
 
#costumTopPanel { 
 
\t width: 100%; 
 
\t padding: 10px 0px; 
 
\t background-color: #0c0c0c; 
 
\t z-index: 200;a 
 
} 
 
#costumTopPanelContent { 
 
\t display: flex; 
 
\t justify-content: space-between; 
 
} 
 
#costumTopPanelContentLeft { 
 
\t color: #FFF; 
 
} 
 
#costumTopPanelContentRight { 
 
\t color: #FFF; 
 
} 
 

 

 
#costumMainMenu { 
 
    background-color: rgba(12,12,12,0.5); 
 
\t padding: 25px 0px; 
 
\t width: 100%; 
 
\t background-size: cover; 
 
\t overflow: hidden; 
 
} 
 
#costumMainMenuContent { 
 
\t display: flex; 
 
\t justify-content: space-between; 
 
} 
 
.pageHeaderLogoLarge { 
 
\t position: absolute; 
 
\t left: 40.3%; 
 
\t top: 29%; 
 
} 
 
#costumLogoBackground { 
 
\t background: url('http://atlas.irs-media.de/images/atlasgamingbilder/headerBG.svg') no-repeat; \t 
 
\t height: 120px; 
 
\t width: 530px; 
 
\t margin: 0 auto; 
 
} 
 

 
#pageHeaderPanel { 
 
\t position: relative; \t 
 
} 
 

 
#costumMainMenuContentLeft { 
 
\t color: #FFF; \t 
 
} 
 
#costumMainMenuContentRight { 
 
\t color: #FFF; \t 
 
}

<div id="costumNavigationBar"> \t 
 
\t <div id="costumTopPanel"> 
 
\t \t <div class="layoutBoundary"> 
 
\t \t \t <div id="costumTopPanelContent"> 
 
\t \t \t \t <div id="costumTopPanelContentLeft"> 
 
\t \t \t \t \t Icons 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="costumTopPanelContentRight"> 
 
\t \t \t \t \t Login 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div id="costumMainMenu"> 
 
\t \t <div class="layoutBoundary"> 
 
\t \t \t <div id="costumMainMenuContent"> 
 
\t \t \t \t <div id="costumMainMenuContentLeft"> 
 
\t \t \t \t \t Menu Left 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="costumMainMenuContentMid"> 
 
\t \t \t \t \t Logo 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="costumMainMenuContentRight"> 
 
\t \t \t \t \t Menu Right 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div id="costumLogoBackground"></div> 
 
</div>

Answer 1

Da Sie speziell sind zu fragen, wie Blizzard dies vollbringt, ist die Antwort da ist kein CSS, das an der Unschärfe beteiligt ist. Stattdessen haben sie eine Unschärfe direkt in die obersten 60 Pixel jeder Bilddatei im Desktop-Karussell gebracht.

Hier ist eine der Folien, so können Sie sehen:
https://bnetcmsus-a.akamaihd.net/cms/gallery/pt/PTRQ0098SJYL1509731760219.jpg

Mit gesagt, dass, hier ist eine Möglichkeit, Sie ein verschwommenes Feld mit einer festen Grenze erreichen könnten die ::before or ::after pseudo-element verwenden, die Unschärfe filter Eigenschaft und background-attachment: fixed.

body { 
 
    background-image: url("https://s-i.huffpost.com/gen/1914112/images/o-PARIS-facebook.jpg"); 
 
    background-attachment: fixed; 
 
    margin: 0; 
 
} 
 

 
.blur-box { 
 
    border: 1px solid rgba(255, 255, 255, .2); 
 
    margin: 1em; 
 
    height: 50vw; 
 
    width: 50vw; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.blur-box::before { 
 
    background-image: url("https://s-i.huffpost.com/gen/1914112/images/o-PARIS-facebook.jpg"); 
 
    background-attachment: fixed; 
 
    content: ''; 
 
    position: absolute; 
 
    left: -10%; 
 
    top: -10%; 
 
    width: 120%; 
 
    height: 120%; 
 
    -webkit-filter: blur(.5em); 
 
    filter: blur(.5em); 
 
}

<div class="blur-box"></div>