标题党一时爽,一直标题党一直爽

还在上大学那会儿,我就喜欢玩 Photoshop。后来写网页的时候,由于自己太菜,好多花里胡哨的效果都得借助 Photoshop 实现,当时就特别希望 CSS 能像 Photoshop 一样处理图片。

随着对 CSS 的了解越多,我发现 CSS 有很多平时用得少(或者不会用),但非常厉害的属性。这些属性实现了很多 Photoshop 的功能,比如滤镜、混合模式。

我简单整理了一下,由于这些属性的功能十分强大,每一个属性都能单独成文,所以这里只是做一个目录。

一、渐变 Gradient

渐变在 PS 里面是一个很常用的功能,在工作中用到 CSS 渐变的场景也不少

但除了简单的线性渐变、径向渐变之外,还可以用渐变做出这样的效果:

甚至是用渐变做一个进度条:

相关文章:
《使用 CSS 渐变》

《CSS3 Gradient 渐变还能这么玩》

二、倒影 box-reflect

这个属性可以使某个 DOM 元素产生一个倒影,并且可以规定倒影的方向和距离

另外还可以给这个倒影添加一个遮罩,比如一个透明渐变:

-webkit-box-reflect: below -7px linear-gradient(to bottom,transparent,rgba(,,, 0.4));

相关文章:

《-webkit-box-reflect》

《CSS 倒影》

三、阴影 box-shadow / text-shadow

又是一个很常见的属性,但通常都是用来做一些简单的阴影,比如:

但结合 animation 与 transform,就可以做出这样的动画:

CodePen Demo -- CSS Checker Illusion( By David Khourshid )

相关文章:

《box-shadow》

《你所不知道的 CSS 阴影技巧与细节》

四、 裁剪 clip-path

这个属性可以创建一个裁剪区域,让元素只显示区域内的内容,有点像 Photoshop 中“路径+蒙版”的效果

这个属性值最强大的地方在于,可以非常自由的绘制多边形:

相关文章:

《clip-path》

《CSS clip-path maker》

《不可思议的CSS之CLIP-PATH》

五、蒙板 mask

蒙板的效果是在原图形上面,在蒙上一层图形,得到一个新的图形

由于蒙板图形可以是透明的,所以有些用 clip-path 实现的效果,也可以用 mask 实现

在我看来,mask 和 background 是高度类似的,区别在于 background 位于底层,而 mask 在顶层

相关文章:

《CSS遮罩CSS3 mask/masks详细介绍》

《CSS3蒙版》

《CSS3 的一对孪生兄弟之 background & mask》

六、滤镜 filter

滤镜应该也算比较常用的属性了,同一张图叠加不同的滤镜之后,能呈现各种各样的效果:

但这只是基本用法!

filter 可以做出很多漂亮的效果,特别是结合 animation 之后,这些高级技巧可以参考下面的“相关文章”,看完之后我都惊呆了

相关文章:

《filter》

《你所不知道的 CSS 滤镜技巧与细节》

《QQ 未读消息的拖拽动态效果是如何实现的? - 祥子的回答 - 知乎》

《从酷炫的果冻菜单谈起 CSS3 filter 属性》

七、混合模式 blend-mode

如果对 Photoshop 的混合模式很熟悉的话,这个属性也非常好理解

在 CSS 里面,有 mix-blend-mode 和 background-blend-mode 两种用法

呈现的效果和上面的 filter 类似,也是让原图形叠加之后产生化学反应,比如用 CSS 做一个抖音的 LOGO:

CodePen Demo -- 使用 mix-blend-mode 实现抖音 LOGO

相关文章:

《混合模式》

《mix-blend-mode的使用》

《探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题》

