Css3新特性应用之视觉效果实例


Posted in HTML / CSS onDecember 12, 2016

本文介绍了Css3新特性应用之视觉效果,具体有单侧阴影、不规则投影、染色体效果、毛玻璃效果、折角效果,具体实现如下:

一、单侧阴影

1、box-shadow属性的应用,格式:h-shadow v-shadow blur spread color inset属性取值介绍 h-sahdow:水平阴影的位置,允许负值

①v-shadow:垂直阴影的位置,允许负值

②blur:模糊距离

③spread:阴影的尺寸,扩张距离,可以为负数

④color:阴影的颜色

⑤inset/outset:内部或者外部阴影

2、阴影的扩张距离对四边都有效,不能单独应用于单边。

3、box-shadow支持多组值同时生效的设置

示例代码:

.wrap{
            width: 200px;
            height: 120px;
            background: yellowgreen;
            box-shadow: 2px 0px 4px -2px black,
                        -2px 0px 4px -2px black;
        }

Css3新特性应用之视觉效果实例

二 、不规则投影

1、利用border-radius生成的形状,用投影很好,但是如果加入了伪元素和半透明的装饰,阴影表现就很不好了,如下情况都会有问题。

① 半透明图像、背景图像、或者border-image

②元素设置了点状、虚线或半透明的边框,但没有背景(或者background-clip不是border-box时)

③元素内部有小角是用伪元素生成

④通过clip-path生成的形状

解决办法:利用svg的drop-shadow来实现

示例代码:

.wrap{
            width: 200px;
            height: 120px;
            border: 6px dotted yellowgreen;
            --box-shadow: 0px 0px 4px 0px black;
            -webkit-filter: drop-shadow(2px 0px 2px rgba(0,0,0,1))
        }

Css3新特性应用之视觉效果实例

三、染色体效果

1、基于滤镜实现,应用filter属性的相关值,调整图片的饱合度、亮度等值

2、基于min-blend-mode实现,作用:实现元素内容与背景以及下面的元素发生“混合”

3、基本background-blend-mode实现,作用:实现背景颜色与背景图片、背景图片与图片的混合

三种情况的示例代码:

.wrap1{
            width: 200px;
            height: 120px;
            overflow: hidden;
        }
        .wrap1 > img{
            max-height: 100%;
            max-width: 100%;
            -webkit-filter: sepia(1) saturate(4) hue-rotate(150deg);
        }

        .wrap2{
            width: 200px;
            height: 120px;
            background: hsl(335, 100%, 50%);
            overflow: hidden;
        }
        .wrap2 > img{
            height: 100%;
            width: 100%;
            mix-blend-mode: luminosity;
        }

        .wrap3{
            width: 200px;
            height: 120px;
            background-size: cover;
            background-color: hsl(335, 100%, 50%);
            background-image: url("../img/cat.png"); 
            background-blend-mode: luminosity;
        }

Css3新特性应用之视觉效果实例

四、毛玻璃效果

主要实现原理:内容伪元素背景与底层背景相同的图片;并加上filter:blur模糊滤镜即可。注意blur不能应用在底层背景,也不能应用在元素的背景上(这样会地元素本身应用blur模糊,会导致文本看不见),只能就用在伪元素上。

代码如下:

body{
    background: url("../img/cat.png") no-repeat;
    background-size: cover;
}
.wrap{
    position: relative;
    width: 500px;
    margin: 0px auto;
    padding: 10px;
    line-height: 1.5;
    background: hsla(0, 0%, 100%, .3);
    overflow: hidden;
}
.wrap::before{
    content: '';
    background: url("../img/cat.png") 0/cover fixed;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    filter: blur(20px);
    z-index: -1;
    margin: -30px;
}

Css3新特性应用之视觉效果实例

代码说明:1、body与wrap伪元素都应用相同的背景图片

2、wrap的background-attachment设置为fixed,让背景图不要跟随滚动一起动

3、wrap伪元素设置为绝对定位,且z-index层级只高于背景

4、利用blur设定wrap伪元素的模糊尺寸

5、用margin负值增加宽度,父元素用overflow:hidden隐藏溢出,让模糊背景更加真实。

五、折角效果

实现步骤

1、首先利用linear-gradient实现切角效果2、然后再利用linear-gradinet生成一个三角形,并设置他的位置与宽高

代码如下:

.wrap{
        background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0/2em 2em,
        linear-gradient(-135deg, transparent 1.4em, #58a 0);
        width: 200px;
        height: 120px;
    }

Css3新特性应用之视觉效果实例

注意

1、100% 0/2em 2em在定位背景元素的位置与宽高,尤其是2em的宽与高都是背景元素正常的宽度。

2、而第二个linear-gradient中的1.4em是沿着渐变轴进行度量的,也就是渐变轴到元素顶边的距离,本例是渐变轴到右上边顶的距离

3、to left bottom是表示渐变从左下角开始

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3属性background-size使用指南
Dec 09 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 #HTML / CSS
Css3新特性应用之形状总结
Dec 08 #HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 #HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 #HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 #HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 #HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 #HTML / CSS
You might like
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
Javascript----文件操作
2007/01/18 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Python&&GDAL实现NDVI的计算方式
2020/01/09 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
广告学毕业生求职信
2014/01/30 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
辞职信格式模板
2015/02/27 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
焦点访谈观后感
2015/06/11 职场文书
大学校园招聘会感想
2015/08/10 职场文书
Django显示可视化图表的实践
2021/05/10 Python