[CSS3] 用CSS3撰寫神奇寶貝球，不需要圖片就能做到！

CSS3要畫圖是越來越簡單了，但如何省下HTML的原始碼數量就變得非常重要，那麼畫一顆神奇寶貝球到底需要多少的HTML碼呢？答案是…只需要一個DIV標籤即可！
CSS3中有許多迷人的功能，讓我們可以非常自由且彈性的設計我們的頁面區塊，其中Multiple background image就是一個非常吸引人的功能，不僅便利、彈性、省Code外，還能發揮更多的設計變化，上一次Amos寫的的「使用CSS3輕鬆寫出MAC彩虹球效果」以及「純CSS寫的撞擊點圖示！」其實也都是CSS3的Multiple background image功能，而這一次Amos更是好好玩了一下CSS3 Multiple background image功能，將CSS3的Gradient功能加進來一起使用，製作了九龍珠九顆神奇寶貝球，不多說，先來看看 CSS可樂的詳細說明吧。

[CSS] 用CSS3寫 iTunes flip cover效果

早在很久以前，當iTunes的3D flip cover檢視效果出來時，就已經造成令人驚豔的視覺感受了，而現在有了CSS3的3D功能支援後，未來要寫這樣的效果可以說是越來越簡單了，而且更令人感到驚訝的是，不需要Javascript也能寫出iTunes這樣的效果了，不多說，請各位直接到CSS可樂頁面去看看吧

http://csscoke.com/2013/10/28/css3-itunes-flip-cover-effect/

[軟體] 保護眼睛！請更換Dreamweaver程式碼配色！

一直以來都覺得Dreamweaver在編輯原始碼的功能上面速度飛快，但唯一的問題就是白色的背景很傷眼睛，用過不少的文字編輯器發現，似乎只有Dreamweaver沒有原始碼檢視的色彩配色可用，雖然可以自己去修改，但是要比對每一種原始碼的顏色也太麻煩了，所以，乾脆用網路神人的現成配色，然後再自己修改成自己的幸運色喜歡的顏色，這樣就快多了～要更換配色的話有多種方式，歡迎到CSS可樂去看更詳細的教學喔^^
http://csscoke.com/2013/10/11/change_dw_code_color/

[CSS] 那些年！因為IE6而被許多人遺忘的CSS選取器

在網頁設計的歷史中，恐怕最長命的就是IE6了～而網頁設計師一開始都一定會經歷過被IE6對box model解讀錯誤而困擾不已的過程，這次我們不談box model，我們要來看看幾個IE6不支援但又超級好用的CSS選取器，現在都可以在其他ie上面執行囉，請移駕CSS可樂觀看吧
http://csscoke.com/2013/10/14/was-framed-and-forgotten-ie6-css-selectors/

[CSS3] 純CSS的酷炫的動態相片牆

現在的Jquery幻燈片效果非常多，但是都屬於比較規則性的作法，方向大都千篇一律，但是否就永遠只能這麼做呢？所以Amos設計了一個概念式的純CSS3幻燈片效果，整個效果雖然看起來複雜，但是作法其實還算簡單。先來看看整個效果的影片：

看完之後有沒有覺得很心動阿～
不多說，馬上到友站去看原始教學與範例吧！
http://csscoke.com/2013/09/28/css-photo-wall/

[CSS3] 使用::before 與 ::after來製作可被列印出來的圖片

一直以來網頁設計師都曾遇到客戶要求列印網頁時要能印出網頁的背景圖片，現在你可以利用CSS3的::before 與 ::after 來建立一個可以被列印出來的圖片了，而且你完全不需要把圖片寫在HTML原始碼之中，可以說是解決了以往設計師們不得不把圖片放在HTML中的困擾，進而採用CSS的方式達到我們所要的效果，不多說，立即轉到我們友站css可樂去看吧! 使用::before 與 ::after來製作可列印的logo圖片

[CSS3] :nth-child(n) 超詳細教學文

CSS3 裡面最強大的選取器大概就屬 :nth-child(n) 偽類選取器了，很多人看了這選取器老是感覺一頭霧水的話，這邊有一篇超級詳細的教學，各位可以看看喔～
使用CSS3 :nth-child(n) 選取器詳解

[CSS3] CSS3 transition 試做分享區塊之球體彈性效果

CSS3 的 transition 功能是壞掉的印表機很喜愛的一個屬性，這次壞掉的印表機想以最少的 HTML Code 嘗試僅使用 CSS3 Transition 製作彈性效果，不使用 animation keyframes 製作，並且必須添加陰影效果，每個圖示的原始碼如下

<li> <a href="#"> <img...> </a> </li>

