{"id":3349,"date":"2020-08-22T03:18:50","date_gmt":"2020-08-22T03:18:50","guid":{"rendered":"http:\/\/csshint.com\/?p=3349"},"modified":"2020-08-22T03:19:10","modified_gmt":"2020-08-22T03:19:10","slug":"frosted-glass-quote","status":"publish","type":"post","link":"https:\/\/csshint.com\/frosted-glass-quote\/","title":{"rendered":"Frosted Glass Quote"},"content":{"rendered":"

Check out this Amazing Frosted Glass Quote using css<\/strong>. Designed by Joni Trythall.<\/p>\n

HTML<\/p>\n

[code language=”html”]
\n<main>
\n <blockquote>"The more often we see the things around us &#45; even the beautiful and wonderful things &#45; 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 &#45; even those we love. Because we see things so often, we see them less and less."
\n <footer>&mdash;
\n <cite>
\n Joseph B. Wirthlin
\n <\/cite>
\n <\/footer>
\n <\/blockquote>
\n<\/main>
\n[\/code]<\/p>\n\n

CSS \/ SCSS<\/p>\n

[code language=”css”]
\nbody,
\nmain::before {
\n background: url(https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/80625\/tree.jpg) 0 \/ cover fixed;
\n}<\/p>\n

main {
\n margin: 100px auto;
\n position: relative;
\n padding: 10px 5px;
\n background: hsla(0,0%,100%,.3);
\n font-size: 20px;
\n font-family: ‘Lora’, serif;
\n line-height: 1.5;
\n border-radius: 10px;
\n width: 60%;
\n box-shadow: 5px 3px 30px black;
\n overflow: hidden;
\n}<\/p>\n

main::before {
\n content: ”;
\n margin: -35px;
\n position: absolute;
\n top: 0;
\n right: 0;
\n bottom: 0;
\n left: 0;
\n filter: blur(20px);
\n z-index: -1;
\n}<\/p>\n

blockquote {
\n font-style: italic;
\n}<\/p>\n

footer {
\n padding-top: 20px;
\n font-weight: bold;
\n}<\/p>\n

cite {
\n font-style: normal;
\n font-size: 22px;
\n}<\/p>\n

@import url(https:\/\/fonts.googleapis.com\/css?family=Lora);
\n[\/code]<\/p>\n

Frosted Glass Quote<\/h2>\n