RTY 實踐出真知

CSS3 已經變得很流行。大部分的瀏覽器比如IE7、IE8、Safari、Firefox和Chrome，都支持新的CSS3屬性。CSS3有非常多的web和移動方面的功能。

本文列出21個新鮮的CSS3教程和技巧，供大家學習、交流。

1.iPhone “slide to unlock” Text in WebKit/CSS3

iPhone的滑動解鎖的文本效果。

View Live Demo

2.How to use Multiple backgrounds and Animation with CSS3

CSS3 ，可以實現對象的多背景，以及簡單的動畫效果。

View Live Demo

3.Advanced (yet awesome) pure CSS3 boxes without using images

純CSS3的效果，如下圖，好似Photoshop制作。

View Live Demo

4.Pure CSS Sliding Image Gallery

純CSS制作的圖片滑動效果。

View Live Demo

5.Making a CSS3 Animated Menu

CSS3的動畫按鈕。

View Live Demo

6.How to Build Cross-Browser HTML5 Forms

創建跨瀏覽器的HTML5表單。

View Live Demo

7.Styling pretty buttons with only CSS3

CSS3按鈕效果。

View Live Demo

8.Animated wicked CSS3 3d bar chart

非常漂亮的3D效果。

View Live Demo

9.Create A Clean and Stylish CSS3 Contact Form

簡潔的聯系人表單。

View Live Demo

10.Phone Style Checkboxes With CSS3

CSS3驗證表單。

View Live Demo

11.Animated Sprites with CSS3 Transitions

CSS3 動畫，準確的說，CSS3轉換，不需要JavaScript。

View Live Demo

12.CSS3 Flying Menu

CSS3按鈕效果。

View Live Demo

13.Popout Details on Hover w/ CSS

彈出效果，非常不錯，很容易被實現。

View Live Demo

14.HTML5 & CSS3 readiness

View Live Demo

15.CSS3 Button Maker

CSS3,按鈕制作，可以通過拖曳等，制作漂亮的CSS，為了你的按鈕。

View Live Demo

16.Fancy Image Hover Using CSS3

CSS3制作的懸停效果，見下圖。這可不是jquery做的哦。

View Live Demo

17.Creating A Rocking CSS3 Search Field

CSS3搜索域，該案例涉及到多個CSS3屬性

View Live Demo

18.Fading Button Background Images With CSS3 Transitions

這個變換效果，會再次讓你以為是用flash制作的。

View Live Demo

19.Super Cool CSS Flip Effect with Webkit Animation

超酷的動畫/轉換效果。

View Live Demo

20.Build a HTML5/CSS3 Website Layout without Images

無需圖片，創建網站布局。

View Live Demo

21.Pure CSS Reflections

看圖就知道哦，確保你用的是基于webkit的瀏覽器。

View Live Demo