Hybrid-Menü-Hintergrund-Effekt

-1

Ich versuche, dieses Menü Hintergrundeffekt in Ionic zu erstellen, aber ich habe keine Ahnung, was Sie verwenden, um das neu zu erstellen.Hybrid-Menü-Hintergrund-Effekt

Link

Zuerst habe ich Opazität, aber das macht mich nicht die richtige Wirkung. Ich fügte auch Unschärfe hinzu, aber kein Glück.

.menu-overlay { 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    background: rgb(43,49,81); 
    -webkit-filter: blur(5px); 
    opacity: .8; 
}

Edit: nicht über die Animation sprechen.

Quelle

2016-05-05 Greg

Mögliche Duplikat [? Wie man ein Milchglas-Effekt mit CSS erstellen] (http://stackoverflow.com/questions/17089927/how -zu-erstellen-ein-Milchglas-Effekt-mit-css) – cybermonkey

Siehe das vorgeschlagene Duplikat, ich denke, dass Effekt ist, was Sie wollen. – cybermonkey

Probieren Sie meinen CSS-Filter Spielplatz hier: http://brainlessdeveloper.com/definitive-guide-css-filter-wizardry/#section1 Sie können Ihr eigenes Bild hinzufügen und den Unschärfe-Effekt in Kombination mit anderen Filtern ausprobieren. –

-1

Mit den obigen Lösungen habe ich einen Weichzeichnungsfilter zum gesamten Inhalt hinzugefügt, auf dem mein Menü schwebt.

Kurz:

<div id="menu"></div> 
<div id="content"> 
    <!-- content goes here --> 
</div>

CSS

#menu{ 
opacity:0.9; 
} 
#content{ 
    filter: blur(4px); -webkit-filter: blur(4px); 
}

Quelle

2016-05-05 12:03:23 Greg

Hybrid-Menü-Hintergrund-Effekt

Antwort

Verwandte Themen