text-shadow

CSS实现字体内阴影

上篇 像Photoshop一样地使用CSS 讲到PS和CSS的关系日趋紧密。但是我遗漏了一些,那就是字体的阴影效果的实现。对于投影,text-shadow 能很好的满足,但是如果是字体的内阴影或内发光,又该如何?熟悉CSS3 text-shadow 的朋友都知道,text-shadow 并没有类似 box-shadow 的 inset 值来表示内外阴影,所以虽然 text-shadow 虽然也支持多阴影,但在内阴影方面却无能为力。 但真的是这样吗?先看看下面的字体效果(IE10+,以及其他所有浏览器,如果你是通过RSS,请到我的博客查看效果)—— SwordAir.…

像Photoshop一样地使用CSS

无论是作为前端,还是作为设计师,应该对下面这个界面颇为熟悉。 Photoshop的图层样式,恐怕是网页设计里最常接触的操作界面之一,因为传统Web设计很大程度上就是图层的样式层叠。很多年前,我还是一个蹩脚的设计师的时候,就常常看那些设计教程里大段大段的关于图层样式调整的描述,所以直到现在即使自己成了前端,但那些样式的调整都历历在目。而现在,如果用一个前端的眼光来看待Photoshop的图层样式,是可以把层的概念和样式直接映射到代码里的。 CSS究其本质,无非是一种描述性语句,与我们操作GUI的界面而言其实没有什么太多不同:选项和参数组成了完整描述使得浏览器能准确地反映出来。随着CSS3的普及,大部分的图层样式就能直接对应于CSS代码,而不需要我们再去切图。 如你所想,投影、内阴影、外发光、内发光,乃至斜面浮雕和光泽,都部分或全部的由 box-shadow 模拟出来。…

Chrome中的text-shadow

text-shadow作为CSS3里被现代浏览器支持最早、也是最广的属性,我们对它已经非常熟悉。现代浏览器除了IE9之外,全部无前缀支持text-shadow。和box-shadow类似,但远没有box-shadow那么复杂。它的作用只是对文本添加阴影: text-shadow: 2px 2px 3px blue; 其用法有大致上有两种,一种是在浅色背景上应用深色阴影凸显出文字的层次。另一种,就是在深色背景上使用浅色阴影创造出类似浮雕的内嵌的效果。最后用的比较少的,就是单纯的雾化文本,也就是X和Y的偏移设为0——不过这样对文本的可读性没什么好处,也没什么技术含量,所以完全不值得提倡。淘宝曾在首页的热卖单品区单纯的使用text-shadow雾化文本,但现在已经移除了这种蛋疼的效果。 我并不打算花时间展开text-shadow,因为这个属性相当简单,所以text-shadow本身并不是本文的重点。这里要写的是:text-shadow在Chrome下的bug以及关于这个bug的一些有趣的事。…