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演示和教程》有6个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注