要什么 Photoshop,会这些 CSS 就够了的更多相关文章

  1. Photoshop投影和CSS box-shadow转换

    "混合模式":Photoshop提供了各式各样的混合模式,但是CSS3阴影只支持正常模式(normal). "颜色(color)":阴影颜色.对应于CSS3阴影 ...

  2. 网页设计师常用的PHOTOSHOP插件

    Photoshop是网页设计师常用的一个非常重要而强大的工具,可以让网页设计师的工作高效便捷的进行,也为设计师们的天马行空提供了实际技术实现.一般我们的网页设计师设计完成后,需要将其转换制作成网页形式 ...

  3. css一长串连续英文字符的换行

    在标签内,中文的换行是没有什么问题的,但英文的换行就有问题.当出现一长串连续的英文字符时,换行就失效了,内容会溢出.解决这个问题只需要一行css就够了: p{ word-wrap: break-wor ...

  4. 动态加载/删除css文件以及图片预加载

    动态加载/删除css文件以及图片预加载   功能模块页面   最近,工作中遇到了一个比较奇葩的需求:要在一个页面(PC端)增加一个功能模块,但是这个页面在不久之后要重构,为了新增加的模块可以继续复用, ...

  5. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

  6. 简单bat语法

    一.简单批处理内部命令简介 1.Echo 命令 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置. 语法 echo [{on off}] [message] ...

  7. 《半吊子全栈系列:Boostrap3》

    前言:后端开发做网站 几年前,作为一名纯粹后端Java开发人员,对JS还没开窍,对于页面只停留在<十天学会DIV+CSS>这种程度,但是我又想做网站怎么办? 这时候Boostrap3出现了 ...

  8. vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解

    做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...

  9. javascript 关键字高亮显示实现代码

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

随机推荐

  1. linux(03)基础系统优化

    Linux之基础系统优化 Linux基础系统优化 >>> https://www.cnblogs.com/pyyu/p/9355477.html Linux的网络功能相当强悍,一时之 ...

  2. 基于VLC库C#开发可播放摄像头及任意格式视频的播放器

    前言 本文主要讲述,在WPF中,借助Vlc.DotNet调用VLC类库,实现视频播功能,下面我们先来做开发前的准备工作. 准备工作 首先,我们创建一个项目WpfVLC,然后,进入Neget搜索Vlc. ...

  3. c# 第11节 运算符大全

    本节内容: 1:数学运算符 2:赋值运算符 3:关系运算符 4:布尔运算符 5:位运算符 6:其他运算符 1:数学运算符 2:赋值运算符 3:关系运算符 4:布尔运算符 5:位运算符 & 运算 ...

  4. day33_8_15 并发编程4,线程池与协程,io模型

    一.线程池 线程池是一个处理线程任务的集合,他是可以接受一定量的线程任务,并创建线程,处理该任务,处理结束后不会立刻关闭池子,会继续等待提交的任务,也就是他们的进程/线程号不会改变. 当线程池中的任务 ...

  5. clickhouse 离线/在线 安装和java通过jdbc链接

    检查 需要确保是否x86_64处理器构架.Linux并且支持SSE 4.2指令集 grep -q sse4_2 /proc/cpuinfo && echo "SSE 4.2 ...

  6. js对url进行编码的方法(encodeURI和 encodeURICompoent())

    encodeURI(): 对整个URL进行编码,对应的解码方式:decodeURI() encodeURIComponent() : 对查询字符串进行编码,对应的解码方式:decodeURICompo ...

  7. (五)golang--常用的一些玩意

    \t--制表位 \n--换行符 \\--一个\ \"--一个” \r--回车 行注释://,一次性注释多行指令,选中代码后ctrl+/ 块注释:/* */ 代码规范: (1)官方推荐使用行注 ...

  8. Shell~echo -e 颜色输出

    echo -e 可以控制字体颜色和背景颜色输出 从一个例子开始: # echo -e "\e[1;33;41m test content \e[0m" 输出效果: . \e 转义起 ...

  9. SpringBoot整合mybatis及注意事项

    SpringBoot整合mybatis及注意事项 主要步骤 添加依赖 mybatis 在配置文件中配置数据源信息 编写pojo mapper接口 mapeer映射文件 手动配置mybatis的包扫描 ...

  10. Ansible17:Playbook之tags

    目录 简介 为task打tag 使用tag 执行指定tag的task 排除指定tag的task 查看playbook中的所有tag 打tag的几种方式 ansible内置tag 简介 在大型项目当中, ...