創新與實驗性的CSS特效

來源:互聯網
上載者:User
css 並不總是意味著嚴謹、標準。這理,你將看到21個好玩、有趣味、實驗性的css技術運用執行個體與示範其中討論的一些技術與執行個體也許並沒有被測試過,可能有些瀏覽器無法渲染,有些允許是被確認過的給予標準設計與開發的。這裡大部分執行個體都是僅僅給予探索的目的。

Transparent CSS Menu Drop-down透明的css菜單 下拉效果

這個效果展示了如何設計一個進階的支援透明效果的css下拉式功能表(需要javascript 來支援ie6png圖透明問題)

 

Return of the image maps圖片熱區返回提示視窗
你將看到一個很棒的方法,用css來定義的圖片熱區提示視窗效果

CSS 3D puzzlecss 三維拼圖

這個三維拼圖是純css編寫的(肯定花了不少時間 ),開啟頁面,滑鼠移動,滑鼠一定要在連貫的道路上移動,移到道路盡頭,小人才會跟著走,滑鼠在水裡就會灰屏了,要移開滑鼠重新開始

CSS scrolling image mapcss滾動圖片熱區

這個效果用了一張全景相片,點擊白色框地區,右邊就出現相應的大圖。

CSS Decorative Gallerycss裝飾畫廊   讓圖片列表展示的更有個性

Demo: CSS Decorative Gallery
源碼下地址:
http://www.webdesignerwall.com/file/decorative-gallery-demo.zip

Playing Cards with CSScss撲克牌

這個效果用特殊的html語言來表現撲克牌,用css來定義位置


Demo: Playing Cards

Homer CSS荷馬css

這個效果,Román Cortés 用html符號和css畫出了美國知名卡通形象辛普森的頭像

CSS House房子

設計師用div加標準css創造出了一棟房子


Demo: CSS House

“Secret Message” with CSS Positioning and Transparency

秘密資訊  css定位與透明(firefox 可以預覽效果,ie無效)


Demo: Secret Message

How to create light-weight drop shadows

如何做出淺色陰影製作效果 用png圖片來實現陰影,ie6需js支援


Demo: light-weight drop shadows

Multi-position shadow boxing

多方位陰影製作效果   這是另外一種給元素(片)加陰影的效果

Complexspiralcss半透明效果

DVD Recorder Remote

css做的dvd遙控器面板

Drawing the line

描線    Stu Nicholls 用css實現出一支筆的效果,滑鼠移到筆上,還會畫出線條

CSS Text Shadows文字陰影製作效果

一個純CSS的辦法適用於下拉陰影的文字。文字重複疊加,這不是好的方法。

CSS Flashy Links

css實現的比較無聊的連結效果(應該有很多比這更好的效果)

Map Pop地圖彈出提示效果

Pure CSS Popups

純css的提示視窗效果

CSS Sticky Footer

能吸附瀏覽器的底部效果,不管瀏覽器視窗多高,都始終處在最底部

Here’s a footer that is fixed at the bottom of the web page, regardless of height.

Scalable Star

可變大變小的星星     改變瀏覽器預覽文字大小,星星也跟著變化

CSS: Menu Descriptions

css實現的菜單提示解說文字效果

CSS Gradients Demo

css色彩坡形效果


Demo: CSS Gradients Demo

Scaled Background Image

css實現的頁面背景圖片跟隨瀏覽器視窗大小變化的效果


Demo: Scaled Background Image

CSS Vertical Bar Graphs

css柱狀圖效果

CSS Gradient Text Effect

css實現文字漸層紋理效果

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.