2014年7月29日

CSS Water Wave (水波效果)

Posted by oxxo on 7/29/2014 12:30:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201407/css-water-wave.html

摘要：
以前玩 flash 的時候，總是會利用 flash 的遮色片做些特效，「水波」這個效果就是這樣子發想而來的，這個效果坦白說應該很多人見過也做過，但使用 CSS 來製作的人就很少了，因此這篇特別介紹如何使用 CSS，來完成這個水波的效果。範例：CSS Water Wave ( 使用 EZoApp 設計工具，點選 preview 可以看效果喔！ )

2014年7月28日

SVG 研究之路 (15) - filter - feComponentTransfer

Posted by oxxo on 7/28/2014 11:26:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201407/svg-15-filter-feComponentTransfer.html

摘要：
feComponentTransfer 是針對圖像中每一個像素，利用公式的計算，進行亮度、對比...等調整，其實就有點類似 Photoshop 裏頭的「曲線」調整模式，我們可以利用調整線條的斜率、或是曲線的公式，對圖片進行更細緻的調整，只是在 photoshop 裏頭已經幫我們做了視覺介面的處理，在 SVG 裏頭則是必須要自己手動輸入相關數值。

2014年7月26日

CSS webkit filter

Posted by oxxo on 7/26/2014 05:59:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201407/css-webkit-filter.html

摘要：
由於我自己是多媒體專長的背景，「filter」 ( 濾鏡 ) 這個詞基本上是陪伴我成長的一個重要技術 ( 或工具 )，不管是在影像處理還是向量繪圖，甚至是影片剪輯、聲音處理都會需要使用到濾鏡，但很可惜的在網站設計裡，卻沒有如同 photoshop 一般的濾鏡可以輕鬆使用，一張圖如果需要一些特效 ( 例如模糊、黑白、高對比...等 )，往往必須直接再重製一張圖來使用，雖然對我自己來說重做一張圖應該不用花到一分鐘，但對於許多不會影像處理的人而言，簡直就是另外一門學問了。

CSS 模糊效果

Posted by oxxo on 7/26/2014 05:58:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201407/css-blur.html

摘要：
一直以來 CSS 的效果就受到於瀏覽器的限制，例如超強大的 webkit filter，到了 chrome 以外的瀏覽器幾乎完全沒有用武之地，不過隨著各家瀏覽器對 CSS3 的支援度越來越高，也可以使用一些特殊的技巧來辦到模糊的效果，以下將介紹如何利用這些技巧，完成文字的模糊或是形狀的模糊。( 當然，圖片的模糊就非得借用 webkit filter 或 SVG filter 了 )

2014年7月17日

電子時鐘效果 ( CSS 偽元素的應用 )

Posted by oxxo on 7/17/2014 05:58:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201407/css-clock.html

摘要：
電子時鐘效果範例 ( 使用 EZoApp，點選 preview 可以預覽 ) 這是單純利用 CSS 做出來的時鐘，大量的應用了 CSS 裡頭的偽元素 ( ::before 和 ::after )，配合簡單的 JS 所作出的效果，以下就來介紹是如何做出來的。

2014年7月10日

Material Design - Progress and Activity

Posted by oxxo on 7/10/2014 05:57:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201407/svg-progress-bar.html

摘要：
這是一個利用 CSS 與 SVG 所做出來的進度條，仿照 Google Material Design 的設計風格設計，雖然 Google 有提供一系列的扁平風格樣式，但是由於技術尚未完全成熟，沒有相關的程式可以參考和套用，就自己寫了一個類似的，雖然還沒有模擬到百分之百，但已經是百分之八十接近了，分享一下。

2014年7月2日

WorldCup 2014 - Google Doodle 16~25

Posted by oxxo on 7/02/2014 11:00:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201407/google-doodle-worldcup2014-16-25.html

摘要：
繼續分享 Google 在 2014 世界盃的小動畫，其實從這些小動畫的說明，也可以大概了解一些有趣的典故，可見 Google 是真的頗用心在製作這些動畫，還會根據不同的國家族群製作不同的動畫，真是很讚呀！

WorldCup 2014 - Google Doodle 11~15

Posted by oxxo on 7/02/2014 12:27:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201407/google-doodle-worldcup2014-11-15.html

摘要：
Google 在今年的世界盃仍然就甘心的製作了一系列的首頁插畫，應該說是一系列的小動畫，心血來潮把這些動畫收集起來，仔細看才發現每張動畫都有些有趣的含意，以下就來看看編號 11~15 的 Google Doodle 吧！

2014年7月1日

WorldCup 2014 - Google Doodle 1~10

Posted by oxxo on 7/01/2014 11:14:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201407/google-doodle-worldcup2014-1-10.html

摘要：
Google 在今年的世界盃仍然就甘心的製作了一系列的首頁插畫，應該說是一系列的小動畫，心血來潮把這些動畫收集起來，仔細看才發現每張動畫都有些有趣的含意，以下就來看看編號 1~10 的 Google Doodle 吧！
訂閱： 文章 (Atom)