Jun Blog

CSS无所不能：50多个创造性实例讲解

Tags:CSS.

CSS有很强的能力创造大量丰富而独特的技术，有很多创造性的手法和技巧

样式列表

The Amazing <li> – 用一小段CSS，“<li>”在一个WEB设计师的手里就变成了许多很丰富和多功能的标签。这篇文章就是j教你如何使用和称赞这个令人惊奇的“<li>”标签。

所以现在就开始吧..

Better Ordered Lists (Using Simple PHP and CSS) – 在你需要摆脱传统表单列表来创造一个属于自己的风格的时候，这就是一个简单的例子。

Style Your Ordered List – 这里是一个简短的CSS教程,教你如何使用表单“<ol>”标签和“<P>”标签来设计一个有风格的number list 。

在线演示：演示地址
下载地址：zip格式

List Based Calendar – 一个简单的方法给日历增加视觉样式，所以你只能看到在这个月历格式只是一个简单的列表。

在线演示：演示地址

FORM表单及原理

Datasheet-style form using HTML and CSS – 使用HTML,CSS和JavaScript来制作书库表WEB页面的许多像似的方法,

Styling File Inputs with CSS and the Dom – 上传表单(<input type=”file” />) 使设计的漂亮的表单显得十分困难，它没有办法按照设计师的设计意图来展现很控制，这个简例三个部分不断提高深入，在未来很长一段时间都将使用CSS和Javascript来解决这个问题

在线演示：演示地址
下载地址：zip格式

Better Web Forms: Redesigning eBay’s Registration – 漫游eBay的注册表单设计详细流程，对表单设计有着积极的影响

Uni-Form – Uni-Form
是一个试图去提升(xhtml)和css,将他模块化，所以，即使人们只简单了解技术文档就能设计个漂亮的样子，是个有好的组织结构，高度可定制，方便易用的表单。

页脚

A CSS sticky footer that just works – 在短短几个简单的CSS类,以最少的额外的HTML标记，你就能得到一个粘性页脚，甚至连新手都能应付，已经在IE5以上的版本，Firefox,Safari和Opera里验证通过。

MAKING YOUR FOOTER STAY PUT WITH CSS – 如何使您的页脚停靠在屏幕的底部。

图像替换的新创意

Create Custom Search Bars – With Image Replacement using CSS

HR Image Replacement with CSS – How to replace the HR tag with an image that works cross browser.

Image Sprite

Image Sprite Navigation With CSS – Creating a navigation using an image sprite, you can have a complete navigation, rollovers and all, by only using one image.

CSS image techniques

Create Resizable Images With CSS – A new technique to resize images when the user increases their browser’s text size. Images are resized along with the text rather than staying constant in size.

CSS Stamps – Using the CSS property border and outline to achieve the stamp look.

Image Captions Generated with CSS and JavaScript – The names are not part of the image – they are stored in the img’s title attribute.

Cross-browser semi -transparent backgrounds- Semi-transparent backgrounds are nice. They would be more popular, but Internet Explorer doesn’t support .png transparency. There are a few clunky workarounds. Here’s another that’s a little less clunky.

CSS Rollovers – Learn how to create a simple rollover image using CSS.

Text and Links Effects

“Checkmark” Your Visited Links with Pure CSS – The goal of this tutorial is to get a check mark preceding visited links for a nice visual indicator.

Simple Round CSS Links – Now you can style both (a) and (button) in this super easy and light-weight solution

Pure CSS Popups – Using pure CSS causing text to appear and disappear.

Navigation

Perfect pagination style using CSS – This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages.

VISTA style toolbar – How to create VISTA style toolbar with CSS,

Live Demo:view it Here
Download code:from Here

Digg-like navigation bar using CSS – This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.

Menu circular en CSS – A circular menu with nice hover effect showing text description for each item in the menu.

Live Demo:view it Here

CSS Image Galleries

CSS Image Gallery – A purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image.

Not so simple photograph gallery – A CSS image gallery that have a default image, a line or two of descriptive text and the ability to click an image to hold it on the screen.

A sliding list click gallery – A demonstration to show a sliding tabs gallery, with a click to open action rather than a hover. Also the facility to add some descriptive text to accompany the large image.

Drop Caps

Nice Drop caps with CSS – Using the :first-letter pseudo-element, you can easily create nice drop caps with CSS. No extra HTML or Javascript required and IE5+ browser support.

Live Demo:View it Here

Drop Caps – This small snippet of CSS utilises the :first-letter pseudo class to apply a particluar style to the first letter of each paragraph, giving the look of an illuminated initial.

Download code:from Here

Rounded Corners in a simple New approach

3 Simple Steps in Coding a Rounded Corners Layout – A simple approach to coding fixed width, rounded corners layout in 3 simple steps.

Live Demo:View it Here
Download: zip file

One pixel notched corners – as used by Google Analytics.

Live Demo:View it Here

Auto-Cropping Rounded Corners – A new solution for rounded corners, what it does is: it crops the content below it, so that anything with a background color or image (headers, paragraphs, even images) automatically get the rounded corner treatment with no extra work.

Download Example:from Here

Blockquotes

Simple Double Quotes – This CSS tutorial will show you how to display two double-quote images using one blockquote tag.

Live Demo:View it Here
Download: zip file

Blockquotes with Image Quotes – Adding an image to the blockquote style.

Worth Checking

Pure CSS Animated Progress Bar – A simple demonstration of how you can create animated progress bar using pure css. The trick is very simple. We need 3 elements, one container and 2 nested elements.

Live Demo View it Here
Download zip file

Add a “loading” icon to your larger images – Using CSS to embed a “loading” image, to let visitors know that an image is loading.

The CSS Text Wrapper – The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.

Live Demo View it Here

Adding a magnifier to images with CSS and JavaScript

SAC Simple Accessible Charts.

Cross-browser transparent columns – How to create transparent columns that can work in all browsers. By using the opacity property and still having the content opaque. Floats work too – which makes it possible to create multi-column transparent-column layouts.