霍者博客

欢迎访问CSS3最新发布

霍者教你如何利用CSS写一个等边六边形

众所周知,一般情况下div所表现出来的形态是一个矩形,如果给它添加border-radius属性,可以让它成为一个圆角矩形或者是圆形,但是如果希望div表现出更多的形态来呢?

那么霍者就来讲讲如何用CSS来写一个六边形。

大家首先来看一下,一个六边形,拆解开来的话,就是一个矩形加左右两个三角形。

...

CSS3内容处理-插入连续的序号

如果我们想要实现如下图的这种列表,无疑最先想到的是ol标签,通过CSS定义list-style-type: decimal-leading-zero;即可;

但是它有的时候并不能满足我们的需求,比如一篇文章中有好几个大标题,每个标题前面均有连续的编号(可以理解为标签无规律),我们将如何实现?

...

轻松玩转CSS3中的动画技术transform

虽然CSS3在兼容性方面不尽如意,但是,在一些动画效果方面,为广大前端开发人员带来了福音。既可以实现炫酷的渲染效果,又摆脱了必须使用脚本语言的弊端。在CSS3中,可以利用transform功能的缩放 scale、旋转 rotate、移动 translate来实现文字或图像的旋转、缩放、倾斜、移动。

1. scale(x,y) 对元素进行缩放

X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数

Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。

...

CSS3中字体平滑处理和抗锯齿渲染

在围观Drupal官方主题的时候,发现了一个有意思的非标准CSS选择器-webkit-font-smoothing,于是上手把玩了一番。如何使用CSS3字体平滑显示呢

要知道,W3C对CSS中字体的抗锯齿渲染是有过考虑的,如font-smooth,不过可能由于不同操作系统以及浏览器内核对字体的渲染存在差异,总之,他并没有被选入Web标准。但是WebKit还是保留了一套自有的非标准选择器来实现对抗锯齿效果的支持,来让字体显示的更加平滑。

-webkit-font-smoothing主要有一下三个属性:

...