CSS3打造磨砂玻璃情况实际效果

日期:2021-01-20 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

简介

这个实际效果是在看CSS Secrets这书上看到的,觉得很非常好;

完成基本原理也挺简易的;

实际效果图及完成

实际效果图

编码完成

CSS Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3.     <head>   
  4.         <meta charset="UTF⑻">   
  5.         <title>Document</title>   
  6.         <style>   
  7.                     /**  
  8.                      * 设定情况图全屏遮盖及固定不动  
  9.                      * 设定內部元素偏位  
  10.                      */  
  11.                     body {   
  12.                         /*此处情况图自主更换*/  
  13.                         backgroundurl(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.                         positionrelative;   
  31.                         margin: 0 auto;   
  32.                         padding: 1em;   
  33.                         max-width: 23em;   
  34.                         background: hsla(0,0%,100%,.25) border-box;   
  35.                         overflowhidden;   
  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.                         positionabsolute;   
  46.                         top: 0; rightright: 0; bottombottom: 0; left: 0;   
  47.                         margin: -30px;   
  48.                         z-index: ⑴;   
  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,这是我第1次应用这个色调值;之前只在ps调剂这个,很非常好的色调方式.和RGBA大同市小异,可是HSLA更合乎人类双眼的收看;
- 还学到了1种新的情况缩写方法

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务必用单斜杠分隔*/  

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:深层次了解和运用css中Float特性 返回下一篇:没有了