50种强大的CSS技术

这是来自SmashingMagazine的又一个CSS相关资源收集文章,事实上,里面有一半多的技巧,帕兰在之前翻译Noupe的101个CSS技术高级应用教程(上)101个CSS技术高级应用教程(下)里面都已经介绍过了。 不过还是全部翻译一个,就当作是复习吧。

CSS技巧

1. Triadic Background Setting with CSS
利用三张背景图片来创造一种错觉上的3D效果,非常的酷. [via Wilson Miner]

CSS-Technique

2. Creative Use of PNG Transparency in Web Design
使用JavaScript和CSS技巧,让PNG透明图片能够IE7或其它一些较老的浏览器支持。

CSS-Technique

3. CSS Server-Side Pre-Processor

一个CSS幻灯片服务器的预处理器

CSS-Technique

4. Advanced CSS Menu

来自Nick.la创建的一个CSS菜单,帕兰看只要这样的CSS列表,基本都能收录到这个效果。

CSS-techniques - Advanced CSS Menu

5. CSS SiteMap

非常直观的CSS网站地图,且利用错觉产生3D效果

CSS-techniques - beTech ? CSS SiteMap ? Oct 3, 2007

6. Styling File Inputs with CSS and the DOM
对input区域的美化,简单实用,同时也证明一件事情: 一个好的网页设计要注重每一个细节。

CSS-Technique

7. A Savvy Approach to Copyright Messaging
Derek Powazek提出的利用一张图片和CSS结合,为你的风容添加一个强有力的版权声明信息。

Screenshot

8. Particletree Category List

一个漂亮的树型分类列表

CSS-techniques - Particletree ? Automatically Version Your CSS and JavaScript Files

9. Advanced CSS Menu Trick
高级的CSS菜单创建技巧,你可以学着创建出各种漂亮效果的CSS菜单

Screenshot

10. CSS hover effect

让所有HTML元素都能像<a>元素那样实现悬浮效果

CSS-techniques - CSS hover effect | Veerle's blog

11. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

创建一个动态亮高的表格,效果非常酷,类似于YOBO音乐播放器的那种效果。

CSS-techniques - Creating a table with dynamically highlighted columns like Crazy Egg's pricing table

12. A Stripe of List Style Inspiration
一个个性的CSS列表风格

CSS List Style

13. Rediscovering the Button Element
CSS-techniques - Particletree ? Rediscovering the Button Element

14. Dynamic CSS With Variables
Geoffrey Grosenbach为你讲解如何整合CSS应用到 Ruby on Rails.

Dynamic CSS

15. Hyperlink Cues with Favicons
为每一外部链接显示一个醒目的图标,来提高链接的点击。

CSS-techniques - Drop Shadow CSS

16. A CSS styled table version 2

又一个CSS风格的表格

CSS-techniques - A CSS styled table version 2 | Veerle's blog

17. CSS Step Menu
一步一步的设计之旅。而到底有多少要看你想要创建的东西的复杂程度。

Stepmenu

18. Creating bulletproof graphic link buttons with CSS | 456 Berea Street

用CSS创建出超酷效果的点击按钮

CSS-techniques - Creating bulletproof graphic link buttons with CSS | 456 Berea Street

19. Iconize Textlinks with CSS
给网站中不同的文档指定一个不同的图标。

Screenshot

20. Better Ordered Lists (Using Simple PHP and CSS)
创建一个有序列表的文章显示效果。

Screenshot

21. Circular Menu with CSS
介绍如何生成一个漂亮的圆形导航菜单

Circular Menu with CSS

22. CSS Dock Menu

CSS的Mac Dock 鱼眼菜单效果

CSS-techniques - CSS Dock Menu

23. Digg-like navigation bar using CSS
教你如何创建一个类似Digg顶部的CSS导航系统

Screenshot

24. 13个强大的Javascript 和 CSS菜单
包括13个高级的CSS菜单。

CSS Menu

25. CSS Pricing Matrix
一个CSS表格的延伸应用,你可以把它弄的尽可能漂亮和强大。

CSS Pricing Matrix

26. CSS List Expander
CSS和脚本结合生成的一个隐藏/显示控制列表。

List Expander

27. How to create VISTA style toolbar with CSS
这个教程将会你如何利用CSS创建一个Vista风格的工具栏。

Vista CSS Toolbar

28. Fade Out Bottom
利用对一个层的CSS定位和一张背景图片,实现层的渐变淡化效果。

CSS-techniques - Fade Out Bottom

29. Scrollovers - A New Way of Linking
大家都熟悉悬停效果。这是一个基于CSS + JavaScript的技术的技术,它创造一个新鲜的模式。

Scrollovers

30. How to Style an A to Z Index with CSS

如果利用CSS样式化A到Z字母

CSS-techniques - How to Style an A to Z Index with CSS | Smiley Cat Web Design

31. CSS List Boxes
用一个简单的无序清单生成列来,最终拿 来展示项目、产品或是服务。

List Boxes

32. How-to create a “Table of Contents” Navigation
531的一个简单教程,通过几条线,几个链接,让你的列表既简洁又美观。

Table of Contents

33. CSS Recipe for Success

CSS-techniques - CSS - A Recipe for Success

34. Partial Opacity

CSS-techniques - Stu Nicholls | CSSplay | Partial Opacity

35. Simple Round CSS Links (Wii Buttons)

CSS-techniques - Simple Round CSS Links ( Wii Buttons )

36. How to make sexy buttons with CSS

CSS-techniques - How to make sexy buttons with CSS

37. CSS Pull Quotes

CSS-techniques - CSS Pull Quotes | Design Meme

38. Drop Shadow CSS

CSS-techniques - Drop Shadow CSS

39. CSS Speech Bubbles
简单的自定义代码服务,所生成的代码严格符合 XHTML 1.0 标准 ,可以运行在大多数浏览器。

Screenshot

40. CSS Double Lists

CSS-techniques - CSS: Double Lists | Mike’s Experiments | MikeCherim.com

41. Perspective Text with CSS

CSS-techniques - Mike’s Experiments: Archives Page | A Record of My Madness | Powered by the GreenBeast CMS RSS Newsmaker - -

42. Better Email Links: Featuring CSS Attribute Selectors
教程如何生成一个优秀的Email链接。其支持Internet Explorer 6 and 7.

Screenshot

43. CSS: Menu Descriptions
这个功能非常实用的,如果你想让用户访问和在你的网站上添加内容。

Screenshot

Further Techniques

44. CSS Transparency Settings for All Browsers

CSS-techniques - CSS Transparency Settings for All Browsers

45. Time Sensitive CSS Switcher
CSS风格切换脚 本

46. Custom Reading Containers
aAmazing little script允计用重点主任何内容。

47. Eric Meyer’s CSS Reset

CSS-techniques - CSS Tools: Reset CSS

48. PNG Overlay
Create a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF so users can upload photos without having to worry about using any graphics program to apply filters, plus it saves time.

49. Turning Lists into Trees

CSS-techniques - odyniec.net

50. Create Resizable Images With CSS

CSS-techniques - Create Resizable Images With CSS | Smiley Cat Web Design

转载于:https://www.cnblogs.com/CB/archive/2008/05/25/1206798.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值