CSS3

学习CSS Grid

CSS Grid是一个强大的工具,它允许在Web上创建二维布局。这一篇学习CSS Grid的指南,通过图形的方式帮助您更好的理解和学习CSS Grid。花时间整理和阅读这篇文章都是非常有意义的。我们要特别感谢Mozilla开发人员W3C规范中有关于CSS Grid的资源。同时也需要特别感谢@Jen Simmons@Rachel Andrews两位女士,她们是CSS Grid的主要贡献者,可以说要是没有她们,就没有今天的CSS Grid。

Web中如何实现纵横比

Web发展到现在,已经有很大的变化,特别在当前这样的时代,我们面对的设备种类繁多。言外之意,这样的环境之下,Web的页面布局时常会碰到一些缩放比例的控制,特别是针对imgiframeobjectvideoembed等元素的比例缩放。当然,就img元素而言,要实现纵横比例的布局已有多种方案,而且实战性也特别的强,并且在Responsive设计中已使用广泛。

CSS Animations vs Web Animations API

上周,我写了一篇关于如何使用CSS制作bitsofcode logo的动画效果。之后收到一些建议,尝试比较一下CSS动画和Web Animations API。所以今天写了这篇文章。

管理CSS层叠

了解CSS的同学都应该知道,CSS是由Cascading Style Sheets三个单词首字母组成,简单的讲就是层叠样式表。事实上,在CSS中,层叠(也有同学称之为级联)也是一个非常基础,但也是一个非常重要的概念。只有理解了层叠这个概念才能更好的理解和使用CSS中的每一个属性。话又说回来,既然是一个基础概念,懂CSS的同学都知道,那还有必要来说这个吗?那我就得问一下了,你真的懂CSS中的层叠,能使用好CSS的层叠吗?如果你没有这方面的自信,那不仿花点时间来阅读这篇文章。

CSS Grid布局这样玩

自从去年下半年开始,CSS Grid布局的相关教程在互联网上就铺天盖地,可谓是声势浩大。就针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。

是时候开始使用CSS自定义属性

今天,CSS处理器已是Web开发流程中的一个标准。预处理器的主要优点之一就是它们能够使用变量。这可以帮助你避免复制粘贴代码,也简化了开发和重构。我们使用预处理器可以存储颜色、字体和布局等细节——一切我们想使用的CSS都可以。

你真的理解CSS的linear-gradient?

想要在你的网站有一个好看的渐变背景吗?background-image:linear-gradient(red,blue),就能很轻易的实现一个redblue的渐变背景图片。就是这么的简单。感觉老话重提,有点无聊。如果您想了解更多这方面的知识,建议你阅读以前整理过的相关文章。我也推荐css-tricksMDN上的相关文章。

我为什么对原生CSS变量感到兴奋

几周前,CSS变量,更准确的说是CSS自定义属性——发布在Chrome Canary版的Experimental Web Platform Features flag。Chrome的工程师@Addy Osmani首次在推特发布时,遭遇到了惊人的否定敌意怀疑。至少我很吃惊,鉴于我对这个属性是如此兴奋。

聊聊CSS Shapes规范的下一个版本

在前面的教程中,看到了怎么创建CSS Shapes,即在元素定认一个规则图形。里面都是些基础的知识,比如说创建一个圆,然后多行文本围绕这个圆。在这篇文章中,我们将探索一些更复杂的图形,让你的布局不在局限于四四方方的图形中。

CSS制作首字下沉

在杂志排版中,常常能看到首字下沉的效果。在Web的排版中,也常常能看到上图这样的效果。并且常常看到的是首段首字下沉。那么今天这篇文章咱们来聊聊如何使用CSS实现首字下沉效果。早期中,实现首字下沉都是能过伪元素::first-letter来实现。不过值得庆幸的是,在CSS Inline Layout Module Level 3提供了一个新的思路和方案:采用initial-letter

页面

返回顶部