要什么 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 简介 在大型项目当中, ...