css揭秘实战技巧 - 视觉效果[三]

栏目: CSS · 发布时间: 5年前

内容简介:本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果:首先,我们来说明一下box-shadow 属性值的含义:我们来看一下具体效果,首先是一个矩形:

本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果:

  1. css揭秘实战技巧- 背景与边框 [一]
  2. css揭秘实战技巧- 形状 [二]
  3. css揭秘实战技巧 - 视觉效果[三]
  4. css揭秘实战技巧 - 字体排印[四]
  5. css揭秘实战技巧 - 用户体验[五]
  6. css揭秘实战技巧 - 结构与布局[六]
  7. css揭秘实战技巧 - 过渡与动画[七]

前言

  1. 单侧投影
  2. 不规则投影
  3. 染色效果
  4. 毛玻璃效果
  5. 折角效果

一:单侧投影

首先,我们来说明一下box-shadow 属性值的含义:

box-shadow: 0px 0px 3px red inset;
第一个从参数:表示阴影水平向右的偏移量
第二个参数:表示阴影垂直向下的偏移量
第三个参数:表示阴影的模糊半径
第四个参数:表示阴影的颜色
第五个参数:表示扩张半径,根据该值对阴影进行扩大和缩写
第六个参数:表示阴影向内还是向外,默认是outset向外,也可以设置为inset。
复制代码

我们来看一下具体效果,首先是一个矩形:

css揭秘实战技巧 - 视觉效果[三]

效果1: 四周阴影:即偏移量为0

css揭秘实战技巧 - 视觉效果[三]

代码如下:

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 0px 10px red;
复制代码

效果2: 两侧阴影

css揭秘实战技巧 - 视觉效果[三]

代码如下:

width: 200px;
height: 100px;
background: yellow;
box-shadow:  5px -5px 10px red;
复制代码

效果3:单侧投影 这时,我们可能直接会想到,只设置垂直或者水平一个方向的偏移量不就可以了嘛, 代码如下:

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 5px 10px red;
复制代码

实现的效果如下:

css揭秘实战技巧 - 视觉效果[三]

这时,我们才醒悟过来,我们设置的阴影宽度为10px, 对于垂直方向,因为我们设置了向下偏移10px, 所以看上去,top方向是没有任何阴影的,但是left和right方向不管怎么偏移,肯定会有其中一个方向是有阴影的,那么,怎么样才可以实现真正的单侧阴影呢?

啦啦啦,box-shadow的第四个长度参数隆重登场: 它排在 模糊半径参数之后,称作扩张半径。这个参数会根据你指定的值去扩大或 (当指定负值时)缩小投影的尺寸。举例来说,一个 -5px 的扩张半径会把投 影的宽度和高度各减少 10px(即每边各 5px)。 代码如下:

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 10px 10px -5px red;
复制代码

最终的效果如下:

css揭秘实战技巧 - 视觉效果[三]

效果4: 双侧投影

css揭秘实战技巧 - 视觉效果[三]

代码如下:

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 10px 10px -10px red, 0px -10px 10px -10px red;
复制代码

二:不规则投影

首先,说明一下,什么是不规则投影,我们平时设置阴影可能大多数都是给一个正方形或者长方形,甚至圆来设置阴影,这些情况下,box-shadow的表现是非常好的,但是如何遇到一些不规则的图形呢?例如如下效果:

css揭秘实战技巧 - 视觉效果[三]

这里以气泡的效果为例:

首先,我们可以想到,这是由一个正方形加一个三角形实现的(三角形可以实现原理可以查看第二节形状篇 ),我们先实现此效果:

代码如下:

div {
    width: 200px;
    height: 200px;
    background: #dfb311;
    position: relative;
    border-radius: 10px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
div::after {
    content: '';
    display: inline-block;
    border: 20px solid #dfb311;
    border-color: transparent transparent transparent #dfb311;
    position: absolute;
    right: -40px;
    top: calc(50% - 20px);
}
复制代码

效果如下:

css揭秘实战技巧 - 视觉效果[三]

接下来,我们来设置阴影效果,我们很直接的想到box-shadow,我们在div元素中添加该属性:

div {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .5)   
}
复制代码

效果如下:

css揭秘实战技巧 - 视觉效果[三]

此时,我们可以看到正方形的阴影效果有了,但是三角形还没有,那么我们再给三角形加一个box-shadow试试看

div::after{
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .5)
}
复制代码

效果如下:

css揭秘实战技巧 - 视觉效果[三]

怎么成这样了?原来三角形的实现原理其实本身就是一个正方形,只不过另外三条边框的颜色为透明,那么,接下来该如何给这种不规则的图形加阴影效果呢?答案就是采用css滤镜:drop-shadow();

div {
    filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
}
复制代码

啦啦啦,这样就得到我们想要的效果啦。

css揭秘实战技巧 - 视觉效果[三]

三:染色效果

我们来看一下比较常见的一个效果:

css揭秘实战技巧 - 视觉效果[三]

默认情况下,是一种灰度图片,hover的时候,灰度消失,正常显示,那么如何设置这个灰度效果,就是我们本节要实现的效果,

方案一:让ui给两种场景的图片,然后切换即可,但是很显然这样会增加网络请求,而且如果要替换成另外一种效果,就要把所有图片全部替换,成本有点高。

方案二:给图片上层添加一层元素,并且设置透明度,这样看上去有染色效果,但是并不是真正的对图片进行了染色,同时也大大削弱了图片的对比度。

方案三: 采用滤镜的方案

首先,这是一张正常的图片:

css揭秘实战技巧 - 视觉效果[三]

我们来降低一下饱和度:

代码如下:

filter: sepia(1);
复制代码

效果如下:

css揭秘实战技巧 - 视觉效果[三]

我们再来提升一下饱和度:

代码如下:

filter: saturate(4);
复制代码

效果如下:

css揭秘实战技巧 - 视觉效果[三]

我们再来对每个像素的色相进行指定角度进行偏移

代码如下:

filter: hue-rotate(295deg);
复制代码
css揭秘实战技巧 - 视觉效果[三]

以上三种滤镜我们一起来使用:

filter: sepia(1) saturate(4) hue-rotate(295deg);
复制代码

效果如下:

css揭秘实战技巧 - 视觉效果[三]

这就是我们想要的效果(可能效果没有原图好哈,这里只是说明一下这几种滤镜的作用),而且,此时你可能有个疑问,到底我该设置多少的饱和度,或者色相呢?这就涉及到我们的色彩模型,参考链接:HSL色彩模型


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

如何变得有思想

如何变得有思想

阮一峰 / 人民邮电出版社 / 2014-12-2 / 49.00元

本书为阮一峰博客选集,囊括了作者对各种问题的思考,围绕的主题是试图理解这个世界。本书内容非常广泛,涉及观点、文学、历史、科技、影视等方面。作者在书中对具有深刻意义的文字进行摘录,并且在思索后提出自己独特的观点。书后附有阮一峰诗集。 本书适合喜欢独立思考、热爱读书的读者,对于广大读者具有一定的启发作用。一起来看看 《如何变得有思想》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具