很乾淨對吧^^，製作上希望球體能像上彈起並有彈性效果，在球體的下方還要有陰影產生，陰影的效果必須配合球體的彈性有大小的變化，此外，在球體往上彈起之前必須讓球體稍微往下縮一點，讓他更有準備彈起蓄勢待發的Fu~

CSS3 Transition 效果本身即帶有起始與結束兩個時間點中過渡轉換的動畫效果，利用這樣的特性，在製作網頁選單上面選用 CSS3 transition 會是很方便的一種方式。在 CSS3 中除了 transition 以外的動畫屬性，大概就是 CSS3 的 animation 了，不過由於 animation 本身的一些限制，要做到純 CSS 不使用 javascript 來控制動畫效果，其實有點缺點，建議大家可以多使用 transition 屬性，算是簡單方便又好用喔^^

[CSS3] 用 CSS3 繪製立體感圖示

自從 CSS3 新增了漸層與陰影屬性之後，網頁設計的彈性就變得更大了，於是使用 CSS3 畫圖的人就變多了，所以壞掉的印表機也不例外，看到網路上有人用Photoshop畫出好看的icon，那印表機就用 CSS3 來畫吧！

ok～想做就去做吧！首先必須要先分析一下這樣的圖示大概可以用哪幾個 CSS3 的屬性做出來？然後思考一下需要幾個div標籤？當然，div多個幾層做起來是簡單的～但是Code就變得髒多了～但這樣就失去了使用 CSS 的原始目的，最後！壞掉的印表機決定用兩層div來做，html 原始碼就用下面這樣

<div class="icon">
      <div></div>
</div>

至於文字就使用 CSS 的 content 屬性來產出，這樣我就不用在HTML裡面寫文字了～是的，你沒看錯！CSS能夠無中生有產出一個文字，而畫面中有四個圖示，同樣都使用 .icon 來製作，怎麼區分呢？答案是使用 CSS3 的 nth-child 屬性來選取，這樣我就不用在 HTML 中多加一些沒有必要的原始碼囉～看到這裡～你是不是也很想動手做看看？我把原始碼都公開了～各位可以點選下面的連結進去看完整的原始碼喔～^^

觀看完整範例 http://cdpn.io/tdpkC
小提醒：各位進到範例頁面中，可以點選左下角一個不明顯的「Edit this pen」去看原始碼等相關資訊喔～

[CSS3] CSS3 3D 功能實作

CSS3 的 3D 功能一直是 CSS3 的大亮點，可以說是未來的趨勢，現在也已經有很多不同的 CSS3 3D 效果被開發出來了，本次實作目的是測試 CSS3 3D 的組成，其實壞掉的印表機每次在寫 CSS3 3D的時候都超辛苦的，怎麼說呢～因為 CSS3 3D 透視點的設定，跟區塊物件的組成我老是覺得很混亂，我想應該是觀念沒有建立的很好，自己對於 CSS3 3D 的概念也不夠明確才會有這問題。
所以這個實作就誕生了，這個例子跟我一開始製作的 CSS3 3D 效果有點差異（沒公開），但這個例子的原始碼卻是最為簡單的(呼～有進步就好)，所以就分享給各位看看效果囉～^^

[CSS3] CSS3 3D分享區塊實作

CSS3 3D 功能一直是 CSS3 的亮點之一，這次實作一個分享區塊，原本的構想是要向前翻開，但後面實作 CSS3 3D 時覺得效果不是很好，所以改成向後翻開，這樣整個感覺雖然有些不是很符合我們的認知，但效果ok就好啦～反正也都是測試作品～各位就別太計較囉～XD
本範例實作採用 CSS3 3D 的X軸旋轉，並且利用 CSS3 的 shadow 屬性增添內部三個小分享區塊陰影，讓整個範例看起來 3D 質感更立體 ，若各位有任何建議也請不令指教喔^^

[CSS3] CSS3 設計 Path style Menu，不使用animation屬性

CSS3 的path style menu很早之前就有看過網路上有人寫過，但一直沒有去看看人家寫的CSS Code以及html Code，壞掉的印表機也一直想用 CSS3 寫看看這個例子，但只使用 CSS3 的 animation 屬性來寫其實沒啥困難的，而且超簡單，所以一直拖著沒寫，而壞掉的印表機思考是否能夠隨時中斷選單的轉換過程，所以採用 CSS3 transition 來做。
在做的過程中，其實要做到選單的效果很簡單，隨便寫一下 CSS3 transition 屬性都能做到，但問題又來了～要做到先出現的選單項目在最後才收合，而最後出現的選單項目先收合，加上旋轉的時間順序控制，這在之前是沒辦法用 CSS3 transition 做到的～昨天利用了一點小小的時間，嘗試實作出來了～分享給各位看看效果囉～