Check out this Amazing Frosted Glass Quote using css. Designed by Joni Trythall.
HTML
[code language=”html”]
<main>
<blockquote>"The more often we see the things around us - even the beautiful and wonderful things - the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers, the trees, the birds, the clouds - even those we love. Because we see things so often, we see them less and less."
<footer>—
<cite>
Joseph B. Wirthlin
</cite>
</footer>
</blockquote>
</main>
[/code]
CSS / SCSS
[code language=”css”]
body,
main::before {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0 / cover fixed;
}
main {
margin: 100px auto;
position: relative;
padding: 10px 5px;
background: hsla(0,0%,100%,.3);
font-size: 20px;
font-family: ‘Lora’, serif;
line-height: 1.5;
border-radius: 10px;
width: 60%;
box-shadow: 5px 3px 30px black;
overflow: hidden;
}
main::before {
content: ”;
margin: -35px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(20px);
z-index: -1;
}
blockquote {
font-style: italic;
}
footer {
padding-top: 20px;
font-weight: bold;
}
cite {
font-style: normal;
font-size: 22px;
}
@import url(https://fonts.googleapis.com/css?family=Lora);
[/code]
