用CSS3設(shè)計(jì)騰訊QQ LOGO

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

目前只支持Chrome觀看，效果如下圖所示：

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

1

CSS3中應(yīng)用最普遍的屬性，用于設(shè)置邊框圓角，可以采用border-top-left-radius的方式單獨(dú)設(shè)置每個(gè)圓角，并可以設(shè)置。

1）例如要實(shí)現(xiàn)1個(gè)圓，可以使用如下代碼：

width:240px;

height:240px;

-webkit-border-radius:120px;

效果如下圖所示：

2）要實(shí)現(xiàn)1/4個(gè)圓，可以用如下代碼：

width:240px;

height:240px;

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

效果如下圖所示：

3）要實(shí)現(xiàn)1/8個(gè)圓，可以用如下代碼：

border-top:240pxsolid#2ec8e9;

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

width:240px;

2

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

3

盒陰影，可以設(shè)置元素的陰影。如上圖所示。

4

RGBA也是CSS3中非常實(shí)用和強(qiáng)大的一個(gè)功能，以前所有使用RGB HTML的地方都可以使用RGBA的格式來(lái)設(shè)置透明度。例如QQ瀏覽器的九宮格可以做成如下顯示方式：

這就是采用RGBA的透明效果實(shí)現(xiàn)的，具體實(shí)現(xiàn)方式可以參考《瀏覽器九宮格的簡(jiǎn)單實(shí)現(xiàn)

用CSS打造QQ標(biāo)志設(shè)計(jì)教程分享完成，那么，你會(huì)了嗎？不會(huì)也沒(méi)關(guān)系，用藝點(diǎn)意創(chuàng)商標(biāo)在線制作器也可以直接生成類(lèi)似LOGO，如果生成的標(biāo)志還不滿意，那LOGO高端定制是您的最佳選擇。