毛玻璃

毛玻璃效果在现在页面上使用越来越频繁,同时它增强了页面的可观赏性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<main>
<blockquote>
“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”
<footer>
<cite>
Oscar Wilde,
The Picture of Dorian Gray
</cite>
</footer>
</blockquote>
</main>
</body>
</html>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
body {
min-height: 100vh;
box-sizing: border-box;
margin: 0;
padding-top: calc(50vh - 6em);
font: 150%/1.6 Baskerville, Palatino, serif;
}


body,main::before{
background: url("img/cat.jpg") 0 / cover fixed;
}

main{
position: relative;
margin: 0 auto;
padding: 1em;
max-width: 23em;
background: hsla(0,0%,100%,.25) border-box;
overflow: hidden;
border-radius: .3em;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
0 .5em 1em rgba(0, 0, 0, 0.6)
;

text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
}


main::before{
content:'';
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
-webkit-filter: blur(20px);
z-index :-1;
margin: -30px;
}

最后效果如图:

嗯嗯,,还不错,,具体的实现细节可以访问如下:

http://www.w3cplus.com/css3/css-secrets/frosted-glass-effect.html

文章目录