SEE Conf 2021!  支付宝体验科技大会

CSS3

CSS秘密花园: CSS 编码技巧

第一篇整理了有关于W3C标准规范的阐述,让大家对W3C组织有了更进一步的了解。今天整理了第二篇文章,这篇文章主要介绍了在编写CSS时有何技巧,在实际编码中如何注重这些细节。比如CSS属性的简写、响应式设计中的一些注意事项以及我们在实际开发中要不要使用CSS预处理器等。

CSS秘密花园:Web 标准是友是敌?

CSS Secrets》是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密。是CSSer值得一读的一本书,经过一段时间的阅读,我、@南北@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。在这篇文章主要介绍了有关于Web标准(W3C)一些科普知识,让刚刚接触的同学对W3C有一个更完整的了解。

高级CSS filters

在iOS系统上常常能看到高斯模糊(Gaussian Blur)效果,而这种效果早期使用CSS来实现是较为痛苦的一件事情。其实,早上2011年,浏览器就开始对CSS filters规范有所支持。也就是说在2011年浏览器就可以实现Filters效果。但这种效果基本上都只运用在SVG上(只有SVG支持Filter效果),而且只有Firefox浏览器支持,并且只能运用在HTML上。这也造就CSS要实现Filters效果是非常蛋疼的一件事情。

CSS中的数量查询

CSS的数量查询是一个先进的概念,对于新手来说可能有点难或者蛋疼。然而,当我们理解清楚了CSS3的伪类选择器,并且能运用自如,那么理解文章介绍的数量查询并不是复杂的事情。而且这样的工具将会越来越多,比如CSS的预处理器和后处理器都具备了这方面的功能。有了CSS的数量查询这个新概念和功能,我们在页面中就可以根据数量来选择到匹配的元素。如果你感兴趣,不仿自己跟着这篇文章尝试一下。你会有更深入的体会。

CSS动画

本文是为帮助您入门和熟悉CSS动画而编写的,使用它们来为您带来基于Web的接口以及为艺术带来生命。虽然W3C的CSS动画规范仍在修订中,但是如今它已经有大量的内容可以供我们使用了。对我而言,CSS动画最令人激动的事情之一是,我们可以非常轻松地使用我们已经熟悉的工具来把它们添加进我们的项目中。如果您已经精通HTML和CSS,您就不需要学习新的语言或插件来为您的项目添加动态效果了。HTML和CSS已经足够,这是一个非常大的加分!无论你只是添加一点点引人注目的设计细节,还是添加非常多的动画,都没有问题。

CSS Blend Modes(Part1)

在现代浏览器中可以使用mix-blend-modebackground-blend-mode属性实现Photoshop中的图层的混合模式。属性值有lightenmultiplyhard-light等,这些属性在CSS中运用效果和Adobe Photoshop效果完全一样。即使每天都在Photoshop中使用它们,但了解混合模式的人相对较少。在这篇文章中,我将介绍基本的混合模式是什么,它们是如何工作的?

纯CSS写的小雨打在窗户上效果

华灯初上,窗外的雨淅淅沥沥飘打在窗户的玻璃之上。站在室内的你,望着雨中的夜色,是不是让你增添几分惆帐。似乎如此的场景只有在诗中才会出现。那么今天我们一起来用CSS技术来描绘这样的一个场景。这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAMLSass

CSS 布局模块

在众多浏览器刚刚支持 CSS 的时候,我就已经开始使用它了,并且应该算是最早采用 CSS 进行页面布局的开发者之一了。那时候,浏览器之间的兼容性虽然不好,但我仍然热衷于尝试层出不穷的新特性。最近几年在 CSS 领域,我们看到了许多重大进展。其中,web 字体、渐变、阴影和媒体查询已经成为了我们日常工作流的必备工具。CSS 布局的未来看起来一片大好。在这篇文章中,我将会介绍 CSS 规范中一些激动人心的布局模块。在未来,我们可以更有效地实现网格布局,更轻松地创建等高列或者均匀分配内容到整个页面。类似 Adobe 的公司往往熟悉布局设计的细节,借助它们的帮助来制定相关规范,我们就能更准确地控制页面在浏览器上的显示方式,同时避免对页面内容的影响。

纯CSS实现内容过滤

内容过滤是一个在Web上常见的一个功能,特别是在电商网站上,为了让用户过滤内容,仅显示符合自己的要求的内容。当初实现这样的一个功能,需要依赖于JavaScript或者jQuery插件来完成,所幸的事,今天我们可以仅使用CSS来实现一个类似的功能,当然比使用JavaScript做的功能简单一些,但这种案例可以拓展我们的思路。感兴趣的同学,不仿自己动手做做。

一个完整的Flexbox指南

Flexbox布局(Flexible Box)模块(目前处于W3C工作草案)旨在提供一个更佳有效的布局方式,更好的控制项目的对齐和自由分配容器空间,即使它们的大小是未知的或动态的。因此得其名"flex"。本文是根据CSS-Tricks整理的一篇《A Complete Guide to Flexbox》和W3C中文兴趣小组翻译的Flexbox规范整理。

页面

返回顶部