menu

再谈box-shadow

早先,我详细地写过2篇关于 box-shadow 的文章: CSS3 box-shadow 详解(1) 以及 CSS3 box-shadow 详解(2)。但用现在的眼光来看,内容已经有些旧了。趁着这片闲言碎语,对 box-shadow 再做一些补充。

box-shadow 是我最喜欢的CSS3特性之一,它能创建凸显层次的阴影,但却还可以充当很多角色:边框/层叠/渐变/勾线,等等。当前浏览器的支持程度已经非常理想,除了IE8及以下,所有浏览器都已经更新到无前缀的支持——这跟一年前的情况很不同,那时,一些浏览器如firefox实现的 box-shadow 还存在占用空间的bug,Webkit类的模糊算法非常僵硬,随着这一年的发展这一些问题都已被克服。如今存在的问题只有两个,部分移动版浏览器的不支持,以及Opera在多阴影高模糊值时的效率低下。但相信这些问题也都能尽早解决。

Read more... »

CSS实现字体内阴影

上篇 像Photoshop一样地使用CSS 讲到PS和CSS的关系日趋紧密。但是我遗漏了一些,那就是字体的阴影效果的实现。对于投影,text-shadow 能很好的满足,但是如果是字体的内阴影或内发光,又该如何?熟悉CSS3 text-shadow 的朋友都知道,text-shadow 并没有类似 box-shadow 的 inset 值来表示内外阴影,所以虽然 text-shadow 虽然也支持多阴影,但在内阴影方面却无能为力。

但真的是这样吗?先看看下面的字体效果(IE10+,以及其他所有浏览器,如果你是通过RSS,请到我的博客查看效果)——

SwordAir.com
Read more... »

像Photoshop一样地使用CSS

无论是作为前端,还是作为设计师,应该对下面Photoshop的图层样式颇为熟悉。

Photoshop的图层样式,恐怕是网页设计里最常接触的操作界面之一,因为传统Web设计很大程度上就是图层的样式层叠。很多年前,我还是一个蹩脚的设计师的时候,就常常看那些设计教程里大段大段的关于图层样式调整的描述,所以直到现在即使自己成了前端,但那些样式的调整都历历在目。而现在,如果用一个前端的眼光来看待Photoshop的图层样式,是可以把层的概念和样式直接映射到代码里的。

Read more... »

边角阴影渐变

最近看一些网站的时候经常看到边角阴影,所以单独拿出来说说。

比如 Nettuts+ 的设计,主内容区的右上角有非常浅的渐变,并有1px的白色勾线。这些细节设计虽然非常淡,甚至很多人根本不会去注意到这些,但它们累加起来的效果非常出色——不论我们有否发觉,重要的是我们确实受到了这些细节的视觉上的影响。

gradient_gray_corner
Read more... »

响应式Web设计

响应式Web设计(Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局。

虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如:

这些资源,仿佛都是一下子冒出来似的…这要归功于IE9的发布,从而使得主流浏览器上升到全部支持Media Query的程度。

Read more... »

CSS3代码生成器

CSS代码工具界从来没有像现在这么繁荣——随着CSS3的渐渐流行,复杂样式的编写迫切需要有代码的生成工具简化编写的难度和节约时间。于是各种各样的工具在一年间到处开花,现在多到需要自己挑选的地步。本文虽然写的是我自己常用的生成器,但在文中链接里还能找到更多。这些工具不仅帮助我们节省无意义时间的小号,而且对于CSS3新手来说,通过生成器有针对性的学习新属性也不失为一种捷径。

Read more... »

CSS3 box-shadow 详解(2)

人一旦被一些繁杂的事消耗掉精力的话,即使有时间静下心来写篇东西也变得那么的不易啊,呵呵。题外话就不多说了,真没想到这篇早就构思好的东西写了这么久…

阅读本文请使用chrome,Opera或者FireFox浏览器

在上一篇的CSS3 box-shadow 详解(1)里,我从标准的角度出发,详细地写到了box-shadow的标准的方方面面。但毕竟是游戏规则似的细节,读起来恐怕还是没什么味道,按照上次的安排,这篇里不再牵扯标准的任何细节性的东西,主要就是讲实际应用中,box-shadow能做些什么。

Read more... »

CSS3 box-shadow 详解(1)

这段时间确实比较繁忙,所以博客一直都没什么产出:) 前段时间看到一篇《9个你现在可以使用的CSS3属性( 9 CSS3 Properties You Can Use Now )》,描述了当前可以渐进使用的CSS3的新的属性。但实际上由于种种原因,当前能使用的其实远达不到9个这么多。

本文讨论的就是其中之一,box-shadow,而且是从比较细节的角度。既然是详解就必然要写的详尽,于是,写到一半的时候才发觉内容太多,所以就分成了2个章节。这个章节里讨论box-shadow标准的描述,所以你能知道一些非常细节的东西,当然这些东西都没法使用,所以如果你只是想了解怎么使用box-shadow,请跳过这一章,直接阅读我写的《CSS3 box-shadow 详解(2)》,那里我会写记录些常用的或者是有趣的使用方法。

和往常一样,我先是查找了国内已经有人写过的内容避免自己写的和他们的有所冲突。和我之前写 CSS3 Media Query 时的没有多少好文的情况不同,关于box-shadow已经涌现出了很大的一批内容,所以后面的描述中我将援引他们。

Read more... »

word-wrap导致的li额外间隙

有些问题可能很少有机会遇到,前段时间我就在工作中遇到一个由word-wrap引起的兼容问题。因为当 word-wrap:break-word 这种 rule被加到了全局CSS里后,出现问题就显得非常隐蔽,所以排查了不少时间才找到原因。不过这也不算大问题,因为造成这种情况是多种因素的巧合。

Read more... »

Web发展路向何方?

记得是2005年,但也许更早,前端工程师这个职位开始在中国出现。如果再往前推,CSS的发展不过是十几年,HTML也才是个20岁风华正茂的小伙子。现在HTML5和CSS3,带来了诸多新的变革,web发展是日新月异还是略显老态?

Read more... »