要什么 Photoshop，会这些 CSS 就够了
标题党一时爽，一直标题党一直爽
还在上大学那会儿，我就喜欢玩 Photoshop。后来写网页的时候，由于自己太菜，好多花里胡哨的效果都得借助 Photoshop 实现，当时就特别希望 CSS 能像 Photoshop 一样处理图片。
随着对 CSS 的了解越多，我发现 CSS 有很多平时用得少（或者不会用），但非常厉害的属性。这些属性实现了很多 Photoshop 的功能，比如滤镜、混合模式。
我简单整理了一下，由于这些属性的功能十分强大，每一个属性都能单独成文，所以这里只是做一个目录。
一、渐变 Gradient
渐变在 PS 里面是一个很常用的功能，在工作中用到 CSS 渐变的场景也不少
但除了简单的线性渐变、径向渐变之外，还可以用渐变做出这样的效果：
甚至是用渐变做一个进度条：
相关文章：
《使用 CSS 渐变》
二、倒影 box-reflect
这个属性可以使某个 DOM 元素产生一个倒影，并且可以规定倒影的方向和距离
另外还可以给这个倒影添加一个遮罩，比如一个透明渐变：
-webkit-box-reflect: below -7px linear-gradient(to bottom,transparent,rgba(,,, 0.4));
相关文章：
三、阴影 box-shadow / text-shadow
又是一个很常见的属性，但通常都是用来做一些简单的阴影，比如：
但结合 animation 与 transform，就可以做出这样的动画：
CodePen Demo -- CSS Checker Illusion( By David Khourshid )
相关文章：
四、 裁剪 clip-path
这个属性可以创建一个裁剪区域，让元素只显示区域内的内容，有点像 Photoshop 中“路径+蒙版”的效果
这个属性值最强大的地方在于，可以非常自由的绘制多边形：
相关文章：
五、蒙板 mask
蒙板的效果是在原图形上面，在蒙上一层图形，得到一个新的图形
由于蒙板图形可以是透明的，所以有些用 clip-path 实现的效果，也可以用 mask 实现
在我看来，mask 和 background 是高度类似的，区别在于 background 位于底层，而 mask 在顶层
相关文章：
《CSS3 的一对孪生兄弟之 background & mask》
六、滤镜 filter
滤镜应该也算比较常用的属性了，同一张图叠加不同的滤镜之后，能呈现各种各样的效果：
但这只是基本用法！
filter 可以做出很多漂亮的效果，特别是结合 animation 之后，这些高级技巧可以参考下面的“相关文章”，看完之后我都惊呆了
相关文章：
《QQ 未读消息的拖拽动态效果是如何实现的？ - 祥子的回答 - 知乎》
七、混合模式 blend-mode
如果对 Photoshop 的混合模式很熟悉的话，这个属性也非常好理解
在 CSS 里面，有 mix-blend-mode 和 background-blend-mode 两种用法
呈现的效果和上面的 filter 类似，也是让原图形叠加之后产生化学反应，比如用 CSS 做一个抖音的 LOGO：
CodePen Demo -- 使用 mix-blend-mode 实现抖音 LOGO
相关文章：
《探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题》
要什么 Photoshop，会这些 CSS 就够了的更多相关文章
- Photoshop投影和CSS box-shadow转换
"混合模式":Photoshop提供了各式各样的混合模式,但是CSS3阴影只支持正常模式(normal). "颜色(color)":阴影颜色.对应于CSS3阴影 ...
- 网页设计师常用的PHOTOSHOP插件
Photoshop是网页设计师常用的一个非常重要而强大的工具,可以让网页设计师的工作高效便捷的进行,也为设计师们的天马行空提供了实际技术实现.一般我们的网页设计师设计完成后,需要将其转换制作成网页形式 ...
- css一长串连续英文字符的换行
在标签内,中文的换行是没有什么问题的,但英文的换行就有问题.当出现一长串连续的英文字符时,换行就失效了,内容会溢出.解决这个问题只需要一行css就够了: p{ word-wrap: break-wor ...
- 动态加载/删除css文件以及图片预加载
动态加载/删除css文件以及图片预加载 功能模块页面 最近,工作中遇到了一个比较奇葩的需求:要在一个页面(PC端)增加一个功能模块,但是这个页面在不久之后要重构,为了新增加的模块可以继续复用, ...
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...
- 简单bat语法
一.简单批处理内部命令简介 1.Echo 命令 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置. 语法 echo [{on off}] [message] ...
- 《半吊子全栈系列：Boostrap3》
前言:后端开发做网站 几年前,作为一名纯粹后端Java开发人员,对JS还没开窍,对于页面只停留在<十天学会DIV+CSS>这种程度,但是我又想做网站怎么办? 这时候Boostrap3出现了 ...
- vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
- javascript 关键字高亮显示实现代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
随机推荐
- linux(03)基础系统优化
Linux之基础系统优化 Linux基础系统优化 >>> https://www.cnblogs.com/pyyu/p/9355477.html Linux的网络功能相当强悍,一时之 ...
- 基于VLC库C#开发可播放摄像头及任意格式视频的播放器
前言 本文主要讲述,在WPF中,借助Vlc.DotNet调用VLC类库,实现视频播功能,下面我们先来做开发前的准备工作. 准备工作 首先,我们创建一个项目WpfVLC,然后,进入Neget搜索Vlc. ...
- c# 第11节 运算符大全
本节内容: 1:数学运算符 2:赋值运算符 3:关系运算符 4:布尔运算符 5:位运算符 6:其他运算符 1:数学运算符 2:赋值运算符 3:关系运算符 4:布尔运算符 5:位运算符 & 运算 ...
- day33_8_15 并发编程4，线程池与协程，io模型
一.线程池 线程池是一个处理线程任务的集合,他是可以接受一定量的线程任务,并创建线程,处理该任务,处理结束后不会立刻关闭池子,会继续等待提交的任务,也就是他们的进程/线程号不会改变. 当线程池中的任务 ...
- clickhouse 离线/在线 安装和java通过jdbc链接
检查 需要确保是否x86_64处理器构架.Linux并且支持SSE 4.2指令集 grep -q sse4_2 /proc/cpuinfo && echo "SSE 4.2 ...
- js对url进行编码的方法（encodeURI和 encodeURICompoent()）
encodeURI(): 对整个URL进行编码,对应的解码方式:decodeURI() encodeURIComponent() : 对查询字符串进行编码,对应的解码方式:decodeURICompo ...
- （五）golang--常用的一些玩意
\t--制表位 \n--换行符 \\--一个\ \"--一个” \r--回车 行注释://,一次性注释多行指令,选中代码后ctrl+/ 块注释:/* */ 代码规范: (1)官方推荐使用行注 ...
- Shell~echo -e 颜色输出
echo -e 可以控制字体颜色和背景颜色输出 从一个例子开始: # echo -e "\e[1;33;41m test content \e[0m" 输出效果: . \e 转义起 ...
- SpringBoot整合mybatis及注意事项
SpringBoot整合mybatis及注意事项 主要步骤 添加依赖 mybatis 在配置文件中配置数据源信息 编写pojo mapper接口 mapeer映射文件 手动配置mybatis的包扫描 ...
- Ansible17：Playbook之tags
目录 简介 为task打tag 使用tag 执行指定tag的task 排除指定tag的task 查看playbook中的所有tag 打tag的几种方式 ansible内置tag 简介 在大型项目当中, ...