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自定义属性在组件开发中的使用

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

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>中的故事。

图解CSS: CSS 颜色

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

CSS中auto值你知多少

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

聊聊Web中的下拉选项的事情

在Web的开发中,对于下拉选项的称谓各有不同,比如下拉菜单,下拉选择框等等。不同的场景之下,采用的方式也有所不同,比如在表单中会使用<select>元素,在自动输入框时会使用HTML的<datalist><input>结合使用。而表单中的控件在Web中是件复杂的事情,特别是CSS样式方面更是如此。在这篇文章中,我们就一起来聊聊Web下拉选项相关的事情。

页面

返回顶部