快來收服CSS3神奇寶貝球吧!

css3 pokemon ball

快來收服CSS3神奇寶貝球吧!!!CSS3要畫圖是越來越簡單了,但如何省下HTML的原始碼數量就變得非常重要,那麼畫一顆神奇寶貝球到底需要多少的HTML碼呢?答案是…只需要一個DIV標籤即可!

CSS3中有許多迷人的功能,讓我們可以非常自由且彈性的設計我們的頁面區塊,其中Multiple background image就是一個非常吸引人的功能,不僅便利、彈性、省Code外,還能發揮更多的設計變化,上一次的「使用CSS3輕鬆寫出MAC彩虹球效果」以及「純CSS寫的撞擊點圖示!」其實也都是CSS3的Multiple background image功能,而這一次Amos更是好好玩了一下CSS3 Multiple background image功能,將CSS3的Gradient功能加進來一起使用,製作了九龍珠九顆神奇寶貝球,不多說,先來看看效果吧。在下方是實際呈現的效果

See the Pen CSS3 Pokemon ball by Amos (@bad_printer) on CodePen

CSS3撰寫前的準備

要寫CSS3神奇寶貝球之前,首先當然是要先準備最基本的HTML,在這個例子中,Amos想到其實可以利用::before以及::after這兩個擬類別物件來做一些事,所以就省下一些HTML 原始碼,從單一一組DIV標籤開始吧,至於CSS class則給他命名為box(如下)

在「.box」中是將球體外型、按鈕這些基本物件先建立好,之後的div則是套用另外一個CSS class來做覆蓋,好省下重新設定外型的工作,所以九顆球的話,原始碼就會是下方這樣

而基本的CSS設定,則如下方原始碼,設定了圓角、球體尺寸、中間腰部範圍以及外框,最後也先設定了gradient背景,讓box成為底一顆CSS3神奇寶貝球。

第二顆CSS3神奇寶貝球則將第一個球的gradient色彩做了變化,同樣都是採用linear-gradient的作法,Amos只是換了個遮蓋的方式及方向,就達到了我們所要的效果了。而從第三顆開始基本上都是沿用第二顆的觀念來延伸運用,到了第五顆CSS3神奇寶貝球就增加了radial-gradient的內容,讓畫面的感覺更加的多了一點變化。

在Amos這次玩的範例中,其實概念都差不多,唯一需要注意分析的則是多重背景的層疊方式以及遮蓋的問題,只要思考好了~各位要畫出這樣的圖也是非常容易的喔~若是想看完整的原始碼,請直接到CodePen看看畫面吧。若有任何不同的想法也歡迎各位不吝指教喔^^