CSS3

图解CSS:CSS逻辑属性

自Web诞生以来,我们一直习惯于物理CSS属性,比如我们都知道使用margin-topmargin-rightmargin-bottommargin-bottom来设置元素的外边距,但随着书写模式特性的出现,这些物理特性,比如上、右、下和左的概念已经失去了它们的意义。特别是随着越来越多的Web开发人员要处理国际化业务,那么以前的物理特性已经无法满足业务的需求。换句话说,为了具有不同编写模式的多种语言设计页面时,开发人员必须跨多个元素分别调整这些物理属性,这也成了Web开发者的噩梦。幸运的是,CSS的逻辑属性的出现,可以让开发者根据书写模式来维护布局的完整性。即,根据内容的语义顺序进行动态更新。今天这篇文章,我们将和大家一起来探讨CSS的逻辑属性。

图解CSS: CSS中的函数

一直以来大家都不把CSS当作一门编程语言,是因为他不像其他和程序语言一样具有程序语言的特性,比如变量、函数、逻辑运算等。但随着CSS不断的变革,CSS也越来越像一门程序语言,比如CSS也有变量、逻辑操作和函数等特性。虽然说这些特性不像其他程序语言那么强大,但他实实在在的在变化,而且有了一定的进步。今天主要和大家来聊CSS中的函数。

聊聊min(),max()和clamp()函数

CSS函数中的min()max()clamp()CSS值和单位模块第九部分,它们常被称为比较函数。这几个函数并不是什么最新的特性,早在2018年年底就有浏览器开始支持它们,今年4月份Firefox也开始支持这几个函数,这也意味着现在所有主流浏览器都支持这些函数。它们最大的作用就是可以为我们提供动态布局和更灵活设计组件方法。简单地说,这几个函数可以用来设置元素尺寸,比如容器大小,字号大小,内距,外距等。在这篇文章中,我将用一些示例和大家一起来探讨这几个函数在实际中的使用,希望能更好的帮助大家理解它们。

CSS的视觉效果

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

响应式网格布局

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

CSS实现圆形头像效果

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

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

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

图解CSS: CSS 颜色

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

CSS中auto值你知多少

试问一下,你可知道CSS中有多少个属性呢?说实在的还真答不上来。根据 CSS Reference 统计来看,差不多有200个属性(不包括浏览器自带的私有属性)。在这些CSS属性中,很多属性的值是关键词 auto,比如我们熟悉的marginpaddingoverflow等。虽然他们的值都可以取值auto,但是差别却很大。CSS就是这么的神奇,充满魔性,如果不了解的话,会无声无息地将你带入坑中。另外一点,搞懂CSS中会让你很兴奋,至少我是这样的。今天就和大家一起来聊聊auto

聊聊CSS中文本下划线

在Web中给文本添加下划线常常出现在<a>链接的文本上,早期一般使用text-decoration属性给文本添加下划线、删除线等。除了text-decoration之外,CSS还有很多技术方案可以给文本添加下划线效果,比如border-bottombox-shadowbackground-image等。对于Web开发者而言,更庆幸的是,CSS还有更多的,更灵活的特性实现文本下划线的效果。在这篇文章中,将和大家一起聊聊CSS中其他的特性怎么实现一个更有创意的效果。

页面

返回顶部