文章关键字 ‘颜色’

纯CSS实现任意格式图标变色的研究

2018年11月24日,星期六

多彩变色

想要使用CSS改变PNG小图标的颜色,似乎不太可能。但,实际上,我们可以有多种方法改变PNG小图标,SVG小图标的颜色,并且是任意的色值,可以是作为背景图片的图标,也可以是内联的图标。究竟如何CSS改变图标的颜色呢?不妨点进去围观一番。

阅读全文…

CSS前景背景自动配色技术简介

2018年11月18日,星期日

智能配色

CSS越来越强,现在已经可以实现根据不同的背景色显示不同的前景色进行匹配了,例如右图GIF图片所示,背景色一开始深色,文字颜色为白色,当背景色逐渐变淡的时候,文字颜色也从原来的白色变成黑色了,同时边框也显示出来了,以便有更好的识别度。如何实现的呢?去文中一探究竟吧~

阅读全文…

Canvas中颜色过渡动画效果的实现

2018年07月22日,星期日

canvas颜色过渡处理缩略图

在CSS3中,我们要想实现从A颜色到B颜色的过渡效果,是相当容易的,只要指定起止颜色,配合transition过渡或者animation动画都可以时间我们想要的效果。

但是,在<canvas>中却没有这么简单,因为<canvas>本质上是一个静态画布,要想实现颜色变化,需要JS去不断绘制,实现起来要比CSS实现麻烦很多。再加上颜色值本身就不一定是纯粹的数值,更增加了我们实现的难度。

本文就将通过多个案例,逐步深入,介绍一些在Canvas中的颜色处理技巧,有些技巧说不定会让你大开眼界。

阅读全文…

JS检测PNG图片是否有透明背景、抠图等相关处理

2018年05月1日,星期二

用户上传图片,如果是PNG图片,有时候我们希望这张PNG图片背景不要是透明的,有时候又希望是透明的,有没有什么方法可以直接在前端就检测出是否是含透明区域的图片,以及做出相关的体验优化处理呢?如果非透明图片想要非常方便快速变成透明图片,又当如何处理呢?本文会提供详尽的解答,丰富的配图,必要的源代码,希望本文的内容能够对您的学习有所帮助!

阅读全文…

小tip: 了解LinearRGB和sRGB以及使用JS相互转换

2017年12月18日,星期一

LinearRGB顾名思义就是线性RGB颜色。

假设白板的光线反射率是100%,黑板的光线反射率是0%。则在线性RGB的世界中,50%灰色就是光线反射率为50%的灰色。

然而,人这种动物,对于真实世界的颜色感受,并不是线性的,而是曲线的……

阅读全文…

PNG格式小图标的CSS任意颜色赋色技术

2016年06月8日,星期三

CSS可以修改图片的颜色,没错,可以,本文就带你一睹真相,再次领略CSS的潜力和造诣。

阅读全文…

CSS1-CSS3 <color>颜色知识知多少?

2015年07月26日,星期日

本文讲的是CSS1-CSS3 <color>颜色的一些知识,有些你可能知道,有些可能并不知道,算是对过往一些知识点的总结吧。无Demo,有截图,有源代码示意,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

SVG图标颜色文字般继承与填充

2014年07月22日,星期二

前文介绍了SVG Sprites身材和内涵,顺大便客观的评价了SVG Sprites比font-face高几层楼的事实(看看外国同行的对比)。但是呢,人总是这样,总是容不得说自己现在使用东西的不好。于是乎,不经意间戳动了点小小的自尊。导致文章也没细读就大肆反驳:SVG图标颜色要内联设置,不像font-face那样好控制!而且还不只一位兄弟这么说。
其实呢,我并不忍心说实话的:SVG图标颜色控制要比font-face有过之而无不及……

阅读全文…

小tip: CSS后代选择器可能的错误认识

2012年03月19日,星期一

本文通过几个简单的实例,介绍在CSS后代选择器上,一些同行可能存在的一些错误认识。虽是短篇,但是源代码展示,必要的demo页面以及效果截图俱全。希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip:CSS3下的渐变文字效果实现

2011年04月20日,星期三

本文内容不多,就是介绍了两种实现文字渐变的效果,都需要依赖一些CSS3的属性。同样的,每个方法提供相应的demo页面,提供相应的效果截图以及必要的源代码展示。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…