用CSS3設計騰訊QQ LOGO

發布時間:2018/09/28 09:03 編輯:logofree標志在線制作

最近用CSS設計LOGO上癮了,前兩天分享了《教你使用純CSS設計HTML5新LOGO》和《教你使用CSS3設計Opera瀏覽器LOGO》,今天在微博上看到有新浪的朋友用CSS3實現的新浪微博LOGO(如下圖所示),一時手癢,就順手也CSS3實現了一個QQLOGO

純CSS設計的新浪微博LOGO

目前只支持Chrome觀看,效果如下圖所示:

純CSS設計的騰訊QQ標志LOGO

主要用到的CSS3屬性如下所示:

1border-radius

CSS3中應用最普遍的屬性,用于設置邊框圓角,可以采用border-top-left-radius的方式單獨設置每個圓角,并可以設置。

1)例如要實現1個圓,可以使用如下代碼:


width: 240px;

height: 240px;

-webkit-border-radius: 120px;

效果如下圖所示:

CSS實現的圓

2)要實現1/4個圓,可以用如下代碼:


width: 240px;

height: 240px;

-webkit-border-bottom-left-radius: 240px 240px;

效果如下圖所示:

純CSS設計的四分之一圓

3)要實現1/8個圓,可以用如下代碼:

border-top: 240px solid #2ec8e9;

-webkit-border-top-left-radius: 240px;

width: 240px;

純CSS設計的八分之一圓

2-webkit-transform

主要使用了rotate旋轉屬性,可以控制元素向左向右旋轉。下圖里的箭頭就是用-webkit-transform:rotate屬性實現的。順便提一句scale縮放屬性里如果值為-1,也是有旋轉效果的。

純CSS設計的箭頭

3-webkit-box-shadow

盒陰影,可以設置元素的陰影。如上圖所示。


4RGBA

RGBA也是CSS3中非常實用和強大的一個功能,以前所有使用RGB HTML的地方都可以使用RGBA的格式來設置透明度。例如QQ瀏覽器的九宮格可以做成如下顯示方式:

純CSS設計的QQ瀏覽器九宮格

這就是采用RGBA的透明效果實現的,具體實現方式可以參考《瀏覽器九宮格的簡單實現》一文。


CSS打造QQ標志設計教程分享完成,那么,你會了嗎?不會也沒關系,用logofree商標在線制作器也可以直接生成類似LOGO,如果生成的標志還不滿意,那LOGO高端定制是您的最佳選擇。

推薦閱讀
Advert:[left_fixed_adv]
3d太湖钓叟三字诀