[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 做到的～昨天利用了一點小小的時間，嘗試實作出來了～分享給各位看看效果囉～