CSS3打造磨砂玻璃的背景

简介

这个效果是在看CSS Secrets这书上看到的,感觉很不错;
实现原理也挺简单的;

效果图及实现

效果图

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>/*** 设置背景图全屏覆盖及固定* 设置内部元素偏移*/body {/*此处背景图自行替换*/background: url(demo.jpg) no-repeat center center fixed;background-size: cover;min-height: 100vh;box-sizing: border-box;margin: 0;padding-top: calc(50vh - 6em);font: 150%/1.6 Baskerville, Palatino, serif;}/*** 整体居中功能；* 背景透明虚化* 溢出隐藏* 边缘圆角化* 文字增加淡阴影*/.description{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);}/*使用滤镜模糊边缘*/.description::before{content: '';position: absolute;top: 0; right: 0; bottom: 0; left: 0;margin: -30px;z-index: -1;-webkit-filter: blur(20px);filter: blur(20px);}</style></head><body><p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></body>
</html>

总结

这种实现模式是考虑了性能来写的,以及维护上的考虑

比如使用了em,可以很轻松的放大缩小整体大小
这里使用了hsla,这是我第一次使用这个颜色值;以前只在ps调整这个,很不错的颜色模式.和RGBA大同小异,但是HSLA更符合人类眼睛的观看;
还学到了一种新的背景缩写方式

/*分开写*/
background-color:#ff0;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
background-size:cover;/*简写*/
background: #ff0 url(background.gif) no-repeat / fixed cover;
/*设置background-size必须用单斜杠隔开*/

CSS3打造磨砂玻璃的背景相关推荐

css3实现磨砂效果,CSS3打造磨砂玻璃背景效果
简介这个效果是在看CSS Secrets这书上看到的,感觉很不错; 实现原理也挺简单的; 效果图及实现效果图代码实现 Document /** * 设置背景图全屏覆盖及固定 * 设置内部元素偏移 ...
html 3d立体阴影效果图,CSS3打造带阴影的旋转3D图像
CSS3打造带阴影的旋转3D图像 Sponsor CSS3可以实现很多创新好玩的交互效果,正如今天将和大家介绍的3D旋转图像,效果很漂亮,这个旋转图像的特别之处就是支持阴影旋转和兼容响应式网页设计,使 ...
html旋转有阴影,CSS3打造带阴影的旋转3D图像
转至:http://www.shejidaren.com/css-3d-p_w_picpaths-flip-gallery.html CSS3可以实现很多创新好玩的交互效果,正如今天将和大家介绍的3D ...
CSS3打造的10种创意动画菜单效果
CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功能有个初步了解.本文将为大家带来一些充满创意的菜单悬停效果.它由图标,主标题,副标题等简单的元素构成,通过CSS3最新的过渡(trans ...
HTML中button怎么填充GIF,css3给按钮添加背景渐变动画
css3给按钮添加背景渐变动画 button { color:#FFF; font-size:16px; outline:none; width:300px; height:48px; backgro ...
[css] 举例说明在css3中怎么实现背景裁剪？
[css] 举例说明在css3中怎么实现背景裁剪? background-clip: border-box(默认,背景延伸至边框外沿,但是在边框的下层) padding-box(背景延伸至paddin ...
html5和css3打造一款创意404页面
之前和网友分享一款HTML5可爱的404页面动画很逗的机器人.今天要爱编程小编要再给大家带来一款html5和css3打造的创意404页面.一起看下效果图吧: 在线预览源码下载实现的代码. h ...
纯CSS3模拟iPhone X背景切换动画
尽管iPhone已经没有像以前那么火了,但是苹果的UI设计还是可以肯定的.今天我们要给大家分享一款基于纯CSS3的iPhone X背景切换动画,整体的切换动画以淡入淡出为主,iPhone X屏幕的背景 ...
动态磨砂玻璃渐变背景
网页特效代码合集动态磨砂玻璃渐变背景妙用滤镜构建高级感拉满的磨砂玻璃渐变背景一个磨砂(毛玻璃)质感效果的渐变背景图,看上去是比较高级的. 这个效果使用 CSS 其实也可以非常轻松制作出来.本文就 ...

CSS3打造磨砂玻璃的背景

简介

效果图及实现

效果图

代码实现

总结

CSS3打造磨砂玻璃的背景相关推荐

最新文章

热门文章