会员专栏

CSS的视觉效果

记得在第五届中国区的CSS Conf大会上@张鑫旭、@袁川两位老师分享的话题都和视觉以及创意有关的话题,而且在社区中有关于这方面讨论也多,比如说@Lea Verou的《CSS Secrets》一书就有很多介绍CSS用来创建视觉效果的技巧。另外,在社区也有很多关于这方面的介绍,比如CSSArt网站ASingleDiv网站CodePen上的SingleDiv等。当然,也有同学私下找我,让我能不能抽空聊聊这方面的话题,那么今天,我们就和大家来聊聊如何使用CSS来实现一些视觉效果,在这里我更倾向于和项目中的一些需求和大家讨论这方面的话题。希望大家对这方面话题感兴趣。

响应式网格布局

从文章标题中不难发现这篇文章要和大家聊的是两个东东,即响应式网格。从布局系统来说,响应式布局和网格布局都不是什么新东西了。但是他们结合在一起,可以让响应式布局变得更灵活。正如@Keir Watson所说,只要20行代码就可以实现响应式网格布局。不过,我们今天来看两个比较有意思的布局,看上去并不是很容易实现的布局效果。

CSS自定义属性在组件开发中的使用

图解CSS系列的《CSS自定义属性》一文中,对CSS的自定义属性做过深入的阐述。如果你阅读过这篇文章,应该对CSS自定义属性有所了解,也能体会到该特性的强大之处。今天,CSS自定义属性可以用于Web开发中的很多地方,能让开发者变得更为便捷灵活,比如最近流行的Dark Mode开发。而今天我们就来和大家聊聊CSS自定义属性在组件开发中的运用。

初探React Context API

最近在整理CSS自定义属性在React中的使用时了解到“可以使用React Context API相关的知识更好的在React组件中使用CSS自定义属性”,但是自己对这方面的知识了解的并不多,因此想借此机会来学习React Context API相关的知识。也基于这个原因有了这篇文章。

CSS实现圆形头像效果

在Web开发中经常会碰到圆形图像的样式处理。在CSS中我们有很多种方式能实现圆形图形的效果,比如《聊聊CSS中的圆》一文中我们就介绍了很多种技术方案。在这些方案中有大家熟悉的border-radius,也有不熟悉的clip-path。这些制作圆形的方案都可以帮助我们实现圆形头像。在这篇文章中,我们就来看看圆形头像的实现方案。

聊聊input元素

在Web中通过HTML的表单和用户交互是最常见的方式之一,同时HTML的表单也是Web最为复杂的交互部分之一。正因为其复杂,Web中的表单开发也令开发较为头疼。另外,Web表单涵盖了很多部分,除了我们最为熟悉的的<input><button><select>等表单元素之外,还有其他新的表单元素,比如在HTML5新增的<datalist><output><progress><meter>等元素。简单地说,这些元素可以构建出人与机对话或交互用户界面,然而由于历史和技术上的原因,如何充分发挥它们的潜力并不总是显而易见的。就拿<input>来说吧,要想彻底了解和懂得用<input>并不是易。既然如此,我们在这篇文章中就来和大家聊聊<input>中的故事。

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颜色。换句话说,网站颜色的使用好坏,直接影响网站的生存力。

如何提高Web可访问性

A11Y 101系列构建可访问性应用的2W1H中和大家聊了构建Web可访问性的重要性。构建可访问的Web是Web开发的重要组成部分之一,构建出一个具有可访问性的Web页面或应用程序能确保有障碍的人士能够平等的访问Web,使他们能够享有访问Web的权力,也能让他们更好的融入于社会,使其生活变得更有意义。这也是Web开发者应该担当的责任。在这篇文章中,将和大家聊聊,构建Web可访问性的检查清单。希望能帮助更多的开发者能更容易开发出更具可访问性的Web页面或Web应用。

页面

返回顶部