壞掉的印表機 - 設計、生活、態度

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

noreply@blogger.com (壞掉的印表機) — Sun, 22 Dec 2013 13:46:00 +0000

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效果

noreply@blogger.com (壞掉的印表機) — Sun, 03 Nov 2013 18:55:00 +0000

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

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

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

noreply@blogger.com (壞掉的印表機) — Thu, 17 Oct 2013 06:09:00 +0000

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

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

noreply@blogger.com (壞掉的印表機) — Thu, 17 Oct 2013 05:44:00 +0000

在網頁設計的歷史中，恐怕最長命的就是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的酷炫的動態相片牆

noreply@blogger.com (壞掉的印表機) — Sat, 28 Sep 2013 10:00:00 +0000

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

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

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

noreply@blogger.com (壞掉的印表機) — Sun, 22 Sep 2013 12:55:00 +0000

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

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

noreply@blogger.com (壞掉的印表機) — Fri, 20 Sep 2013 19:11:00 +0000

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

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

noreply@blogger.com (壞掉的印表機) — Mon, 02 Sep 2013 03:42:00 +0000

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 繪製立體感圖示

noreply@blogger.com (壞掉的印表機) — Fri, 30 Aug 2013 15:45:00 +0000

自從 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 功能實作

noreply@blogger.com (壞掉的印表機) — Thu, 29 Aug 2013 06:31:00 +0000

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

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

noreply@blogger.com (壞掉的印表機) — Thu, 29 Aug 2013 06:07:00 +0000

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

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

noreply@blogger.com (壞掉的印表機) — Thu, 29 Aug 2013 05:43:00 +0000

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

CSS3動態切換登入畫面效果

noreply@blogger.com (壞掉的印表機) — Sun, 23 Sep 2012 19:19:00 +0000

使用CSS3製作動態切換的登入畫面，不僅效果棒，效率也好，壞掉的印筆跡利用了一點小技巧還讓功能相容於ie喔～

CSS3 3D折頁效果

noreply@blogger.com (壞掉的印表機) — Fri, 21 Sep 2012 10:33:00 +0000

利用CSS3的3D與轉換效果功能，配合CSS3超便利的選取器，就達到了這酷炫的效果，CSS3真的是非常有趣且功能強大的一個技術，視覺設計師能利用的最棒技術之一了，一起來玩CSS3吧^^

CSS3鐵捲門效果

noreply@blogger.com (壞掉的印表機) — Fri, 21 Sep 2012 10:21:00 +0000

利用新的CSS3動畫及新的CSS3選取器功能，再加上一些轉換效果～就能達到囉～而且完全不需要Javascript就能做到，網頁視覺設計師們～你們的時代來臨了～只要學會CSS3，你就能達到以往所無法達到的境界，一起來玩CSS3吧～^^

CSS3 3D動畫、文字陰影、content屬性特效範例之二

noreply@blogger.com (壞掉的印表機) — Fri, 21 Sep 2012 09:40:00 +0000

使用純CSS3來製作分享用的清單，真是又酷炫又方便～大家一起來研究CSS3吧～

圖示來源：http://www.iconfinder.com/icondetails/60823/128/blue_facebook_social_icon

僅作為效果示範用，無惡意侵權之意圖

CSS3 3D動畫、文字陰影、content屬性特效範例之一

noreply@blogger.com (壞掉的印表機) — Fri, 21 Sep 2012 08:43:00 +0000

使用純CSS3來製作分享用的清單，真是又酷炫又方便～大家一起來研究CSS3吧～

圖示來源：http://www.iconfinder.com/icondetails/60823/128/blue_facebook_social_icon

僅作為效果示範用，無惡意侵權之意圖

[CSS3] 純CSS3 旋轉展示區塊

noreply@blogger.com (壞掉的印表機) — Sun, 08 Jul 2012 05:59:00 +0000

使用純CSS3來製作展示用的區塊，真是又酷炫又方便～大家一起來研究CSS3吧～

[影片] 純CSS3相簿

noreply@blogger.com (壞掉的印表機) — Sun, 08 Jul 2012 05:55:00 +0000

CSS3實在太好玩了～這麼有趣的相簿，只要一個CSS class就能做完～大家一起來研究CSS3吧～

[CSS3] CSS3前後移動選單效果

noreply@blogger.com (壞掉的印表機) — Tue, 17 Apr 2012 20:28:00 +0000

壞掉的印表機利用CSS3的動畫功能，可以輕易的製作出如同FLASH一般的選單效果，不僅修改簡單～還省去FLASH需要發佈後再更新的這個缺點，而且在瀏覽器原生支援CSS3效果的情況下～CSS3絕對是未來強大的趨勢阿～歡迎大家一起來玩CSS3吧^^。以下是壞掉的印表機原創CSS3範例，歡迎大家多多指教喔～

[CSS3] CSS3 按我按我自動提示效果

noreply@blogger.com (壞掉的印表機) — Tue, 17 Apr 2012 11:28:00 +0000

壞掉的印表機原創的CSS3效果範例喔～畫面會自動告訴你～我可以用滑鼠點喔～用CSS3就能輕鬆達到這樣的效果～可愛又逗趣吧^^
請各位要稍微等等才會看到效果喔～以下是壞掉的印表機原創CSS3範例，歡迎大家多多指教喔～

[CSS3]利用CSS3製作iPhone收合夾效果

noreply@blogger.com (壞掉的印表機) — Tue, 17 Apr 2012 11:11:00 +0000

這CSS3的範例用在網頁上頗有趣的～整個網頁被切開的設計～連背景都會一起移動～非常有趣的一個CSS3範例喔～設計過程中壞掉的印表機還給他思考了兩天才想到怎麼「切畫面」又能在實際網頁中能夠實用而不只是花俏而已～算是小小的被考驗到的一個例子～壞掉的印表機原創CSS3範例分享給大家～以下是壞掉的印表機原創範例，歡迎大家多多指教喔～

[CSS3]用CSS3的動畫模擬apple網站的選單效果

noreply@blogger.com (壞掉的印表機) — Tue, 17 Apr 2012 06:35:00 +0000

壞掉的印表機原創的CSS3範例又來了～這次採用了CSS3的動畫功能來模擬apple官方網站的選單效果～錄製畫面時畫面會閃動～但事實上瀏覽器在操作時是不會閃動的～很棒的CSS3功能～分享給各位看看～以下是壞掉的印表機原創CSS3範例，歡迎大家多多指教喔～

[CSS3] 利用 CSS3製作MAC Dock效果

noreply@blogger.com (壞掉的印表機) — Tue, 17 Apr 2012 06:23:00 +0000

CSS3真的太有趣了～壞掉的印表機最近玩到欲罷不能阿～這是利用純CSS3做的Dock效果～分享給各位看看～大家一起來玩CSS3吧～^^以下是壞掉的印表機自行撰寫的CSS3範例，歡迎大家多多指教喔～

[影片] 玩樂CSS3 - iOS收合效果實作

noreply@blogger.com (壞掉的印表機) — Mon, 09 Apr 2012 10:46:00 +0000

最近都在玩CSS3的效果～看到底能有多少變化，就做了這個玩玩～有興趣的人可以看看囉～
以下是壞掉的印表機原創CSS3範例，歡迎大家多多指教喔～