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色彩模型


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

查看所有标签

猜你喜欢:

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

Open Data Structures

Open Data Structures

Pat Morin / AU Press / 2013-6 / USD 29.66

Offered as an introduction to the field of data structures and algorithms, Open Data Structures covers the implementation and analysis of data structures for sequences (lists), queues, priority queues......一起来看看 《Open Data Structures》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具