CSS3

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规范整理。

[转载]纯clip-path打造的3D模型渲染器

species-in-pieces网站的效果让前端人员眼前一亮,我在微博上发了这样的效果,聚集了不少同学的讨论。在大知乎上也有很多同学关注这个话题@拴萝卜的棍子前端乱炖上发表了一篇文章,剖析了相关的技术。值得大家一读,特将此文转载到小站。

Flexible boxes更加优雅的Web布局

Flexible boxes layout是W3C为了更好的在网页中排版和布局而设计出来的一个模块。它用来可以处理更加复杂的布局。它本质是盒模型的延伸,它可以进一步去规范容器中子元素盒模型之间的相对关系。

[转载]网页动画的十二原则

作为前端的设计师和工程师,我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画,但我们经常做的东西不会超过这些。动效是一个有助于访客和消费者理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。

页面

返回顶部