照片画廊————————————-

Not so simple photograph gallery - 基本的照片画廊，具有默认图像，一到两行说明文字,单击旁边的小图像后放大显示在中央屏幕上

Hoverbox Image Gallery - Hoverbox照片画廊，完全基于CSS的照片画廊，鼠标移到图片上，在当前图片位置放大显示

CSS Sliding Photograph Galleries - 滑动照片画廊，鼠标移到压缩显示的垂直的图片上，图片滑开扩展完全显示

Cross Browser Multi-Page Photograph Gallery - 跨浏览器的照片画廊，此例子是多页面的Hoverbox照片画廊

导航————————————-

Advanced CSS Menu - 高级CSS菜单，利用的CSS Position属性编写具有hover效果的CSS菜单

The Menu Menu -一个造型独特的菜单

Create Vimeo-like top navigation - Vimeo式的顶部导航，基于无序列表的简单的CSS下拉菜单。

How to Style an A to Z Index with CSS - 利用CSS定制A到Z索引风格,字母变大缩小自适应

CSS Candy Menu - 时尚的CSS下拉菜单有六个色彩供您使用。

A flyout menu with breadcrumb trail - 类似Windows的开始菜单。水平形式

Css Menu with Icons - 加上图标的高级菜单

Sitemap Celebration - css网站地图，使用CSS风格的嵌套列表的网站地址。

Navigation Matrix Reloaded - 翻车导航，只用一张图片。

按钮————————————-

Scalable CSS Buttons Using png and Background Colors - 使用PNG和背景颜色的可扩展CSS按钮，建立一个充满活力的CSS按钮使用PNG，透明度和背景颜色，并支持全面的可扩展性。

CSS Pushbutton Links - CSS链接按钮,创建工作的按钮，不使用图像。

列表————————————-

How to Create a Block Hover Effect for a List of Links - 创建区域块悬停效果的列表

Better Ordered Lists Using Simple PHP and CSS - PHP配合CSS输出的有序列表 -这种技术很不错，因为它不使用任何图形元素，直接使用CSS控制。

The Amazing LI - 使用CSS和无序列表的项目可以做任何事情。

表格————————————-

A CSS Styled Table - CSS风格表

Styling Tables with CSS - 介绍如何自定义的边界，间隔，填充，背景和颜色的表格和表格单元格，以及如何创建候补色表行和创建悬停影响。

A CSS Styled Calendar - CSS风格的日历

文字与链接————————————-

CSS Text Wrapper - CSS文字包装，这个CSS文字包装可以让您轻易地使HTML文本总结形状，它不仅仅是一个矩形。您可以通过文字围绕曲线，锯齿或任何你想要的。

Showing Hyperlink Cues with CSS - 支持在IE7 ， Firefox和Safari浏览器。

Checkmark Your Visited Links with Pure CSS - 使用CSS伪类创建点击前后不同样式风格的文字。

CSS Gradient Text Effect - CSS渐变文字效果，纯CSS，不使用JavaScript或Flash

其它效果————————————-

CSS Sticky Footer - CSS贴页脚,支持所有主流和最轻微的浏览器。

The CSS-Only Accordion Effect - 纯CSS手风琴效果

Pullquotes - 引用

Simple Double Quotes - 使用图片的引用效果

CSS Image Maps - CSS地图标示

Creating a Star Rater Using CSS - CSS星级评分系统

Create a Valid CSS Alert Message - CSS警示讯息

CSS Rollovers - CSS翻转，使用CSS创建一个简单的过渡图像 。

Perfect pagination style using CSS - 完美分页样式，如何设计一个分页的搜索结果

Pure CSS Animated Progress Bar - 纯CSS动画进度条

Add a Loading Icon to Your Larger Images - 添加Loading图标 等待大图片载入，让您的访客知道，图像载入中。

Simple Accessible Charts - CSS简单方便图表

Cross Browser Transparent Columns - 跨浏览器透明专栏，建立透明的内容专栏使用不透明度

CSS Speech Bubbles -CSS语音气泡

总结

再次感谢您的阅读，我们希望这篇文章对您的工作中有帮助。如果有一些技巧和教程文中没有提及，希望您在评论里指出，谢谢!

原文地址：http://arbent.net/blog/40-outstanding-css-techniques-and-tutorials

译文地址：http://www.sonichtml.com/blog/?p=255

评论 (0) All

登陆 还没注册？