CSS

美丽又悲剧的text-shadow

text-shadow,CSS3的好东西之一,给文字加上阴影,这让9x年代喜欢在Word里到处加艺术字的本人仿佛又找回了童年,那个凭着一台电脑在一群小屁孩中间如鱼得水的童年。 她的美丽 text-shadow如果用得好,确实可以塑造出相当不错的效果,下图是著名博客考据癖上的默认文字效果: 使用较淡的色彩(#e9e9e9)以及恰到好处的阴影(#fbfbfb 0 1px 0)制造出一种雕刻一般的感觉,增加了字体的锐度,增添了视觉的享受。 她的悲剧 只是很可惜,如果你是一个喜欢把正在看的段落涂黑的人,那么你就悲剧了,请看: 这已经不能用“糟糕”来形容了,我相信这样的字看上几百行,我一定能享受到久违的晕车的感觉,并将一整天吃下去的东西都还给大地母亲。 可以看看你现在使用的浏览器是不是还有这样的问题: 缘由 其实这一切不是text-shadow这属性的错,

CSS

用CSS3制作鼠标悬浮渐变着色效果

CSS3虽然还没有被广大浏览器所兼容,甚至A级浏览器也只是通过私有属性给予有限的支持。但是在渐进增强的理念下,有选择性地使用CSS3可以得到不错的效果,前提是保证在不支持CSS3的浏览下也可以获得最基本的样式。 本文会使用CSS3 Transition来制作特效,不使用任何的Javascript,最终效果大致如下: 一张黑白的图片,当鼠标悬浮在图片上时,慢慢变成彩色;鼠标移出时,逐渐恢复黑白。 东西简单,学习和记录是主要目的。这个功能可以用作一切使用背景图片的功能,诸如按钮、链接等都可以起到比较好的效果。 准备材料 为了完成着色的功能,首先需要一张黑白的图片,和一张彩色的图片,并且保证这两张图片可以完全重叠,这个很容易做: 得到一张彩色的图片,使用Photoshop打开。 选择菜单中的Image – Adjustment – Desaturate,也可以通过快捷键SHIFT+CTRL+U完成。