50种强大的CSS技术
这是来自SmashingMagazine的又一个CSS相关资源收集文章,事实上,里面有一半多的技巧,帕兰在之前翻译Noupe的101个CSS技术高级应用教程(上)和101个CSS技术高级应用教程(下)里面都已经介绍过了。 不过还是全部翻译一个,就当作是复习吧。
CSS技巧
1. Triadic Background Setting with CSS
利用三张背景图片来创造一种错觉上的3D效果,非常的酷. [via Wilson Miner]
2. Creative Use of PNG Transparency in Web Design
使用JavaScript和CSS技巧,让PNG透明图片能够IE7或其它一些较老的浏览器支持。
3. CSS Server-Side Pre-Processor
一个CSS幻灯片服务器的预处理器
来自Nick.la创建的一个CSS菜单,帕兰看只要这样的CSS列表,基本都能收录到这个效果。
5. CSS SiteMap
非常直观的CSS网站地图,且利用错觉产生3D效果
6. Styling File Inputs with CSS and the DOM
对input区域的美化,简单实用,同时也证明一件事情: 一个好的网页设计要注重每一个细节。
7. A Savvy Approach to Copyright Messaging
Derek Powazek提出的利用一张图片和CSS结合,为你的风容添加一个强有力的版权声明信息。
一个漂亮的树型分类列表
9. Advanced CSS Menu Trick
高级的CSS菜单创建技巧,你可以学着创建出各种漂亮效果的CSS菜单
10. CSS hover effect
让所有HTML元素都能像<a>元素那样实现悬浮效果
11. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table
创建一个动态亮高的表格,效果非常酷,类似于YOBO音乐播放器的那种效果。
12. A Stripe of List Style Inspiration
一个个性的CSS列表风格
13. Rediscovering the Button Element
14. Dynamic CSS With Variables
Geoffrey Grosenbach为你讲解如何整合CSS应用到 Ruby on Rails.
15. Hyperlink Cues with Favicons
为每一外部链接显示一个醒目的图标,来提高链接的点击。
16. A CSS styled table version 2
又一个CSS风格的表格
17. CSS Step Menu
一步一步的设计之旅。而到底有多少要看你想要创建的东西的复杂程度。
18. Creating bulletproof graphic link buttons with CSS | 456 Berea Street
用CSS创建出超酷效果的点击按钮
19. Iconize Textlinks with CSS
给网站中不同的文档指定一个不同的图标。
20. Better Ordered Lists (Using Simple PHP and CSS)
创建一个有序列表的文章显示效果。
21. Circular Menu with CSS
介绍如何生成一个漂亮的圆形导航菜单
22. CSS Dock Menu
CSS的Mac Dock 鱼眼菜单效果
23. Digg-like navigation bar using CSS
教你如何创建一个类似Digg顶部的CSS导航系统
24. 13个强大的Javascript 和 CSS菜单
包括13个高级的CSS菜单。
25. CSS Pricing Matrix
一个CSS表格的延伸应用,你可以把它弄的尽可能漂亮和强大。
26. CSS List Expander
CSS和脚本结合生成的一个隐藏/显示控制列表。
27. How to create VISTA style toolbar with CSS
这个教程将会你如何利用CSS创建一个Vista风格的工具栏。
28. Fade Out Bottom
利用对一个层的CSS定位和一张背景图片,实现层的渐变淡化效果。
29. Scrollovers - A New Way of Linking
大家都熟悉悬停效果。这是一个基于CSS + JavaScript的技术的技术,它创造一个新鲜的模式。
30. How to Style an A to Z Index with CSS
如果利用CSS样式化A到Z字母
31. CSS List Boxes
用一个简单的无序清单生成列来,最终拿 来展示项目、产品或是服务。
32. How-to create a “Table of Contents” Navigation
531的一个简单教程,通过几条线,几个链接,让你的列表既简洁又美观。
34. Partial Opacity
35. Simple Round CSS Links (Wii Buttons)
36. How to make sexy buttons with CSS
37. CSS Pull Quotes
38. Drop Shadow CSS
39. CSS Speech Bubbles
简单的自定义代码服务,所生成的代码严格符合 XHTML 1.0 标准 ,可以运行在大多数浏览器。
40. CSS Double Lists
42. Better Email Links: Featuring CSS Attribute Selectors
教程如何生成一个优秀的Email链接。其支持Internet Explorer 6 and 7.
43. CSS: Menu Descriptions
这个功能非常实用的,如果你想让用户访问和在你的网站上添加内容。
Further Techniques
44. CSS Transparency Settings for All Browsers
45. Time Sensitive CSS Switcher
CSS风格切换脚 本
46. Custom Reading Containers
aAmazing little script允计用重点主任何内容。
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.