文章关键字 ‘hsla’

是时候介绍这几个全新的CSS颜色函数了

2023年02月19日,星期日

调色板占位图CSS颜色

介绍7个全新的CSS颜色函数,虽然不算特别深入,但也算是CSS颜色这块比较有含金量的介绍文章了,里面全部都是以前不知道的知识,不得不感叹,颜色这东西,若要深究,怕是比贝加尔湖还要深。

阅读全文…

快速学习CSS Color Level 4的色值新语法

2020年10月11日,星期日

多彩颜色表示

本文介绍#RRGGBBAA色值表示法,对应的透明度的16进制色值,RGB颜色和HSL颜色语法以前的限制都取消了,支持小数,参数个数3个4个都可以,以及介绍RGB颜色和HSL颜色的新语法,希望本文内容对大家的学习有所帮助。

阅读全文…

CSS文字和背景color自动配色技术简介

2018年11月18日,星期日

智能配色

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

阅读全文…

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

2018年07月22日,星期日

canvas颜色过渡处理缩略图

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

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

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

阅读全文…

Chrome opacity非1时border-radius圆角边框剪裁问题

2017年10月19日,星期四

border-radius:50%可以让元素正方形元素表现为正圆,如果元素设置了border边框,则会表现为一个正圆圈圈,但有时候,border边框的这个圈圈会在边缘处发生剪裁,不是一个完美的圈圈了,这是如何发生的呢?

阅读全文…