以图明志

CSS

用CSS模拟魔兽世界技能冷却的效果

巧用div的边框厚度实现这种效果
显然这种效果不复杂,一张背景图片,加上前面带有透明度的多边形图层,在脚本控制下就可以转起来了。但问题在于用什么方法来构建这个多边形?在IE下可以用VML,其他浏览器可以用Canvas等等。虽然行的通,但都不是最简单的。仔细分析下,该效果本质就是若干个三角形拼接而成。而三角形,如果你熟悉CSS2的话,一定在哪个地方见过。。。

CSS

CSS实现放大镜/狙击镜效果

放大镜或是狙击镜那样的效果
图片放大,这是一个比较容易的效果了。当然,今天说的可不是简简单单的在一个框里放大,而是一个圆。就像放大镜或是狙击镜那样,只有圆圈里的放大,圈外的当然还是原来的图片。这是不是很不可思议? 当然不是。做过Flash的也许会脱口而出:套个蒙版就是了。可惜CSS不是Flash,没有那一套。我们只有从CSS里面慢慢挖掘。

CSS

你必须知道的一些CSS经典技巧

你知道多少个呢?
CSS字体属性简写规则,如何同时使用两个类,关于CSS border的缺省值,图片替换技巧,CSS box模型的另一种调整技巧,块元素居中对齐,用CSS来处理垂直对齐,直通到屏幕底部的背景色等等。只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。

CSS

十个便捷的CSS技巧

更加深刻去理解CSS
css 字体简写规则,同时使用两个class,css中边框(border)的默认值,!important会被IE忽略,图片替换的技巧,css盒模型hack的另一选择,将块元素居中,使用css实现垂直居中,容器内的css定位,延伸至屏幕底部的背景色。

CSS

一些CSS常识与经典技巧

很值得参考的经验谈
不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。无边框。推荐的写法是 border:none;,哈哈,我一直在用这个。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。
1 / 1 首页 < Prev 1 Next > 尾页 页码: