30个精选的CSS技术和实例

1.Hoverbox 图片集

一个纯净的基于CSS的图片集,鼠标悬停缩略图就会显示放大效果。
CSS-实例

2.高级CSS菜单

一款很有创意且复杂的CSS导航方案。
CSS-实例

3.滑动影集

手风琴效果的影集,悬停便可拉伸图片。
CSS-实例

4.Lightbox幻灯片

题为”Supercharge your image borders“的文章中的一部分展示了如何使用CSS样式让图片变得更有意思。
CSS-实例

5.图片的阴影效果

在A List Apart上的一个关于图片效果Demo的讨论文章“CSS Drop shadows“.
CSS-实例

6.跨浏览器多页式影集

悬停标签改变分类,悬停缩略图显示放大图。
CSS-实例

7.CSS照片放大

使用简单的图片和background-position属性来进行调解。
CSS-实例

8.CSS gallery layout—smells like a table

模仿表格布局,但使用的是列表。图集是流式宽度。
CSS-实例

9.Sticky Footer

仅使用了很少XHTML的静态页脚。
CSS-实例

10.whatever: hover

模仿Windows开始菜单的CSS导航菜单。

11.纯CSS手风琴效果

使用div和:hover伪类的手风琴效果,这个效果可以垂直显示也可以水平显示。
CSS-实例

12.使用PNG和背景色的可扩展按钮

CSS-实例

13.Pushbutton Links

链接在不使用图片的情况下看起来像个按钮。
CSS-实例

14.含固定Header的可卷动表格

表格的标题被固定的优秀长表格。
CSS-实例

15.CSS内容遮盖

当你悬停在图片上时,div容器会显示更多文字。
CSS-实例

16.CSS样式表格版本2

一个使用背景图片且非常漂亮,被语义化标记的表格。
CSS-实例

17.PNG遮盖

另一种为图片添加圆角的方法。(圆角、边框、阴影)
CSS-实例

18.利用CSS为超链接添加提示

关于为不同类型的链接添加图标的简单教程。
CSS-实例

19.简单的CSS圆角边框

仅适用了一张图片和很少的几行代码及标记。
CSS-实例

20.Sitemap Celebration

使用嵌套列表的树形导航,很适合网站地图页面。

21.简单的跨浏览器幻灯片

不使用JavaScript实现透明度技巧(但是以不符合XHTML验证为代价)
CSS-实例

22.圆角2

流式跨度和高度的圆角div。
CSS-实例

23.使用背景图片百分比来创建图表

条线图使用列表<li>。
CSS-实例

24.CSS柱状图:实例

3款柱状图实例:使用div和列表标签的”基本CSS柱状图”、”复杂CSS柱状图”、”垂直CSS柱状图”。
CSS-实例

25.动态翻转简单头

箭头会平滑的跟随鼠标移动,没有使用一丁点JavaScript和gif动画。
CSS-实例

26.基于CSS的表单模板

CSS-实例

27.CSS图片文本结合技巧

使用了空白div来让文本能围绕背景图中的图像显示。
CSS-实例

28.使用CSS实现淡入效果的图片

这个实例使用透明度设置和简单的图片逐渐在文字上方淡入图片。
CSS-实例

29.纯CSS弹出效果

一个在IE5(Mac)上也能正常工作的弹出技巧。
CSS-实例

30.使用CSS实现文本渐变效果

使用背景图片遮盖,和一个空的span标签,还有position: absolute声明来实现文本的渐变效果。
CSS-实例

CSS-实例

CSS-实例

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2009.07.28

    Pligg CMS Version 1.0.0 正式版+Pligg 汉化包

    Pligg CMS 原来的名字是Pligg …

  2. 没有图片

    2009.10.26

    Mozilla Weave -Mozilla官方发布书签同步插件

    以前一直使用Xmarks书签同步工具来存储我…

  3. 没有图片

    2009.08.26

    DedeCMS中的 [field:imglink/] 图片大小自定义方法

    新版本的 DedeCMS 5.5 已经发布,…

  4. 没有图片

    2010.12.01

    WordPress日志、分类批量管理插件:Batch Cat

    本来菠萝筐的日志分类相当多,最多的时候达到2…

  5. 没有图片

    2012.06.14

    WordPress页面调用相关参数

    平时大家关注的Wordpress日志的调用更…

  6. 没有图片

    2010.04.21

    IE下全站变灰代码

    因为512汶川地震、414玉树地震,很多站长…

评论

  1. 果然有用 2010.08.01 9:05下午

    对你的导航比较感兴趣,可以共享的话请发我邮箱,谢谢啦~ 支持一下~

  2. 搜博客 2010.03.27 2:28下午

    .高级CSS菜单
    这个我在一个博客上看到过!
    .-= 搜博客的最新日志:菠萝筐 =-.

  3. Jclyn 2010.01.30 4:12下午

    我要好好学
    啊啊啊
    发奋
    .-= Jclyn的最新日志:离·启 =-.

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!