CSS可以让网页设计中实现很多丰富和独特的技术. 今天,我们就围绕着CSS技术展示全面的探讨, 为你找寻一些最具创造性的CSS技术和使用技巧. 绝对值得喜欢网页设计的你一看. 此文由帕兰翻译自Noupe的Using CSS to Do Anything: 50+ Creative Examples and Tutorials.
样式化列表
神奇的
Better Ordered Lists (Using Simple PHP and CSS)- 这是一个示例, 教像如何使用PHP和CSS创建一个传说中的有序文章列表, 还且这个编序号码还是首字下沉的效果.
Style Your Ordered List- 这是一个快捷教程, 教你如何使用有序列表
- 和段落标记
- Live DemoView it Here
- Download zip file
- 元素实现的日历.
- Live DemoView it Here
表格和表单元素
Datasheet-style form using HTML and CSS- 使用HTML,CSS 和JavaScript 创建一个数据库风格的档案记录,
Styling File Inputs with CSS and the Dom - 档案上传 ()的设计
- Live DemoView it Here
- Download zip file
Better Web Forms: Redesigning eBay’s Registration
Uni-Form- Uni-Form试图以规范的形式标记（ XHTML中）和CSS ， “模块化” ，所以即使只有普通的基本知识，这些技术可以得到很好看，结构良好，高度自定义，语义，无障碍和实用表单
底部设计
A CSS sticky footer that just works- 用短短的几个简单的CSS和HTML标记，你可以得到一个置顶的类似Dock的底底部菜单。且它兼容IE 5+，Firefox ， Safari和Opera 。
MAKING YOUR FOOTER STAY PUT WITH CSS- 如何创建一个屏幕底部的dock排列按钮
有关图像过渡的新创意
Create Custom Search Bars - 使用CSS来实现图像过渡
HR Image Replacement with CSS- 如何使用一张图片来替换HR标签且兼容各大主流浏览器.
Image Sprite CSS妖精技术
关于CSS Sprite技术, 请查看帕兰映像之前的一些介绍:
CSS Sprite Generator: CSS妖精生成器
Image Sprite Navigation With CSS- 使用一张”妖精”图片,来实现一个漂亮的导航菜单.
CSS 图像技巧
Create Resizable Images With CSS-这是一项新的CSS技术, 可以让图片随着用户的浏览器的分辨率而自适应大小.
CSS Stamps- 使用CSS的Outline边框来实现邮票外观的照片相框.
Image Captions Generated with CSS and JavaScript- 使用CSS和Javascript实现的一个非常漂亮的图片说明效果.
Cross-browser semi-transparent backgrounds- 这是一个简单的解决IE6不支持PNG透明图片的方法.
CSS Rollovers-学习如何使用CSS创建一个图片悬浮过渡的特效.
文本和链接特效
“Checkmark” Your Visited Links with Pure CSS- 这个教程将你如何为链接创建一个醒目的提示标记, 比如在点击后前链接会有一个打勾的背景图片, 而点击前则是红色.
Simple Round CSS Links -使用a元素和按钮来实现漂亮的链接特效.
Pure CSS Popups- 纯CSS实现的文本显示和消失效果
导航菜单
Perfect pagination style using CSS- 这个教程将告诉你如何使用CSS创建一个漂亮的分类标记
VISTA style toolbar-利用CSS创建一个VISTA风格的工具栏
- Live Demoview it Here
- Download codefrom Here
Digg-like navigation bar using CSS- 创建一个DIGG风格的导航菜单
Menu circular en CSS- 如何利用CSS创建一个非常漂亮的圆形环绕菜单, 且每个项目悬浮的时候, 有很好的文本提示效果.
- Live Demoview it Here
了解更多有关导航菜单的CSS应用
9款CSS菜单生成器/含在线CSS导航菜单生成和CSS菜单生成软件
CSS 图像画廊
CSS Image Gallery-一个纯CSS实现的图像画廊
Not so simple photograph gallery- 这个是自称没有比这更简单的摄影画廊应用了
A sliding list click gallery-一个滑动式的标签画廊, 当点击图片的时候, 会产生一个大图片, 且出现详细的文本摘要.
下沉技术
Nice Drop caps with CSS- 使用 :first-letter属性来实现的下沉效果 . 不需要额外的HTML 或Javascript且支持 IE5以上版本的浏览器.
- Live DemoView it Here
Drop Caps- 也是一个非常简单的CSS片段就能实现的首字下沉效果.
- Download codefrom Here
圆角特效
3 Simple Steps in Coding a Rounded Corners Layout- 3个简单的步ZOU就能实现的圆角效果.
- Live DemoView it Here
- Download zip file
One pixel notched corners
- Live DemoView it Here
Auto-Cropping Rounded Corners- 自动裁剪内容区域来实现圆角效果, 不需要额外的HTML代码.
- Download Examplefrom Here
引用
Simple Double Quotes- 这个CSS教程向我们展示如何使用一张引用图片来实现双重的引用效果.
- Live DemoView it Here
- Download zip file
Blockquotes with Image Quotes- 为引用添加一张图片.
值得参考的新兴CSS技术
Pure CSS Animated Progress Bar- 使用纯CSS实现的动画进度栏, 帕兰之前做过专门介绍
- Live DemoView it Here
- Download zip file
Add a “loading” icon to your larger images- 使用CSS来嵌入一张 “loading” 图片,让访问者耐心的等待载入吧
The CSS Text Wrapper - 这个工作可以让你把一段内容区变成各种不规则 的形状.
- Live DemoView it Here
Adding a magnifier to images with CSS and JavaScript
SAC Simple Accessible Charts.
Cross-browser transparent columns-这个教程教你如何创建一个兼容各大浏览器的透明栏.
- Live DemoView it Here
- Download zip file
A Cool CSS Effect - Dashboard [Updated x2]- 一个非常简单但是却又非常酷的CSS特效, 你可以用它来创建一个点击弹出的控制面板,.
Text-Shadow Exposed- 创建一个很有金属感的文本阴影特效..
CSS Speech Bubbles- 使用CSS 和 XHTML 1.0 脚本创建一个类似于Twitter的谈话背景图片, 比较适合用于留言列表.
- Download zip file
The Highly Extensible CSS Interface-最后介绍的是Cameron Moll’编写的一个系列CSS编码教程, 这个链接指向的是第一篇, 比较适合对CSS有一定基础的朋友阅读.
元素来创建一个漂亮的编号列表.
List Based Calendar-通过
