欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

CSS3打造磨砂玻璃配景结果

发布时间:2016-11-24  编辑:杨雨个人博客网站   点击:   

简介

这个结果是在看CSS Secrets这书上看到的,感受很不错;

实现道理也挺简朴的;

结果图及实现

结果图

CSS3打造磨砂玻璃布景功效

代码实现

CSS Code
  1. <!DOCTYPE Html>   
  2. <Html lang="en">   
  3.     <head>   
  4.         <meta charset="UTF-8">   
  5.         <title>Document</title>   
  6.         <style>   
  7.                     /**  
  8.                      * 配置配景图全屏包围及牢靠  
  9.                      * 配置内部元素偏移  
  10.                      */  
  11.                     body {   
  12.                         /*此处配景图自行替代*/  
  13.                         background: url(demo.jpg) no-repeat center center fixed;   
  14.                         background-size: cover;   
  15.                          min-height: 100vh;   
  16.                         box-sizing: border-box;   
  17.                         margin: 0;   
  18.                         padding-top: calc(50vh - 6em);   
  19.                         font: 150%/1.6 Baskerville, Palatino, serif;   
  20.                     }   
  21.   
  22.                     /**  
  23.                      * 整体居中成果;  
  24.                      * 配景透明虚化  
  25.                      * 溢出潜匿  
  26.                      * 边沿圆角化  
  27.                      * 笔墨增进淡阴影  
  28.                      */  
  29.                     .description{   
  30.                         position: relative;   
  31.                         margin: 0 auto;   
  32.                         padding: 1em;   
  33.                         max-width: 23em;   
  34.                         background: hsla(0,0%,100%,.25) border-box;   
  35.                         overflow: hidden;   
  36.                         border-radius: .3em;   
  37.                         box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,   
  38.                                     0 .5em 1em rgba(0, 0, 0, 0.6);   
  39.                         text-shadow: 0 1px 1px hsla(0,0%,100%,.3);   
  40.                     }   
  41.   
  42.                     /*行使滤镜恍惚边沿*/  
  43.                     .description::before{   
  44.                         content: '';   
  45.                         position: absolute;   
  46.                         top: 0; rightright: 0; bottombottom: 0; left: 0;   
  47.                         margin: -30px;   
  48.                         z-index: -1;   
  49.                         -webkit-filter: blur(20px);   
  50.                         filter: blur(20px);   
  51.                     }   
  52.         </style>   
  53.     </head>   
  54.     <body>   
  55.         <p class="description">   
  56.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod   
  57.         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,   
  58.         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo   
  59.         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse   
  60.         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non   
  61.         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   
  62.         </p>   
  63.     </body>   
  64. </Html>   

总结

这种实现模式是思量了机能来写的,以及维护上的思量
- 好比行使了em,可以很轻松的放大缩小整体巨细
- 这里行使了hsla,这是我第一次行使这个颜色值;早年只在ps调解这个,很不错的颜色模式.和RGBA大同小异,可是HSLA更切合人类眼睛的寓目;
- 还学到了一种新的配景缩写方法

CSS Code
  1. /*分隔写*/  
  2. background-color:#ff0;   
  3. background-image:url(background.gif);   
  4. background-repeat:no-repeat;   
  5. background-attachment:fixed;   
  6. background-position:0 0;   
  7. background-size:cover;   
  8.   
  9. /*简写*/  
  10. background: #ff0 url(background.gif) no-repeat / fixed cover;   
  11. /*配置background-size必需用单斜杠离隔*/  

以上就是本文的所有内容,但愿对各人的进修有所辅佐,也但愿各人多多支持杨雨小我私人博客

本文地址:http://itbyc.com/web/css3/13186.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1