.box
.backdrop
.box-content
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quis, id, eligendi molestias et, autem quibusdam earum repudiandae consequuntur provident quam eum perferendis vel vitae possimus? Aut necessitatibus dolore nemo!
svg(xmlns='http://www.w3.org/2000/svg', version='1.1').sr-only
defs
filter#blur
fegaussianblur(stddeviation='2')
View Compiled
$bgi-url: 'https://wi1d5ky.github.io/DailyUI/pages/Andy19910102%20-%20SignUp/271_rocky_ocean_coast.jpg';
$blur-size: 10px;
%bg {
width: 100vw;
height: 100vh;
z-index: -1;
background: url(#{$bgi-url}) 50% / cover no-repeat;
}
/// reset
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
height: 100%;
box-sizing: border-box;
}
body {
position: relative;
min-height: 100vh;
margin: 0;
padding-top: 10vh;
&::before {
@extend %bg;
content: '';
position: fixed;
top: 0;
left: 0;
}
}
.box {
position: relative;
width: 70%;
height: 80vh;
margin: 0 auto;
overflow: hidden;
border-radius: .5em;
color: #fff;
background-color: rgba(#000,.2);
box-shadow: 0 .5em 2.5em -.5em rgba(0,0,0,.75);
}
.box-content {
position: absolute;
top: 0;left: 0;right: 0;bottom: 0;
overflow: auto;
padding: 1em;
font-size: 1.5em;
}
.backdrop {
@extend %bg;
position: absolute;
top: -10vh;
left: 50%;
transform: translateX(-50%);
filter: url('#blur');
@supports (backdrop-filter: blur(1px)) {
backdrop-filter: blur(#{$blur-size});
filter: none;
}
@supports (-webkit-filter: blur(1px)) and ( not (backdrop-filter: blur(1px) )) {
filter: blur(#{$blur-size});
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.