现代 CSS

color

CSS 颜色设置透明度的新姿势

在 CSS 中,我们有很多种方式为元素设置透明度,常见的是给元素设置透明度和给颜色设置透明度,不同的方式将会带来不一样的效果。那么今天,我们就一起来聊聊 CSS 中的不透明度。感兴趣的同学,请继续往下阅读。

CSS accent-color

Web 开发者都有一个相同的共识,要在 HTML 表单元素上定制 UI 风格,相对而言是较为困难的。很多时候,开发者都是通过别的方式来的绕开原生表单控件的使用,比如使用非表单元素来模拟表单控件。这样做的唯一目的就是让表单控件能在各平台上达到相同的 UI 风格。这样做虽然能让表单控件 UI 风格达到一致性,但也会给我们的工作增加很多额外的工作量,除此之外,也会导致表单控件元素状态的样式被丢弃,以及内置的可访问性功能也会丧失。也就是说,要完全重现浏览器提供的功能,可能比你想要承担的工作要多。如果说,能够直接有相应的 CSS 属性让开发者操作表单控件 UI是不是事情就会简单地多,开发者也可以从此避开用非表单控件元素来让表单控件更具个性化 UI。虽然到目前为止,我们还无法直接做到这一点,但 CSS 也在这方面做出很多的改变,比如说,我们现在可以直接使用 CSS 来控制表单元素的重点颜色(Accent Color),一种典型的明亮的颜色。这也就是我们今天要介绍的 CSS 的 accent-color 属性!

系统偏好设置的那些事儿

如果你阅读过早前分享过的《CSS媒体查询新特性》和《给网站添加暗黑模式》相关的文章,就可能想到了今天这篇文章大致和大家要聊的是些什么东西。事实上也的确如此,但或许和想象的略有差异,因为在这篇文章和大家聊的并不是 CSS 的媒体查询,也不是教大家怎么给网站添加暗黑模式的主题。如果是这样的话,就有点对不起大家了,大家也会觉得我在不断的炒冷饭。接下来要和大家聊的虽然也和 CSS 有关联,但对于很多同学来说,还是很新,很有意思的东西。感兴趣的同学请继续往下阅读。

A11Y 101:颜色对比度和Web可访问性

时至今日,Web页面或Web应用上色彩都是很丰富的。一般情况之下,开发者给Web上色大多是根据视觉设计师提供的设计稿来定义。颜色除了能决定Web在视觉上的美观之外,还能直接影响Web可访问性。因为访问或使用你产品的用户可能会在较亮的环境下(比如阳光下),或设备陈旧上(比如低分辨率显式器),颜色可以直接决定用户能否较好的访问。除此之外,可能有一些视觉障碍的用户(比如视弱,色盲)使用你的产品,这群用户群体同样会受颜色影响。

JavaScript中的颜色转换

图解CSS系列的《CSS 颜色》一文中介绍了CSS中颜色的使用。到目前为止,给Web元素设置颜色的方式有很多种,比如使用颜色名称定义颜色、使用#RGB(或#RRGGBB)、#RGBA(或#RRGGBBAA)、hsl()(或hsla())、hwb()lab()lch()等。在CSS的颜色规范的第四版本中的第十五节中,专门介绍了在JavaScript中如何实现颜色不同空间域的转换。在Web的开发中,有的时候难免离不开使用JavaScript来操作颜色,接下来在这篇文章中,我们主要和大家一起来聊聊JavaScript中颜色空间的转换应该如何实现。

图解CSS: CSS 颜色

颜色的魅力是无穷的,它可以让本身很平淡的东西瞬间变得漂亮、美丽起来。正如古话所言,佛靠金装,人靠衣装一样,网页也是如此,随着互联网的迅速发展,只有简单的文字和图片的网页,无法满足人们的需求了,一个网页给人们留下的第一印象,既不是他的内容,也不是他的设计,而是整站的整体颜色,这将决定用户是否继续浏览下去。为了能够达到人们的需求,Web设计师除了需要掌握网站制作的技术之外,还必须能够很好的应用Web颜色。换句话说,网站颜色的使用好坏,直接影响网站的生存力。

如何使用JavaScript操作CSS颜色

Web颜色是Web应用程序或页面中不可或缺的一部分,对于CSS处理颜色总是非常的简单和单一。但很多时候我们需要一些特殊的效果,比如随机色等。那么我们就需要借助JavaScript来完成。在学习如何使用JavaScript操作CSS颜色之前,我们需要对CSS如何设置颜色有一个基本的了解。CSS设置颜色模式有多种,最为常见的模型有:RGBHSL。我们先来看一下这两种颜色模式。

使用color-mod()函数修改颜色

去年@Erik Jung写了一篇文章来介绍CSS4 Color特性,那时并没有花时间去探讨其具体的使用方式,只是略知他能让你基于某个颜色,添加调节参数,得到新的颜色。由于其还是Color的新特性,所以目前如果不依赖于其他的手段,你在浏览器里是看不到效果的。当然也有非常出色的工程师,比如@Ahmad Shadeed写的一篇文章中,使用rgba()模拟出color-mod()函数的特性

216个Web安全颜色

Web上的颜色运用,对于设计师来说是小菜一碟,对于不是设计师来说还真是头痛的事情。打个比方说,Web的安全色是什么?或者说Web的安全色有多少?说实话,我以前只知道一个数字216,但我不知道具体是什么?今天为大家整理了216个web安全颜色,仅供大家参考。

返回顶部