作為一個前端工程師,CSS是最基本的入門課,你都能做出來嗎?

已邀請:

曹雲金

贊同來自:


CSS在很多程序員看來那隻不過是雕蟲小技,


實際上CSS3發展到今天已經強大到超乎你的想象,


當然對於低端瀏覽器使用者來說,還是以前那樣——囧


有時候搞CSS開發確實需要很多想象力,下面一組純CSS3特效足以描述這一點


以下內容轉載自【http://design.yesky.com/show/466/11497966_3.shtml】



設計欣賞:純CSS3「繪制」的圖形圖標


IE 標志


  作者: Andreas Jacob


  在 Firefox 3.6+ 以及 Safari 5 上顯示最佳。使用瞭圓角,漸變,陰影等屬性。



  任天堂遊戲圖標


  作者: Drew


  使用純 CSS 實現的一些任天堂公司的遊戲圖標。



  電影《回到未來》片名


  作者: Lucas Garron


  和原版驚人相似,在 Webkit 引擎的瀏覽器中顯示最佳。



  CSS 雨滴


  作者: Sean Martell


  右邊是原始圖片,左邊是 CSS 生成的效果



  Bahamas CSS 標志


  作者: ForestMist


  巴哈馬群島標志,右邊是原始圖,左邊是 CSS 效果。



  Reddit 網站的外星人標志


  作者: Matthew James Taylor


  使用 “O O _ ( ) ( ) O O O O / – o O O O O O O O O ? ? ( ) ( )” 幾個字母以及文字效果。



  純 CSS 社會媒體網絡標志


  作者: insicdesigns


  又一套 CSS3 社會網絡媒體標志。



  CSS3 實現的 iPhone 圖片


  作者: Jeff Batterton


  簡直瘋瞭。



  Twitter 圖片


  作者: Jeff Batterton


  相當精彩的 CSS 圖形效果。參見《純CSS3實現的 Twiiter 圖畫》



  美劇《迷失》片名動畫


  作者: Marcos Esperon


  在 Webkit 引擎的瀏覽器中顯示最佳。



  奧林匹克標志


  作者: Doug Neiner


  基於純 CSS,以 em 為單位,可動態調整尺寸,需要瀏覽器支持 border-radius 屬性,目前支持的瀏覽器包括 Chrome, Safari, Firefox 和 IE9。



  jQuery 標志


  作者: Doug Neiner


  這是大傢最鐘愛的 JavaScript 框架 jQuery 的標志,使用 CSS3 的 border-radius 屬性。



  jQuery UI 標志


  作者: Doug Neiner


  這是 jQuery UI 庫的標志,同樣,基於 CSS3 的 border-radius 屬性。



  CCS 標志一宗


  作者: Justin Sepulveda


  全部基於純 CSS3 的 border-radius, gradient, transform 屬性。



  Opera 標志


  作者: David DeSandro


  做得非常漂亮,大量使用瞭 border-radius, gradient 屬性,不過在不同瀏覽器顯示不太一致,尤其在 IE 中。



  iOS icons


  作者: Louis Harboe


  非常偉大的作品,使用瞭 CSS3 的高級功能。



作者: Zander Martineau


  這份作品可以教你如何使用 CSS 實現三角形,如何實現諸如 RSS 圖標,心形圖,三角形一類的簡單圖形。



  基於純 CSS 的超級瑪麗 3D 動畫圖標


  作者: Andreas Jacob


  基於 CSS3 和 CSS 4D 框架 ,動畫部分很精彩,但目前隻支持 Safari 5。



  純 CSS 圖標一宗


  作者: Andrew Kelly


  使用瞭 CSS3 的漸變,陰影,圓角等屬性,效果很出眾。



  CSS3 實現的 Photoshop 標志


  作者: Radu Chelariu


  完全基於 CSS3,沒借助任何圖形。



  10 個令人贊嘆的 CSS 社會媒體網絡標志


  作者: Nicolas Gallagher


  全部基於簡單的,語義化 HTML 標簽,沒有任何空的,多餘的對象,沒有 JavaScript,沒有圖片。



  一套 CSS 圖標


  作者: Lucian Marin


  一套基於 CSS 的圖標,非常精致。



  基於純 CSS3 的 Twitter 圖標


  作者: Giacomo Bartoli


  很顯示,使用瞭 @font-face 和少量陰影及圓角。



  加拿大 Go Transit 公司標志


  作者: Collin Henderson


  基於 CSS3 的 border-radius 屬性



以上文章轉載自【http://design.yesky.com/show/466/11497966_3.shtml】


當然作為一個前端開發工程師,這種變態的作圖方式在實際項目中並沒有太多的實際作用,


1、PC項目中,利用css spirte技術處理的圖片對寬帶普及的今天來說,其實不算什麼,有時候話大力氣的CSS3制作圖像還不如平一個圖標來的高效,而且CSS3對IE9支持隻有不到80%,IE8/IE7/6支持基本為0


2、手機項目中,雖然流量顯得那麼的珍貴,但是手機的CPU性能還不夠強大,尤其是五花八門的安卓手機,即便是CPU跑分性能夠強還有CSS3渲染性能不夠的情況


因此這些圖片在當前網絡時代裡還是隻能起到小小的「炫富」作用——囧

要回復問題請先登錄註冊