Glass Cover / Milchglas / background-blur / backdrop-filter

<!-- Source -> http://codepen.io/adobe/pen/d056d1b26b9683c018f9bb9e0f1b0e1c --> <header class='glass'> <div>hallo</div> </header> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="5"/> </filter> </defs> </svg> <style> /* LAYOUT */ html, body { width: 100%; height: 100%; overflow: hidden; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28727/pelican.jpg'); background-size: cover; } .glass { width: 100%; overflow: hidden; position: relative; background-color: red; transform: translateY(0) translateY(-0); } .glass > div { padding: 30px; } .glass::before { width: 100%; height: 100%; overflow: hidden; z-index: -1; display: block; position: absolute; content: ' '; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28727/pelican.jpg'); -webkit-filter: url('#blur'); filter: url('#blur'); -webkit-filter: blur(5px); filter: blur(5px); background-size: cover; opacity: 0.4; transform: translateY(0) translateY(0); } </style>
Safari only...

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.