要什么 Photoshop,会这些 CSS 就够了
2019-08-14 09:52:25来源:博客园 阅读 ()
标题党一时爽,一直标题党一直爽
还在上大学那会儿,我就喜欢玩 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,0,0, 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 失效问题》
原文链接:https://www.cnblogs.com/wisewrong/p/11259490.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:@media screen媒体查询实现页面自适应布局
下一篇:前端-CSS
- 毕业生想学习web前端开发,有什么好的发展方向吗? 2020-06-09
- 2020年Web前端开发工程师市场怎么样?学会什么技术才能拿到 2020-06-06
- 要学习什么知识为了成为一名前端工程师? 2020-06-03
- 学会这些CSS,再也不用切图!!! 2020-06-03
- 现在前端最主要的都学什么? 2020-06-01
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash