CSS

CSS Houdini和CSS Paint API

很长时间以来,我都没有对浏览器新的技术感到兴奋。Houdini是一个强大的项目,它给开发者提供了比以往任何时候都还要更强大的CSS能力。这个项目的第一部分是CSS Paint API。这篇文章将解释为什么Houdini会如此令人兴奋,然后再告诉你如何开始使用CSS Paint API。

使用CSS Clip Path创建交互效果

你是否还记得小时候剪过杂志上的照片,把它们粘在纸上,用来制作自己的拼贴画?这篇文章是关于使用CSS的clip-path属性,用来实现Web上裁剪图片的效果。将讨论如何进行切割,以及如何使用这些镂空部件来制作一些有趣的效果。

网格项目的宽高比

之前,我们讲了宽高比盒子,谈到一个技巧,就是运用填充来随心所欲地调整一个元素的长宽比例。这个技巧并不是经常能用到的,因为修整一个元素的高度是自找麻烦,但也不是没有这种情况出现。要降低这一风险,有一种方法,那就是伪元素(Psuedo Element)策略,让伪元素顶住其上一层元素,撑起纵横比。但是如果元素里的内容将元素顶得更高,那元素也会变得更高,纵横比就完蛋了。

CSS的display:contents

没错,display: contents要在Blink引擎WebKit引擎里成为默认样式了,可能会随着Chrome浏览器65版与Safari浏览器11.1版一起发布。火狐浏览器从37版开始就有了这一功能,现在要轮到这两个浏览器了。这样,唯一没有这个功能的就剩下Edge浏览器了,大家一起投票提要求吧

理解CSS布局和BFC

CSS布局中有一些概念,一旦理解了这些概念,就能真正的提高你的CSS能力。这篇文章主要介绍的是关于块格式化上下文(Block Formatting Context),也就是大家俗称的BFC。你可能从未听说过这个术语,但只要你曾经使用过CSS布局,你就可能知道它是什么。理解BFC是什么,它有什么功能,以及如何创建一个BFC是非常有用的,这些能帮助你更好的理解CSS布局。在这篇文章中,我将会通过几个很熟悉的示例来解释BFC。我还会介绍一个新的display的值,当你理解了BFC是什么的时候,你才能了解为什么需要这个值。也就能更好的理解它的真正意义。

灵活的overflow

说到overflow对于CSSer而言并不会陌生,用来控制内容溢出的现象。而很多时候我们还会使用text-overflow来控制内容溢出的显示。一般是直接截取,另一种是截取之后让文本后面带有三个点的省略号。不过有意思的是,我们今天要说的灵活overflow

美化表单的CSS高级技巧

表单一直以来对于CSSer来说都是一件不易的事情,很难用CSS处理好表单要样式。但是有一些很少使用的选择器,却赋予我们不一样的能力,可以让我们很好的控制input元素和其周边元素的样式,而且是根据功能来调整不同的样式,这些往往都是通过JavaScript辅助完成的。而这些选择器中有一些是较新的,而另一些是老的选择器,只不过没有过多的被重视,甚至没什么人使用。以至于这么强大的功能就这样被忽视。

使用CSS Houdini制作平滑的圆角

最近,我在Twitter分享了一篇关于用户界面的文章。我喜欢Illusions,但这对我来说是一个新的东西:一个修正的圆比几何图形看起来更圆!圆角矩形也是这样。令人惊讶的是,我还发现,自iOS7以来,苹果一直在使用这个技巧。在数学上,它被称为Lamé Curve or Superellipse

编写模块化的CSS:CSS文件组织结构

在之前两篇文章中我们已经讨论过如何使用BEM和Namespace来编写模块化的CSS。这篇文章中,我想避开把CSS选择器作为CSS文件结构和组织的依据的方法。如果你思考过关于什么是文件组织的最佳实践,或者怎样能够在项目目录中更容易的找到你要找的CSS文件,或者一个文件应该是多大或者多小合理等问题,那么这篇文章就是为你写的。让我们先看下你一般组织资源的两种方法。

编写模块化的CSS:命名空间

上周,我分享了如何使用BEM创建一个合理的CSS架构。 虽然BEM很棒,但它只是解决方案的一部分。 还有另一部分我还没有提到 —— 命名空间。在今天的这篇文章中,我想与大家分享一下为什么只用BEM还是不够的,以及如何使用命名空间来弥补一些不足。

页面

返回顶部