24個CSS3實例教程

來源: 我想網  發布時間: 2010-06-23 11:41  閱讀: 3750 次  推薦: 0   原文鏈接   [收藏]  

Pure CSS3 Page Flip Effect
這是一個通過CSS3漸變、過渡、二維變換和剪裁技術, Roman Cortes 實現這一個純CSS3的翻頁效果 (沒有用javascript). 當然也指定了Webkit 的瀏覽器 (Safari and Chrome).

Create a Vibrant Digital Poster Design with CSS3
一 個通過純html和CSS來設計的充滿活力和抽象的數字海報

CSS3 Leopard-style Stacks
一個純CSS.沒有 JavaScript. 一個Gordon Brander的實驗.

Wicked CSS3 3D Bar Chart
一個嘗試用CSS3來創建的3D圖表. 這個例子只能工作在 Firefox, Chrome, Safari 和 Opera.

Selectable Headlines with Color Transition (CSS3)
一個通過CSS3來實現文本顏色過渡效果的實例. 只能工作在 Safari 和Google Chrome.

Our Solar System in CSS3
這是一個試圖實現太陽系運動效果的實例,非常有趣。

Fun With CSS Gradients

CSS3 Bookshelf
這是一個很華麗的設計,通過動畫來實現這個書架效果。

Pure CSS Twitter Fail Whale
一個很可愛的CSS動畫效果

CSS World Clocks
這是一個通過CSS來實現的時鐘效果,注意這其中沒有用圖片。

3D Text Tower
看慣了一塵不變的text,這里給你加上動態陰影。

Creating a Realistic Looking Button with CSS3
如果你不想用photoshop來設計按鈕,可以用它。

CSS3 Spotlight
聚光燈! Works with Webkit & Firefox.

Pure CSS3 Animated AT-AT Walker from Star Wars

Pure CSS Icons
教我們用CSS3來設計icons

Create a Content Slider Using Pure CSS
不要JS來實現滑動效果。

Sexy Tooltips with Just CSS
如果不喜歡JQuery,我們可以這樣來做我們想要的效果,這是一個注釋樣例。

Creating a Polaroid photo viewer with CSS3 and jQuery

這是一個很好的CSS和JQuery結合的實例,通過使用jQuery可以讓我們使用更清潔的CSS

Animated Photoshop selection using CSS3
這是個突出虛線效果的例子。看起來就像photoshop一樣。

Sexy Image Hover Effects using CSS3
一個漂亮的圖片懸停效果。

CSS3 Dropdown Menu
一個多級菜單,效果很不錯,在IE7+也有不錯的表現,不過像圓角就不會有了。

Middle Box Links
一個漂亮的內容框,加上一個動畫效果,讓你更方便的找到它的鏈接。

Contextual Slideout Tips With jQuery & CSS3

Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius
介紹了非常豐富的CSS3實用技巧。

0
0
 
標簽:CSS3
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()