【設計教程】教你用純css3畫一個精致的騰訊公司企鵝logo

發布時間:2017/06/15 11:14 編輯:logofree標志在線制作
騰訊公司的企鵝logo非常喜感,這樣的企業吉祥物非常棒,很容易讓人記住,并且非常利于傳播,今天我們不是要聊騰訊QQ的發展歷史,今天logofree君要教大家用純的CSS畫一個精致的騰訊公司企鵝logo。


今天和大家分享一下使用CSS3繪制騰訊QQ的企鵝Logo的過程


一、如何使用CSS3來繪制圖形?


網絡上經常能夠看到一些用CSS3繪制的精致圖形,它們通常由矩形,圓形,橢圓,三角形,梯形等組合而成。要想繪制我們自己的圖形,就要先了解下基本圖形的繪制方法了。


一個display:block的元素設定寬高之后表現為矩形。通過設定border-radius可以得到圓角矩形,圓形和橢圓形。

繪制矩形

在使用border-radius時,有幾點可能需要注意一下:


1.border-radius,可以分別對4個角進行設定。 例如上圖:border-top-left-radius: apx bpx;

2.border-xxx-xxx-radius的兩個值分別代表著橢圓長軸和短軸長度的一半,通常簡寫的時候例如border-top-left-radius: 10px;(border-top-left-radius:10px 10px;) 表明長軸和短軸的長度均為20px,也就是半徑為10px的圓形(圓角部分)。

3.當使用百分比數值時,a 相對于width, b相對于height


如果a == width/2, b == height/2,結果就是一個橢圓,與此同時a==b,那么就可以得到一個半徑為a的圓形了。


在看三角形之前,首先看看三角形的“繪制者”border,下面的例子:

繪制者

.test{

border: 20px solid;

border-top-color:#ff0000;

border-right-color:#00ff00;

border-bottom-color:#0000ff;

border-left-color:#FFFF00;

width:100px;

height: 100px;

background: #272822;

}


將每個boder的顏色值設為不一樣,就可以清楚的看到每個border的負責區域,有三角形的雛形了。其實,繪制三角形的原理很簡單,如下圖

顏色設置

我們可以這樣去理解一個border所代表的區域,那就是“三角形x2 + 矩形”,以border-bottom為例,


矩形 = width x ( border-bottom-width )


相鄰的border交叉的區域構成一個矩形,每個border各負責一半,一個直角三角形。只要將其中的一個border的顏色值設為transparent或者背景色,從視覺上就可以得到一個直角三角形了。


  • 三角形1 = border-left-width x border-bottom-width
  • 三角形2 = border-right-width x border-bottom-width


當width = 0 (height = 0, border-left || border-right)時,我們通過調整border的寬度可以將這兩個直角三角形拼接成任意形狀的三角形,或者調整width(height)等獲得一個梯形,當然梯形也可以通過拼圖得到,這樣不是更簡單嗎?。Transform中旋轉將為我們提供更多的靈活變化。


二、繪制企鵝公司LOGO


結束了對于基本圖形部分的一些討論,開始著手于QQ 企鵝的繪制。


第一步當然是基本框架的繪制了。


通過對手里的Logo圖像的觀察,按照層次劃分來組合最終的效果。這樣的方法也可以繪制西點蛋糕培訓行業標志,選擇使用絕對位置position:absolute;來布局各個元素。主要劃分為頭部,身體,圍脖,雙手,雙腳。


框架的結果圖:

騰訊公司LOGO框架結果圖

介紹下這個過程中幾個比較典型的圖形繪制方法:


1、企鵝的眼睛:橢圓,直接設置border-radius:50% 50%; 即可[因為寬高分別為44px和66px,所以也可以這樣設定:border-radius: 22px / 33px]


2、圍脖的尾部:一個圓角各異的矩形,所以這里需要對幾個角分別設定border-radius,微調的結果為


  • border-bottom-left-radius: 50% 43%;
  • border-bottom-right-radius: 15px;
  • border-top-left-radius: 20% 57%;


3、企鵝的胳膊:手的繪制較為麻煩一點,可以分為上下兩個部分,將繪制的結果拼接到一起。那么對于不需要的部分怎么辦呢?我們可以將上(下)部分放到一個div(container)中,利用overflow:hidden的屬性來截取所要的部分。繪制復雜圖形的時候常用的方法就是切割和拼接,將圖形切割成一個個簡單的小塊,通過層疊和旋轉變化進行組合。


使用transform:rotate(deg)的時候,優先設定transform-origin屬性,會比較方便。設定的點作為中心點,整個圖形繞著這個點進行角度變化。例如:transform-origin:bottom left, 使用左下角作為原點。也可以使用具體的像素值和百分比。


在基本的框架線條中比非常多的使用了border-radius用于構造各種曲線條,小企鵝是圓圓胖胖的,:)


接下來就是對只有基本線條的小企鵝進行著色了。著色的過程可以幫助我們調整z-index,也就是各個模塊的重疊層次,遮蓋了一些無用的線條和框角。


填充顏色之后的企鵝看起來好多了,可是總感覺有點不對勁。嘴巴的形狀不夠性感,圍脖竟然沒折,小企鵝的腳趾去哪了,穿鞋了嗎?


剩余的工作就是對這些細節上的問題進行修復,這里主要使用兩種圖形:


1、繪制一個斜邊三角形,修復嘴唇的層次感:


繪制這樣一個斜邊三角形,步驟分解如圖所示:


先是繪制一個普通三角形,通過逆時針旋轉得到一個修復三角形,那么相對稱的修復三角形可以通過使用rotateY,繞著Y軸旋轉180度,來得到。


2、繪制一個“小尾巴”


  • border-right: 6px solid black;
  • width: 100px;
  • height: 70px;
  • border-bottom-right-radius: 70px 70px;


當對一個角應用圓角樣式,如果這個角相鄰的兩個border一個有定義而一個無定義,那么繪制的結果就是由粗到細的“小尾巴了”。[在整個繪制過程中,同一個圖形它的繪制方法有很多種,例如一個矩形可以用 width x height構成,也可以由border x height(width)構成,甚至可以由border組合(width = height = 0)構成,根據情況選擇吧。]


將這些修復應用到小企鵝上,得到最終的效果圖:

騰訊企鵝LOGO成品效果圖

怎么樣?是不是很棒?當然用CSS來繪制騰訊公司企鵝LOGO對持術人員來說,百比較簡單的,但是普通人來說難度就大大的有了,不過你也可以用簡便的方法來設計公司LOGO,如使用logofree公司logo免費在線設計生成器,一分鐘就可以完成一個LOGO設計,何樂而不為?當然用CSS繪制的騰訊公司LOGO的優勢就是占用資源小。


今天用純CSS繪制騰訊公司企鵝LOGO設計教程就到這里,希望能給設計師們有所啟發,僅供參考。

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