2011年10月9日星期日

50多个极富创意的CSS演示和教程

CSS可以让网页设计中实现很多丰富和独特的技术. 今天,我们就围绕着CSS技术展示全面的探讨, 为你找寻一些最具创造性的CSS技术和使用技巧. 绝对值得喜欢网页设计的你一看. 此文由帕兰翻译自Noupe的Using CSS to Do Anything: 50+ Creative Examples and Tutorials.

如果你喜欢CSS, 那你可能对帕兰之前发表的一些文章也会感兴趣 : 样式化列表

神奇的<li>标签- 使用少许的CSS, <li>标签成为CSS设计中最常用最有效最多才多艺的一个元素, 此文将向你介绍如何发挥 <li>标签的最大作用.

Better Ordered Lists (Using Simple PHP and CSS)- 这是一个示例, 教像如何使用PHP和CSS创建一个传说中的有序文章列表, 还且这个编序号码还是首字下沉的效果.

Style Your Ordered List- 这是一个快捷教程, 教你如何使用有序列表<ol>和段落标记<p>元素来创建一个漂亮的编号列表.

List Based Calendar-通过<li>元素实现的日历.

表格和表单元素

Datasheet-style form using HTML and CSS- 使用html,CSS 和javascript 创建一个数据库风格的档案记录,

Styling File Inputs with CSS and the Dom - 档案上传 (<input type=”file” />)的设计

Better Web Forms: Redesigning eBay’s Registration

Uni-Form- Uni-Form试图以规范的形式标记（ XHTML中）和CSS ， “模块化” ，所以即使只有普通的基本知识，这些技术可以得到很好看，结构良好，高度自定义，语义，无障碍和实用表单

帕兰映像/50多个极富创意的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技术, 请查看帕兰映像之前的一些介绍:

101个CSS技术高级应用教程(上)

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透明图片的方法.

帕兰映像/50多个极富创意的CSS演示和教程

CSS Rollovers-学习如何使用CSS创建一个图片悬浮过渡的特效.

文本和链接特效

“Checkmark” Your Visited Links with Pure CSS- 这个教程将你如何为链接创建一个醒目的提示标记, 比如在点击后前链接会有一个打勾的背景图片, 而点击前则是红色.

帕兰映像/50多个极富创意的CSS演示和教程

Simple Round CSS Links -使用a元素和按钮来实现漂亮的链接特效. Pure CSS Popups- 纯CSS实现的文本显示和消失效果

导航菜单

Perfect pagination style using CSS- 这个教程将告诉你如何使用CSS创建一个漂亮的分类标记

VISTA style toolbar-利用CSS创建一个VISTA风格的工具栏

Digg-like navigation bar using CSS- 创建一个DIGG风格的导航菜单 Menu circular en CSS- 如何利用CSS创建一个非常漂亮的圆形环绕菜单, 且每个项目悬浮的时候, 有很好的文本提示效果.
了解更多有关导航菜单的CSS应用

30多个CSS和JS下拉菜单资源

9款CSS菜单生成器/含在线CSS导航菜单生成和CSS菜单生成软件

50多套CSS导航菜单免费资源

60多个网页导航菜单设计实例欣赏

帕兰映像/50多个极富创意的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以上版本的浏览器.

帕兰映像/50多个极富创意的CSS演示和教程

Drop Caps- 也是一个非常简单的CSS片段就能实现的首字下沉效果.

圆角特效

3 Simple Steps in Coding a Rounded Corners Layout- 3个简单的步ZOU就能实现的圆角效果.

One pixel notched corners Auto-Cropping Rounded Corners- 自动裁剪内容区域来实现圆角效果, 不需要额外的HTML代码.

引用

Simple Double Quotes- 这个CSS教程向我们展示如何使用一张引用图片来实现双重的引用效果.

Blockquotes with Image Quotes- 为引用添加一张图片. 帕兰映像/50多个极富创意的CSS演示和教程

值得参考的新兴CSS技术

Pure CSS Animated Progress Bar- 使用纯CSS实现的动画进度栏, 帕兰之前做过专门介绍

Add a “loading” icon to your larger images- 使用CSS来嵌入一张 “loading” 图片,让访问者耐心的等待载入吧 The CSS Text Wrapper - 这个工作可以让你把一段内容区变成各种不规则 的形状. Adding a magnifier to images with CSS and JavaScript SAC Simple Accessible Charts. Cross-browser transparent columns-这个教程教你如何创建一个兼容各大浏览器的透明栏. A Cool CSS Effect – Dashboard [Updated x2]- 一个非常简单但是却又非常酷的CSS特效, 你可以用它来创建一个点击弹出的控制面板,.

帕兰映像/50多个极富创意的CSS演示和教程

Text-Shadow Exposed- 创建一个很有金属感的文本阴影特效.. CSS Speech Bubbles- 使用CSS 和 XHTML 1.0 脚本创建一个类似于 twitter的谈话背景图片, 比较适合用于留言列表. The Highly Extensible CSS Interface-最后介绍的是Cameron Moll’编写的一个系列CSS编码教程, 这个链接指向的是第一篇, 比较适合对CSS有一定基础的朋友阅读.

来源于 50多个极富创意的CSS演示和教程 | 帕兰映像

发帖者 frogpear 时间： 06:14

没有评论:

发表评论

订阅： 博文评论 (Atom)