用 CSS3 畫理髮廳動態廣告跑馬燈

CSS3 理髮廳廣告跑馬燈

Amos 好久沒有用 CSS3 畫些好玩的 CSS3 小範例了,距離上次用 CSS3 繪製精美的膠囊 也已經快滿一年了(哇!也偷懶太久了吧),趁著一個假日,跟好友 Fran 大師借了張他許久前畫的圖來試著畫看看,當初 Fran 大師曾經問過我是否有辦法製作圓型的漸層,當時看到這圖片時還想不到怎麼做出那顆金屬球體,現在想到了做法就來刻看看囉.

首先我們來看看整體的 html div 標籤使用了幾個,在這個例子中為了一些小細節的處理,原本只規劃了使用2~3個 div 去處理,但最後為了眾多的細節而不得不把 div 添加到了四個之多,以下是這次使用到的 html 標籤結構,分成理髮廳廣告燈的主體以及上下金屬球+跑馬燈圓柱體.

<div class="hair-light">
  <div class="head"></div>	
  <div class="light"></div>
  <div class="foot"></div>
</div>

 

CSS3 理髮廳跑馬燈的11個細節

在撰寫這個範例的過程中,有些小細節是慢慢刻出來的,對於畫面中的光影折射合理性,在過程中慢慢地去修正與添加不同位置的陰影與色彩,另一方面也考量到 CSS 原始碼的簡潔度(我還不習慣用 sass 刻 code ),整體大概花費了我4個小時去處理完成這個作品,其實到現在都還是覺得尚有細節可以去修正,但是也都只是錦上添花罷了,就先公開分享給大家看看囉~

 

1.理髮廳跑馬燈的金屬球光線左右不是對稱的

在這邊 Amos 先預設光線是從右上角往左下角打,所以光線的話,應該是右邊亮的部位比較多,而左邊亮的部位比較少,所以在設定這個部分的時候,把左右兩邊的明暗設定為不同,而這部分的色彩應用方式原本是想採用 CSS3 的 radial-gradient 來製作,但是後面不論怎麼修改都不符合 Amos 所要的視覺效果,所以後面 Amos 改用了另外一種寫法,先讓 Amos 賣個關子一下,各位可以試著思考看看是否有其他 CSS3 屬性可以達到類似的效果的,老實說這做法連 Amos 自己都覺得很偏門XD,而且這是我撰寫 CSS3 上覺得最困難呈現的地方了.

CSS3 理髮廳廣告跑馬燈

 

2.下半部圓球的光影與上半部不同

在下半部的光影應該與上半部有所不同,畢竟光線是從右上角往左下角打的,所以在下半部的金屬球體勢必在底部會是比較深,這邊也是簡單使用 radial-gradient 放射狀漸層搭配上面第1點的偏門方式處理掉即可.

CSS3 理髮廳廣告跑馬燈

 

3.壓克力桶上面會有輕微陰影

在壓克力上端,由於上方金屬箍的遮蓋,所以帶了些微的陰影會在壓克力上面呈現出來,基本上簡單使用 CSS3 的 box-shadow 就能完成了,不會太困難.

CSS3 理髮廳廣告跑馬燈

 

4.壓克力下端的陰影比上端陰影為淺

同樣為光影問題,所以在壓克力下端的陰影就會較壓克力上端的陰影要來的淺,同樣的,基本上簡單使用 CSS3 的 box-shadow 就能完成了.

CSS3 理髮廳廣告跑馬燈

 

5.壓克力圓筒的厚度

壓克力我們都知道他會有一個厚度,而此類透明物體的實際呈現中,一般素描不夠強的人也都不容易去繪製出我們所見到的透明效果,這邊 Amos 也是一樣偷懶的大致表現一下該壓克力圓筒的厚度,而左邊的厚度則表現的沒有那麼明顯,在 CSS 撰寫過程中 Amos 也去找了一些壓克力與玻璃的圖片來做參考,希望能標線出更為貼近實體的質感,但是適合的圖片不好找啊~就先用偷懶一點的表現方式囉XD

CSS3 理髮廳廣告跑馬燈

 

6.CSS3 漸層處理壓克力的多重反光

反光強烈的材質我們大都可以發現它不只是單純的一個反射位置,可能還會有多個反射光位置,所以在壓克力圓筒的反光表現上,Amos採用了大家熟悉的 linear-gradient 來表現,搭配上 色彩 alpha 值的設定,就能用 CSS3 展現出壓克力圓筒通透的質感了,是不是很簡單呢^^,而這個例子中大概設定了有多達五道反光.

CSS3 理髮廳廣告跑馬燈

 

7.金屬凸出圓盤的基本光影

圓盤的光影算是簡單設定的了,基本光影就是上下的反光與陰影,搭配上 CSS3 的 linear-gradient 橫向漸層就完成囉,只是這個地方有個小細節是截圖中沒有截到的,等到看完後大家看實際的網頁範例時可以注意看一下,是不是有些地方不大一樣^^.

CSS3 理髮廳廣告跑馬燈

 

8.寬度的差異

金屬球體與下面的金屬框在寬度上是不同的,這也是這個 CSS3 範例中比較特別的小細節,也因為如此才會需要使用到4個 div 才能完成.

CSS3 理髮廳廣告跑馬燈

 

9.左上部的微陰影

這邊算是最畫龍點睛的地方了,有了這個小細節之後,整個圖都變美了(喂!是有那麼誇張嗎?),這個陰影同樣採用CSS3的 linear-gradient 漸層就能完成囉,只是質感上面要做好微調,包含漸層角度跟混色都要好好斟酌.

CSS3 理髮廳廣告跑馬燈

 

10.隱藏版的細節一

這個細節已經在細節7的時候有要各位注意了,基本上截圖中看不到(那你還貼!),等等請各位進到實際頁面去看,算是追加的細節之一,主要要表現金屬圓盤所遮蓋到的金屬箍位置,於是製作了一點點的陰影在金屬箍上.

CSS3 理髮廳廣告跑馬燈

 

11.隱藏版的細節二

跟細節10一樣的概念,該加的陰影不可少啊XD,所以使用了 CSS3 的 box-shadow 簡單的處理了一下.

CSS3 理髮廳廣告跑馬燈

 

結論

怎樣?看完後是不是也手癢到想自己也來 CSS3 刻一個啊?(誰跟你一樣變態啊!),用 CSS3 刻一些圖是真的很有挑戰啊,刻完更是成就感大大大滿足的啦~而且在實用度上面一定是超級實用的,其實真正寶貴的是在刻劃的過程中,對於細節的掌控、HTML架構的分析與精簡、CSS的運用分析、原始碼的簡化與優化、效能是否會有問題…以上這些都會是很特別的經驗與收穫,有時候雖然有可能卡關了一下,但是一旦破關之後馬上會感覺到整個人升級了一樣的感覺XDD

話不多說,接下來想看實際頁面效果的就到 CSS3 繪製理髮廳動態廣告跑馬燈 看吧,若有任何問題還請不吝給予 Amos 建議喔~謝謝收看,下一張圖請繼續期待(有人會期待嗎XD)

各位朋友若對 Fran 大師有興趣的話,也歡迎到 Fran 的個人部落格逛逛喔

看不過癮嗎?同場加映 用 CSS3 繪製精美的膠囊