CSS语法简单学习

发表于

有这个博文的原因是,最近想做一个CSS的工具,至于工具的作用,先暂时不公开了,有兴趣的朋友可以邮件单独和我联系讨论下。为了这个工具,首先需要有一个CSS解析器,我称之为CSSParser,同时这个解释器和普通的基于Lex的词法分解+LR1的语法分析不同,他并不按标准给定的语法进行严格的检查,而仅仅分解出CSS中的各个元素。 为此,第一步自然是对CSS的语法有一个简单的了解,无论我的解释器是否按标准的语法进行解释,至少CSS语言的组成部分是必须明确的。此文也谨作总结之用。 整体组成 在CSS中,顶层元素被称为Rule,而CSS中的Rule又分为2类:CSSStyleRule和CSSAtKeywordRule。 CSSStyleRule是最基本的,即我们最常见的,由选择器+属性+

美丽又悲剧的text-shadow

发表于

text-shadow,CSS3的好东西之一,给文字加上阴影,这让9x年代喜欢在Word里到处加艺术字的本人仿佛又找回了童年,那个凭着一台电脑在一群小屁孩中间如鱼得水的童年。 她的美丽 text-shadow如果用得好,确实可以塑造出相当不错的效果,下图是著名博客考据癖上的默认文字效果: 使用较淡的色彩(#e9e9e9)以及恰到好处的阴影(#fbfbfb 0 1px 0)制造出一种雕刻一般的感觉,增加了字体的锐度,增添了视觉的享受。 她的悲剧 只是很可惜,如果你是一个喜欢把正在看的段落涂黑的人,那么你就悲剧了,请看: 这已经不能用“糟糕”

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

发表于

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