2014 ~ oxxo's blog ( 已搬家至 www.oxxostudio.tw )

2014年12月29日

SVG D3.js - 時間格式 ( Time Formatting )

Posted by oxxo on 12/29/2014 11:46:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201412/svg-d3-11-time.html

摘要：
我們都知道在 javascript 裏頭可以抓取電腦的當下的時間 (new date())，或是在裏頭設定某個時間，但如果要把產生的時間進行格式化，常常要耗費不少字串處理的時間，在 d3.js 裏頭，有提供不少的時間格式的 API ，讓我們可以輕鬆的產生我們所需要的格式。

SVG D3.js - 定義色彩 - 應用篇 ( colors )

Posted by oxxo on 12/27/2014 12:34:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201412/svg-d3-10-colors-2.html

摘要：
上一篇我們探討了 d3.js 裏頭色彩的定義與 API 操作方式，其實對於色彩，d3.js 還有不少應用的方法，也因此在官網所介紹的範例，才會如此的色彩豐富生動多姿，因此，這篇將繼續介紹色彩的應用，主要是利用之前介紹過的 scale 來變化色彩，很神奇吧！scale 要怎麼定義色彩？就讓我們繼續看下去吧~ 介紹之前，來回顧一下 scale 的用法，之前介紹過兩種用法，分別是 linear 和 ordinal ( 當然還有其他的，不過最常用的就這兩種 )，而 d3.js 的色彩同樣也可以使用這兩種 API 來進行定義，首先來看看 linear 該如何使用。

SVG D3.js - 定義色彩 - 基本篇 ( colors )

Posted by oxxo on 12/26/2014 12:00:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201412/svg-d3-09-colors-1.html

摘要：
在網頁的世界裡，色彩是非常重要的，通常我們在寫網頁的色彩，不外乎就是用十六進制 ( #f00、#fff )、顏色名稱 ( red、yellow ) 或 rgba ( rgba(0,0,0,0) )，而在 d3.js 裡，同樣也有操作顏色的 API,有別於一般我們在寫 CSS 的顏色方式，d3.js 是使用 RGB ( 紅綠藍 )、HSL (色調、飽和度，亮度) 、HCL 與 LAB ( 亮度，a 維度，b 維度 ) 的這些色彩空間，對於這些色彩空間不了解的，可以參考維基百科色彩空間。

SVG D3.js - 序數比例尺 ( ordinal )

Posted by oxxo on 12/23/2014 01:01:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201412/svg-d3-08-ordinal.html

摘要：
之前我在 SVG D3.js - 定義比例 ( scale.linear() ) 有介紹過比例尺的用法，當中有提到 ordinal，ordinal 與 linear 最大的差別，可以不一定要使用數字，可以使用非定量的值作為比例尺 ( 序數：非定量的值依序排列 )，因為可以使用非數字的值，畫出來的座標，也就更能朝理想的座標長相邁進了。

SVG D3.js - 陣列數據地圖 ( d3.map )

Posted by oxxo on 12/17/2014 12:15:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201412/svg-d3-07-data-map.html

摘要：
d3.map 這個其實我找不到合適的翻譯，只好暫時用我的破英文翻譯成「陣列數據地圖」，雖然有地圖兩個字，但跟實際的地圖卻是沒啥關聯性，主要是利用 d3.map 的 API，可以幫助我們把一連串的數據做轉換，與之前提過的巢狀數據處理 ( SVG D3.js - 巢狀數據結構 ( d3.nest ) ) 有異曲同工之妙，d3.map 會根據我們所下的條件，把特定的值取出成為 key 而成為一個新的陣列，也可藉由 get、has 或 set 的 API 對數據做判斷或重新設定，在許多的 D3.js 圖形與數據的處理中，d3.map 都扮演了相當中要的腳色。

2010 年工作的插畫 ( 2 )

Posted by oxxo on 12/14/2014 01:26:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201412/doublegreen-draw2.html

摘要：
同樣也是在遠綠資訊的時候畫的，比之前的大張一點的，也有一些點陣與向量的圖形 ( 點陣圖是一直以來我愛的風格，當兵的時候畫了很多 )，原本想順著這個線條插畫系列，看看能不能畫出一本插畫集，不過明年再說吧！因為想學的程式學不完呀！

2010 年工作的插畫 ( 1 )

Posted by oxxo on 12/12/2014 08:33:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201412/doublegreen-draw1.html

摘要：
在 2010 年結束中研院的生活，剛回高雄，在一家專門做人資系統 ( eHR ) 與 EIP 系統的公司「遠綠資訊」服務了兩年，說真的還滿感謝遠綠資訊對我的栽培，不僅讓我學了不少網頁的技術，也能把一些插畫運用在工作上，造就了現在努力紮紮實實學習的我，這裡分享一些當年所畫的簡單插畫，如果有「人資系統」或「teamwork」、「EIP」服務規劃的，也歡迎找敝人的前前公司遠綠資訊，最近他們也在推雲端服務 SmoothCloud，相信一定能有所收穫。( 變成廣告文了哈~ )

box-sizing 與 background-clip

Posted by oxxo on 12/11/2014 09:49:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201412/css-boxsizing-backgroundclip.html

摘要：
過去在學習 CSS 的時候，首要任務就是要理解「box model」，因為　box model 是 CSS 裏頭很重要的模型概念，描述了 padding、margin、border 與 content 的空間定位 ( 參考 W3C Box model )，雖然 CSS 是我吃飯的工具，但今天的專案竟然卡在一個簡單的小問題，因此就用一篇文章做個紀錄提醒自己不要忘記，也避免之後遭遇到又會卡住了。( 下圖就是 CSS 的 box model )

設計個性化 QR Code

Posted by oxxo on 12/08/2014 12:19:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201412/design-qrcode.html

摘要：
一直以來，我們對於 QR Code 的印象，就是那個黑色一點一點的小正方形，裏頭到底有些什麼東西，總是要經過手機掃描才可以真正了解，因此，這篇將會介紹四種設計個性化 QR Code 的方法，相信藉由這四種方式的互相搭配，大家都可以輕鬆地設計出個性化的 QR Code，再也不會是黑黑的一塊正方形，也不需要花錢去購買線上設計軟體了。

SVG D3.js - 巢狀數據結構 ( d3.nest )

Posted by oxxo on 12/06/2014 10:02:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201412/svg-d3-06-data-nest.html

摘要：
之前在 SVG D3.js - 淺談 D3.js 的資料處理提過基本的數據處理方法，這陣子又研究了一下 d3.js 的 nest，這篇就來介紹一下這個很有意思的數據處理方法：d3.nest。 nest 就是「巢」的意思 ( 不是潮喔~ 雖然 d3.js 好像有點潮 )，透過 d3.nest 的轉換，可以將原本的數據變成以 key 和 value 為主的巢狀結構，並且可以針對巢狀結構的每個節點進行排序，而所得到的巢狀結構數據，可以在程式裡重複使用而不會影響到原本的數據。

點擊後的 CSS 載入效果

Posted by oxxo on 12/03/2014 12:11:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201412/css-click-loading.html

摘要：
由於自己公司產品裏頭，有個按鈕在點擊之後，會有一兩秒的等待時間 ( 寄認證信 )，因此為了避免點擊後一兩秒的載入時間空窗，就做個 loading 動畫來強化使用者體驗，原本想說直接用張 gif 來解決，但又想藉著這個機會練功，就使用了 CSS 的漸層效果來達成，沒想到效果還滿好的，而且不需要額外增加 div 之類的元素，單純修改 CSS 和加上點擊事件就完成了。

簡單打造站內搜尋、標題搜尋

Posted by oxxo on 12/01/2014 11:12:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201412/site-search.html

摘要：
這篇文章來分享一下自己部落格使用的兩種站內搜尋方式，第一種是利用 google 的「自訂搜尋」，就可以做出利用 google 進行全站搜尋的超強大功能，第二種則是單純使用一行 CSS 和一點點的 jQuery，就可以實現純前端的單頁內容搜尋，我也將這種方法應用在 list 頁面進行標題的快速查找，兩種搜尋功能互相搭配，部落格的功能總算是完備了。

SVG D3.js - 區域 ( area )

Posted by oxxo on 11/16/2014 08:04:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201411/svg-d3-05-area.html

摘要：
理解了 line、scale 和座標軸之後，再來要介紹與 area 這個方法，area 就像字面翻譯一樣，可以繪製一個區域，同時也可以像 line 一樣的設定 interpolate ，因此搭配 line 一起使用，就可以畫出具有區域顏色的折線圖，相當的有意思。

SVG D3.js - 座標軸 ( Axis )

Posted by oxxo on 11/14/2014 12:45:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201411/svg-d3-04-axis.html

摘要：
藉由上一篇了解了最常用的 scale，再來就要談談座標軸 Axis，在 D3.js 裏頭，座標軸與 scale 幾乎是如影隨形地出現，畢竟既然是要用來顯示座標，就一定會出現在畫面裡，也因此必須要用 scale 才能夠讓座標軸按照比例大小擺放。至於什麼是座標軸 Axis 呢？很簡單就是水平 x 軸和垂直 y 軸，上面會有刻度，前使用 illustrator 慢慢刻畫刻度，常常必須刻到天花地老，如果會用 Excel，就可以讓 Excel 產生大家都會的一百零一種刻度，今天利用 D3.js，我們就可以自己做出自己的圖表刻度。

SVG D3.js - 定義比例 ( scale.linear() )

Posted by oxxo on 11/12/2014 10:57:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201411/svg-d3-03-scale-linear.html

摘要：
當我們面對一個折線圖或長條圖的長寬，超過電腦視窗的畫面大小，就必須用比例的方式讓圖表等比例縮小來適合寬度，在 D3.js 裏頭，就要使用 scale 這個方法來達成 ( 舖梗舖好長~ XD )，首先來看一下 scale 要怎麼來使用，Scale 有分成兩大類，第一類是「Quantitative」，主要以數字或日期為比例縮放的依據，第二類是「Ordinal」，則是以自訂的名稱或標籤為縮放依據，這篇會先介紹第一類「Quantitative」，接著再搭配座標軸「Axis」介紹第二類「Ordinal」。

SVG D3.js - 繪製線段

Posted by oxxo on 11/04/2014 12:34:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201411/svg-d3-02-line.html

摘要：
在之前的 SVG 研究之路 (4) - Path 基礎篇裡頭，詳細的列出了 SVG path 的繪製方式，現在我們要來利用 D3.js 的 line() API ，來完成線段 ( line ) 的繪製，且有別於單純的 SVG 產生 path 不容易放入數據，D3.js 可以根據我們的數據，自動產生對應的線條。

SVG D3.js - 淺談 D3.js 的資料處理

Posted by oxxo on 11/01/2014 11:15:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201411/svg-d3-01-data.html

摘要：
D3 畢竟是把數據做視覺化呈現的 library，所以最強的就在於它的資料處理能力，有別於一般我們要塞資料進 HTML，或要利用資料自動長出元素，不外乎都要用到 for 迴圈或是 each 的方式來進行，但對於 D3 來說，這些基本的功能已經全部包辦，甚至連同亂數和排序都內建在裏頭，因此，再進行利用 D3 畫圖之前，一定要先搞懂處理數據的方式，所以這篇就來嘗試一下 D3 資料處理的基本功能，也作為學習 D3 的一個紀錄。

SVG D3.js - 起手式

Posted by oxxo on 11/01/2014 01:08:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201410/svg-d3-info.html

摘要：
雖然說對 D3 的印象是從圖形的表現開始，但 D3 真正的強項卻是在它的資料處理 ( data )，也因為能夠用很簡單的方式處理資料，將資料餵給 HTML 或 SVG，才能夠輕鬆的長出漂漂亮亮的圖形，也才更能將心力放在設計一個完美個圖表上，而 D3 的 data 也不見得只適用在 SVG 的圖形產生，只要是 HTML 的 DOM 也都可以藉由這個方式作成，例如以往要將一百個一千個資料放到 DOM 裡或產出 DOM，必須用上 for 迴圈或是 each 的方式，這部分 D3 也幫我們都解決掉了，真是相當的方便。

SVG D3.js - 初體驗

Posted by oxxo on 11/01/2014 01:08:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201410/svg-d3-js.html

摘要：
D3.js 是一個用動態視覺化顯示資料的 js library，透過使用 HTML DOM、SVG 在網頁上顯示資料，在接觸 SVG 的時候不斷的接觸到 D3 的資訊，原本想說要先來玩玩 snap.svg 的，但由於大家都在談 D3，於是就也踏上這條不歸路，因為 D3 主要的應用會以 SVG 來表現，趁著之前 SVG 31 天教學的文章剛寫完，對 SVG 印象猶新之際，打鐵趁熱學學 D3。

SVG 完整教學 31 天

Posted by oxxo on 10/22/2014 01:17:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201410/svg-tutorial.html

摘要：
以下是我所撰寫的 SVG 完整教學，從一開始的入門，到中期的控制 SVG，到後期的 SVG 濾鏡，看完這三十一篇之後，相信對於 SVG 會有非常完整的認識，應用也會更加得心應手。

SVG 研究之路 (30) - filter - feConvolveMatrix

Posted by oxxo on 10/21/2014 12:03:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201410/svg-30-filter-feConvolveMatrix.html

摘要：
之前有介紹過模糊的濾鏡 ( SVG 研究之路 (13) - filter - feGaussianBlur )，既然有模糊濾鏡，為什麼沒有銳利化的濾鏡呢？其實是有的，在 SVG 如果說要進行銳利化，便要使用 feConvolveMatrix 這個濾鏡來實現，而且 feConvolveMatrix 不僅能進行銳利化，同時它也可以進行模糊的動作，不過因為是針對每個像素與四周像素進行矩陣運算，來計算出模糊或銳利，所以要寫的數字和程式相較於單純的 feGaussianBlur 濾鏡會複雜不少，因此如果有模糊的需求，還是直接使用 feGaussianBlur 吧！以下就來介紹一下 feConvolveMatrix 這個神奇的濾鏡。

SVG 研究之路 (29) - filter - 水波效果

Posted by oxxo on 10/10/2014 02:36:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201410/svg-29-filter-water-ripple.html

摘要：
在 SVG 研究之路 (28) - filter - feDisplacementMap 我們深入的認識了 feDisplacementMap 這個濾鏡，也做出了水波和國旗皺褶的效果，這篇將繼續針對 feDisplacementMap 做一些補充，同時也利用 SVG 的 animte 來做出水波的動畫，畢竟水波就是要會動才逼真呀！

SVG 研究之路 (28) - filter - feDisplacementMap

Posted by oxxo on 10/09/2014 02:35:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201410/svg-28-filter-feDisplacementMap.html

摘要：
在玩 photoshop 的時候，我時常會使用一個名為「移置」的特效，這個特效說難不難，可以參考我在 2008 年寫的的教學：photoshop：國旗飄揚皺折，在 Photoshop 裏頭這個特效的基本原理，就在於利用 Alpha 色版的深度，讓圖片的像素產生不同的位移情形，在許多的 AfterEffect 特效或 3D 效果裏頭，也都會使用類似的作法，來讓貼圖更吻合表面。

SVG 研究之路 (27) - filter - feImage

Posted by oxxo on 10/06/2014 12:42:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201410/svg-27-filter-feImage.html

摘要：
feImage 是 SVG filter 裏頭最簡單的濾鏡，不過為什麼要用一篇文章專門介紹它呢？就是因為 feImage 可以幫助我們更實際的了解 filter 的原理，除此之外，這篇文章也會搭配另外一個最簡單的濾鏡 feTile ( 到底有幾個最簡單呀 ) 藉由實際的範例來深入了解 SVG filter 的博大精深吧！

SVG 研究之路 (26) - 有趣的 Patterns

Posted by oxxo on 9/29/2014 12:21:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-26-patterns.html

摘要：
Patterns 是 SVG fill 裏頭的一個有趣元素，記得在 CSS 裏頭，我們可以自訂背景的圖案，達到許多很有特色的變化，然而在 SVG 也是如此，而 SVG 比 CSS 更加強大的地方，是你所有的圖案幾乎都可以在 SVG 裏頭畫出來 ( 當然強調細節的點陣圖案例外 )，以下將介紹 Patterns 的相關屬性與參數設定，並直接來看一些 Patterns 的範例。

SVG 研究之路 (25) - 再談漸層填色

Posted by oxxo on 9/28/2014 12:21:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-25-gradients-patterns.html

摘要：
前在 SVG 研究之路 (7) - fill 填色有介紹過 SVG 的 fill 填色，文章後面介紹了基本的漸層填色，但並沒有深入的介紹進一步的設定，然而高深莫測的漸層填色 ( Gradient ) 在 SVG 的 fill 裡面學問還真是不少，所以專門用一篇文章來解釋漸層填色，如此使用 fill 也才能更正確更靈活。廢話不多說，立馬來看漸層 Gradient ，漸層有兩種，第一種是線性漸層 ( Linear gradients ) ，第二種是圓形漸層 ( Radial gradients ) ，因為是漸層，所以要這樣子定義：

SVG 研究之路 (24) - 寫 jquery 產生圓餅圖

Posted by oxxo on 9/27/2014 01:25:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-24-jquery-pie-chart.html

摘要：
之前我們提過了 SVG 研究之路 (12) - pie chart 圓餅圖實作和 SVG 研究之路 (14) - 控制 SVG 的注意事項，現在就要來將兩者結合，使用 jquery 來畫出圓餅圖，同時使用 json 的格式來長出特定的角度和顏色，如此一來，在不需要 D3.js 或 C3.js 等 SVG js 框架的輔助下，也可以自己做出一個動態產生的圓餅圖，而且還很好用喔！( 如果對於圓餅圖的產生還不熟悉的人，請點選上面的連結回去再次閱讀一下吧！ )

SVG 研究之路 (23) - 理解 viewport 與 viewbox

Posted by oxxo on 9/25/2014 01:24:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-23-viewpoint-viewBox.html

摘要：
記得我初次接觸 SVG 的時候，常常為了定位和大小感到相當的疑惑，有時候明明設定了這樣的大小，莫名其妙的又變成了另外的大小，也不知道該如何去設定，直到看了 W3C 的定義之後，總算才明白了箇中原理，雖然我們都知道 SVG 該如何去使用，但往往一開始卻忽略了 SVG 的許多設定，所以這篇文章我們回頭仔細看看相關的設定，對於之後的圖形操作，也才能夠真正的融會貫通，也不需要一查再查了。

SVG 研究之路 (22) - 深入理解 SMIL Animation

Posted by oxxo on 9/22/2014 08:04:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-22-smil-animation-2.html

摘要：
上一篇應該已經大概明白 SVG 的動畫是怎麼一回事，但仍然有很多屬性和設定沒有解釋清楚，然而這些屬性和設定，才是 SVG 動畫的最精華所在，讓我們繼續看下去~ XD(英文夠好的人也可以來 W3C 這邊瞧瞧)

SVG 研究之路 (21) - 初探 SMIL Animation

Posted by oxxo on 9/21/2014 08:04:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-21-smil-animation.html

摘要：
SVG 的動畫元素是由 W3C Synchronized Multimedia (SYMM) Working Group 由 Synchronized Multimedia Integration Language (SMIL，同步多媒體集成語言) 所規範開發，SMIL 規劃具有許多的參數與設定值 ( 可以參考 W3C 的規範 )，也因為有了這些設定，我們便可以輕鬆的控制 SVG 圖形，這篇將介紹 SVG 基本的動畫，進階動畫控制的部分會在"下一篇文章進行分享。

SVG 研究之路 (20) - transform Matrix

Posted by oxxo on 9/21/2014 12:12:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-20-transform-matrix.html

摘要：
前一篇介紹了 SVG tansform 的前四個基本方法：translate、scale、rotate 和 skew，其實這四個方法都是建構在 Matrix 這個最重要的變形方法之上，只是因為 Matrix 真的要寫起來實在太過複雜，因此在許多效果上都直接省略了，不過如果可以了解 Matrix 的原理，面對更複雜的變形問題，也可以迎刃而解，就讓我們來進入 Matrix 的世界吧！

SVG 研究之路 (19) - transform 基礎篇

Posted by oxxo on 9/21/2014 12:11:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-19-transform.html

摘要：
在 CSS3 裏頭，我們常常使用到 transform 這個變形的效果，同樣的，對於 SVG 來說，transform 也是重要的變形屬性，與 CSS 一模一樣，SVG 的 transform 不外乎就是這五個方法：translate、scale、rotate、skew、matrix，這篇將介紹基本的前四個方法，下一篇會繼續介紹 matrix 這個比較複雜的方法。

SVG 研究之路 (18) - 再談 defs

Posted by oxxo on 9/16/2014 11:56:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-18-defs.html

摘要：
在前面的 SVG 研究之路裡，不斷看到 defs 這個元素的身影，從顏色的填充、線段的圖案、濾鏡的定義...等許多的效果，都必須使用 defs 來定義，因此就直接寫了這篇關於 defs 的文章，也把這個常見但用法又時常不同的元素，一次做一個整理，也方便之後使用的參考。

中秋節與 APPLE 發表會

Posted by oxxo on 9/08/2014 11:57:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/apple-moon.html

摘要：
2014 年中秋節後緊接著的就是 APPLE 的發表大會，雖然說自己手上有著 iphone、ipad2 和 macbook 和一本賈伯斯傳，但說真的對蘋果的了解真的沒有很深，不過身為一個設計師，一定要把中秋節的月亮和蘋果 logo 結合在一起一下！難得使用 Sigma 500mm 的砲管，總算把月亮拍的一清二楚啦！

SVG 研究之路 (17) - Stroke-marker

Posted by oxxo on 9/08/2014 04:17:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-17-storke-marker.html

摘要：
在 SVG 研究之路 (16) - Stroke-miterlimit 和 SVG 研究之路 (6) - stroke 邊框都有介紹了 stroke 的用法，其實 stroke 還有另外一個特別的功能可以設定，就是「marker」，顧名思義，就是在線段的起點、中間點或結束點，加上我們自訂的符號，就可以讓折線圖更有特色。

SVG 研究之路 (16) - Stroke-miterlimit

Posted by oxxo on 9/06/2014 04:17:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201409/svg-16-storke-miterlimit.html

摘要：
在之前 SVG 研究之路 (6) - stroke 邊框有介紹過邊框的用法，不過其實 Stroke 還有其他的屬性可以設定使用，以下將介紹：「stroke-miterlimit」這個線段屬性，與之前相同，這篇仍舊會搭配一些 illustrator 來說明，因為我覺得，能回歸圖形思考，才是向量「圖」的真實面貌。

穿透的 div ( pointer-events )

Posted by oxxo on 9/02/2014 04:16:00 下午

CSS 垂直置中的三個方法

Posted by oxxo on 8/31/2014 04:16:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201408/css-vertical-align.html

摘要：
我們在編輯一個版面，通常都會用到水平置中和垂直置中來設計，而水平置中很好處理，不外乎就是設定 margin:0 auto;或 text-align:center;,就可以輕鬆解決掉水平置中的問題，但一直以來最麻煩對齊問題，都是「垂直置中」這個討人厭的設定，以下將介紹三種單純利用 CSS 垂直置中的方式：「設定行高」、「添加偽元素」、「calc 動態計算」，其實一點也不難 ( 當然跟水平置中比起來難了一點 )，只需要觀念正確就可以解決。

噁心黏黏球 ( 純 CSS )

Posted by oxxo on 8/30/2014 12:30:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201408/sticky-ball.html

摘要：
這是一個純粹利用 CSS 所做出來的效果，這個效果說穿了就是一個影像處理的原理，做法跟 Photoshop 裡頭的幾乎一模一樣，只是一個用圖層和色版來製作，一個則是用 CSS ( 把 div 當成圖層思考就好了 )

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 可以看效果喔！ )

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 裏頭則是必須要自己手動輸入相關數值。

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 了 )

電子時鐘效果 ( 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 所作出的效果，以下就來介紹是如何做出來的。

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 有提供一系列的扁平風格樣式，但是由於技術尚未完全成熟，沒有相關的程式可以參考和套用，就自己寫了一個類似的，雖然還沒有模擬到百分之百，但已經是百分之八十接近了，分享一下。

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 吧！

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 吧！

CSS3動畫 - Google Loading Animation

Posted by oxxo on 6/30/2014 12:26:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/css-google-loading.html

摘要：
自從使用了智慧型手機之後，就常常在觀察手機 UI 的設計細節，隨著扁平化設計風格的興起，Google 的載入進度動畫也就變得相當的扁平風且具有設計感，後來發現不只手機的載入進度是用扁平化的風格，連 Google plus、Gmail...等 Google 產品都是使用類似的載入進度動畫，一時興起，使用 CSS3 做了一組 Google 的載入動畫。

CSS3 Cubic Bezier

Posted by oxxo on 6/28/2014 11:02:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/css-cubic-bezier.html

摘要：
Cubic Bezier 就是一個具有兩個端點與兩個貝茲控制點的曲線，( SVG 裏頭 Path 的 "C" 參數 )，其實這個利用貝茲曲線的控制方式在大多數的 CSS 中都不常見，主因這是 CSS3 裏頭動畫的速度控制選項，通常我們在設定動畫的速度，大多直接使用 ease in 或 ease out 來取代，但藉由 Cubic Bezier，我們更可以創造出各種不同速度控制的動畫效果。

這一年來的一些網頁設計

Posted by oxxo on 6/28/2014 12:25:00 上午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/oxxo-web-design.html

摘要：
一直以來我就對於網頁設計相當的感興趣，也因為對於網頁設計有著極大的興趣，直接就影響了我走向了網頁前端技術這條不歸路？！說實在我會的前端技術，大多還都只是網頁在視覺設計這一部分，畢竟身為一個台藝大出身的學生，專長還是比較集中在視覺創作這個部分，不過也因為學習的技術越來越多也越來越專精，也就開始慢慢地做出我自己想做的東西和特效，光是這一點就很值得開心了！以下分享一些自己這一年來的一些網頁設計版型，也期許自己能做出更多好的作品！

SVG 研究之路 (14) - 控制 SVG 的注意事項

Posted by oxxo on 6/26/2014 11:56:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/svg-14-control-SVG.html

摘要：
學會如何繪製 SVG 不稀奇，厲害的是學會如何利用 JS 和 CSS 去控制 SVG,以下將介紹兩個要注意的小地方，這也是我自己在學習的過程中所遇到的問題，搞懂這兩個小眉角，對於控制 SVG 一定就會更得心應手。( 當然後續還會有不同的小技巧，不過就等我寫到了再一起分享吧！ )

SVG 研究之路 (13) - filter - feGaussianBlur

Posted by oxxo on 6/25/2014 11:12:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/svg-13-filter-feGaussianBlur.html

摘要：
使用過 Photoshop 都知道，模糊就跟斯斯一樣多種，其中的一種就是「高斯模糊」，同樣的，在 illustrator 裏頭也有高斯模糊，因此 SVG 也就擁有高斯模糊的能力！以往我們單純用網頁製作「假」的高斯模糊，常常是將十幾二十張圖片更改透明度與些微的座標差距，來做出類似的效果 ( 可以參考這個我以前做的效果 )，這個方式其實在一些 3D 軟體做景深渲染的時候也常常使用，不過這種方法在網頁上必須撰寫一些程式才能辦到。今天有了 SVG 的 feGaussianBlur 濾鏡，我們只需要下幾個指令就能夠達到模糊的效果，且還能夠使用程式做互動的反應，是相當方便的喔！

SVG 研究之路 (12) - pie chart 圓餅圖實作

Posted by oxxo on 6/24/2014 09:44:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/svg-12-pie-chart.html

摘要：
在之前我所撰寫的 SVG path 的文章 SVG 研究之路 (5) - Path 進階篇當中，詳細介紹了關於 path 的 A 參數用法，回想一下，A 參數是拿來繪製弧形，因此這篇就藉由 A 參數的精妙之處，來繪製圓餅圖；什麼是圓餅圖呢？圓餅圖 ( pie chart ) 是在各式各樣的圖表中，常見且最基本的圖表類型，雖然我們常常使用 Excel 等試算表工具來繪製，但往往在轉成網頁的時候，就必須轉換成圖檔，無法動態的產生圓餅圖，不過在瀏覽器進步的今天，我們就可以藉由程式來繪製出相當精緻的圖表。

SVG 研究之路 (11) - filter:feColorMatrix

Posted by oxxo on 6/22/2014 09:43:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/svg-11-filter-feColorMatrix.html

摘要：
feColorMatrix 顧名思義就是色彩矩陣的濾鏡，用一個矩陣的計算，將圖片的色彩重新計算後輸出，便可以達到各種不同的色彩變化效果，在此之前，要先介紹一下圖片顏色定義，因為如果不了解圖片的顏色組成原理，就會無法明白色彩該如何去計算。( 可以先閱讀我的這篇文章：淺談位元色版 )

淺談位元色版 color channel

Posted by oxxo on 6/21/2014 09:43:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/color-channel.html

摘要：
這篇我們來探討一下基本的位元色版的原理，為什麼要寫這一篇，主要因應現在當紅的 HDR 與 EXR 的檔案格式，必須要介紹一下基本概念，而這些概念間接也會影響到像 SVG 、HTML...等繪製向量圖形的計算，不然屆時搞不清楚，就無法做出完美的效果呈現。

SVG 研究之路 (10) - filter part 1

Posted by oxxo on 6/18/2014 09:42:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/svg-10-filter-1.html

摘要：
這篇主要探討 SVG 的濾鏡：filter，是 SVG 裏頭比較少人著墨的地方，但卻也是可以讓圖形變化最大的地方，濾鏡不外乎像高斯模糊、混合、色彩變換...等，在我們使用繪圖軟體的時候，濾鏡是最常用到的功能之一，隨著瀏覽器的進步，幾乎所有的瀏覽起都支援 SVG 的濾鏡了 ( 各家瀏覽器 SVG 支援度 )，但是濾鏡牽涉到太多演算法，例如什麼純量乘積、阿達馬乘積...等，我實在也還沒搞懂，所以這篇先將濾鏡表列出來，之後再來慢慢研究。

SVG 研究之路 (9) - Clipping and Masking

Posted by oxxo on 6/16/2014 09:42:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/svg-09-clipping-masking.html

摘要：
使用過 Illustrator 的朋友應該都會知道，裏頭有一個重要的繪圖功能，就是剪裁和遮色片，這也是在圖形處理上頗為重要的兩個功能，而在 SVG 裏頭這兩個功能也沒有缺席，和之前製作文字跟隨路徑以及漸層填色相同的做法，在製作剪裁或遮色片的時候，我們也必須先建立定義檔defs，就可以輕鬆做出 Clipping ( 剪裁 ) 和 Masking ( 遮色片 ) 的效果囉！

SVG 研究之路 (8) - text 文字

Posted by oxxo on 6/15/2014 09:41:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/svg-08-text.html

摘要：
「文字」雖然字面上的解釋很簡單，但深入研究之後，發現 SVG 對於文字的設定，比我想像的複雜得多，但也因為有了這些我所不知道的設定和屬性，讓原本單純樸實的文字，更添加了幾分華麗的色彩和變化，這篇將介紹文字基本的屬性設定，以及一些進階的文字用法，學完之後，也就更能使用程式來控制文字，製作出與眾不同的動畫和特效了。

SVG 研究之路 (7) - fill 填色

Posted by oxxo on 6/14/2014 09:41:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/svg-07-fill.html

摘要：
介紹過了 stroke 邊框之後，接下來就要介紹 fill 填色，填色分成三種，一種是純色的填色，一種是漸層的填色，最後一種是利用圖案的填色，一張圖片的好看與否，很重要的一部分往往取決於色彩的呈現，因此掌握填色的技巧，對於圖片的表現也更能引人入勝，而 SVG 的好處，填色也是向量化，更可以用程式去控制色彩，以下將分別介紹三種填色的方式：

SVG 研究之路 (6) - stroke 邊框

Posted by oxxo on 6/13/2014 09:40:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/svg-06-stroke.html

摘要：
前面的章節都在介紹繪製形狀，而我都是使用單純的線條來描繪形狀的邊框，因此這篇就來聊聊 stroke ( 邊框 ) 的設定，其實在 SVG 裏頭邊框的設定很簡單，如果手邊有 Illustrator 的，邊框的設定就像裏頭筆畫的線條設定一樣，只是一個由視覺化的面板控制，一個由程式碼撰寫，有興趣的話，可以直接繪製線段存成 SVG，就可以很清楚了解邊框的設定。

SVG 研究之路 (5) - Path 進階篇

Posted by oxxo on 6/12/2014 09:40:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/svg-05-path-2.html

摘要：
看完了 Path 大部分的指令，這一篇就要介紹 Path 最困難的 A 指令，什麼是 A 呢？就是「弧形」 ( Arcs )，更簡單來說就是畫個橢圓圓弧 ( Elliptical Arc )，這裡可能會有人有疑問，為什麼是橢圓圓弧，而不是圓形圓弧呢？因為橢圓形可以做成圓形呀就是這麼簡單ㄎㄎ，因此， A 指令裏頭參數非常之多，竟然高達 7 個參數，以下就一一為大家解釋這些參數。

SVG 研究之路 (4) - Path 基礎篇

Posted by oxxo on 6/11/2014 09:39:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/svg-04-path-1.html

摘要：
接下來要談談 SVG 裡頭最為重要的元素：Path，因為SVG 是向量圖，所有的物件和元素都是由 Path ( 路徑 ) 所組成，所以 Path 就具有相當多的指令讓使用者設定，換句話說，搞懂了 Path 就等於搞定了SVG ( 或是搞定 80% 的 SVG，不管啦 )。

視覺創作 - 表情

Posted by oxxo on 6/10/2014 09:38:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/face.html

摘要：
這是自己很久以前的一系列作品，單純從表情進行發想，延伸和拓展，原本期待能夠有一系列的創作，最後只做了這幾張，真是又汗顏又殘念。其實我原本的專長就是 Photoshop，以前在學校和網路上都在分享 Photoshop 的技巧，說穿了影像合成其實沒什麼，重點是要訓練自己對光影的敏銳度，後來在網路上還看到有人分享了我這系列的作品 ( 還有人用其中幾張做了算命的圖？！ ) 以後如果有機會和閒暇時間，再來考慮把這系列給擴充吧！

SVG 研究之路 (3) - 基本形狀

Posted by oxxo on 6/09/2014 09:38:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/svg-03-basic-shapes.html

摘要：
通常我們在學習向量圖，第一個一定是學基本形狀，基本形狀不外乎這幾個：矩形、圓角矩形、圓形、橢圓、多邊形，因此 SVG 的基本形狀也從這幾個出發，當然，如果會使用 Illustrator，我也會建議直接用 Illustrator 拉形狀，然後儲存成 SVG，再去理解 SVG 的程式碼奧妙是很不錯的方式。

SVG 研究之路 (2) - Layer

Posted by oxxo on 6/09/2014 09:37:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/svg-02-layer.html

摘要：
許多的設計師談到向量繪圖，總是相當的興奮，但只要一提到向量繪圖裡的程式碼，馬上就暈頭轉向不知所云，這篇將要以 Illustrator 做為輔助工具出發，帶領大家能夠更了解 SVG 的架構。

SVG 研究之路 (1)

Posted by oxxo on 6/08/2014 09:37:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/svg-01-intro.html

摘要：
SVG（Scalable Vector Graphics）為一種可縮放向量圖形，是基於 XML，用於描述二維向量圖形的一種圖形格式，而 SVG 也是由 W3C 所制定的開放標準，老早就成為網頁標準，只是一直以來因為瀏覽器的不支援，導致無法廣泛被利用，雖然我自己在兩年前就開始玩 SVG，不過也因為瀏覽器的緣故玩一玩就荒廢了 ( 當然連手機瀏覽器都不支援 )，近年來瀏覽器等級的大幅提升， SVG 又開始變得火熱起來，又燃起了我心中的那團火呀！

Dreamsmile 影片製作

Posted by oxxo on 6/07/2014 09:36:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/dreamsmile-video.html

摘要：
這是為了之前公司的一個 App 產品 Dreamsmile 所做的一支形象影片，在完全沒有資源的情形下，硬生生地用畫的把這整支影片給畫出來，而且製作人員只有我一個人，包辦了劇情、腳本、畫、影片、音效和音樂，總共花了約兩週的時間製作，兩週的時間修改，真是累死我呀！

Icon Font 的使用方式

Posted by oxxo on 6/07/2014 09:36:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/css-icon-font.html

摘要：
之前介紹過 Web Font 的使用方式，這篇則是介紹 Icon Font 的使用，Icon Font 顧名思義就是使用小圖示 ( icon ) 當作字體，只需要打入對應的代碼，或是加上固定名稱的樣式，就能夠產生一個小圖示。這種方式的好處其實不少，因為使用 Icon Font 除了可以減少圖片的使用率，也可以讓 icon 的大小、顏色都能夠像文字一樣隨心所欲的調整，但相對的也是有些壞處，例如一定得使用外部載入字體、icon 只能夠使用單色 ( 因為文字只能單色 )...等。

Web Font 的使用

Posted by oxxo on 6/06/2014 09:34:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/css-web-font.html

摘要：
隨著雲端的越來越普及，許多字體的使用也逐漸躍上雲端，Google Fonts 是我很喜歡使用的一個雲端字體工具，最主要是因為完全免費，加上 Google 的空間和速度，讓許多有特色的英文字體可以在網頁上良好的展現，通常 web font 的格式不外乎就是 woff 這種格式 ( Web Open Font Format )，檔案大小會比一般的 TTF 來得小，但隨著瀏覽器的進步，也越來越多的字體使用 svg 的圖形格式，也可以做出 icon font，至於如何製作，會在另外的篇幅介紹。

Google Code Prettify

Posted by oxxo on 6/04/2014 09:33:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/google-code-prettify.html

摘要：
這是一套由 Google 出品的程式碼美化工具，主要用來美化分享在網站上的程式碼，通常我們的程式碼會使用pre的標籤包覆，但內容的樣式卻是非常的死板，若自己進行樣式的編輯，而要使用各種不同的顏色來滿足各種不同的代碼，這項工程更比登天還難，這時候就很需要程式碼美化的工具。

SCSS 安裝與執行

Posted by oxxo on 6/04/2014 09:32:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/scss-01-install.html

摘要：
SCSS 是我在 2013 年才接觸到的技術，其實也不算新，因為在我學習這門技術的時候，已經有不少相對應的工具與文章誕生，也因為看了這些教學和工具，才讓我深入地去學習一套好用的工具！

CSS 文字的換行

Posted by oxxo on 6/02/2014 09:32:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/css-word-break.html

摘要：
由於響應式網頁技術的興起，間接造成排版上不小的挑戰和創新，其中的一小部分就是文字的排版，這篇就來介紹一下在 CSS 裏頭文字的斷行，為什麼要特別寫這一篇呢？因為在做這個 blog 的時候，我竟然也遇到了斷行的問題，解決了文字的斷行，又冒出來pre的斷行問題，不過最後總算是都解決了，就寫下這一篇作為紀錄。

Dreamsmile 網頁設計

Posted by oxxo on 6/02/2014 09:32:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/dreamsmile-web.html

摘要：
http://www.oxxostudio.tw/articles/201406/dreamsmile-web.html

結構化資料 SEO 與 meta 標籤

Posted by oxxo on 6/01/2014 09:31:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201406/social-meta.html

摘要：
隨著這個 blog 放到網路上開始，SEO 也變得重要起來，而在 SEO 裏頭，最重要的第一項重點就是 meta 標籤，這也是要告訴搜尋引擎和社群網站，你的 blog 或是網站主旨是什麼，作者是誰，分享的縮圖是什麼...等這些我們認為理所當然的資訊，畢竟這些搜尋引擎的蜘蛛和社群網站的人工智慧，現在還無法分辨你我網站內容的重點，因此我們必須靠這些 meta 或結構化資料 itemprop，來告訴它們。

修圖與攝影

Posted by oxxo on 5/31/2014 09:30:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201405/edit-photo.html

摘要：
隨著數位相機與手機的進步發達，隨著軟體簡便與快速，大多數的人都可以藉由簡單的步驟完成不錯的照片，在各大論壇也常常有著著所謂的 RAW 檔直出作品發表，或是許多數位相機或手機本身成色的討論，而大家三不五時就關注的，仍舊是那張沒有經過修飾的「數位」照片。

CSS Specificity

Posted by oxxo on 5/30/2014 09:28:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201405/css-specificity.html

摘要：
什麼是 CSS Specificity 呢？翻成中文就是 CSS 的權重，而什麼是 CSS 的權重？就是指我們套用在 DOM 上頭的樣式，互相覆蓋的權力，例如直接寫在 DOM 上頭的樣式，權重一定會大於外部嵌入的樣式，寫在後頭的樣式，權重一定會大於寫在前頭的樣式，雖然看起來很容易理解，但實際上 CSS 的權重卻是分的非常仔細，許多人也常常會掉入權重的陷阱而不知所措。

搖控器 APP UI 設計

Posted by oxxo on 5/29/2014 08:51:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201405/remote-control-ui.html

摘要：
這是我在之前公司所設計的 UI 作品，主要是針對一款紅外線遙控器所設計的操作畫面，在專案的進行中，不知不覺也做了好幾個畫面，有一些畫面甚至花費我許多時間去雕刻細節，其實我不是一個很愛去雕琢細節的人，因為我一旦雕琢細節，就會開始追毛求雌沒完沒了，況且在專案很趕的時候，過多的細節往往會造成時程的延誤，總而言之，這些也算是我煞費苦心做出來的一些小作品，分享給大家。

CSS 偽類 child 和 of-type

Posted by oxxo on 5/27/2014 08:49:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201405/css-selector.html

摘要：
對於 CSS 的初學者而言，比較不容易理解的大概就是偽類以及偽元素，一個比較簡單的區分，偽類開頭會是一個冒號，偽元素開頭是兩個冒號，這篇文章主要介紹偽類，偽元素的部分會在其他文章中再度提及。

從小我就愛隨手畫畫

Posted by oxxo on 5/25/2014 08:47:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201405/painting.html

摘要：
從小我就喜歡畫畫，雖然也上過幾年的素描和水彩，但最愛的就是東畫畫西畫畫，這樣畫著畫著也莫名其妙的畫進了台灣藝術大學。這一系列的作品，其實是幾年前畫，卻我很想要一直延續下去的風格，不過就是因為最近實在比較忙碌，但這個 blog 完成後，卻突然給了我很多很多很多想要再度拿起畫筆的動力！

SublimeText 組合快速鍵

Posted by oxxo on 5/25/2014 08:45:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201405/sublimetext-package.html

摘要：
自己一直是使用 SublimeText 作為開發的工具，這套由 Google 工程師所設計出來的軟體，
因為相當的輕便與快速，又具有非常強大的擴充能力，所以有些人把它當作是好用的文字編輯器，
有些人則把它視作方便的開發軟體，總之也慢慢變成了主流的開發工具之一。

人中伯貼圖設計

Posted by oxxo on 5/25/2014 08:42:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀 "人中伯貼圖設計" 完整文章：
http://www.oxxostudio.tw/articles/201405/ozsun.html

摘要：
這是我之前為公司所繪製的 36 組即時聊天插圖：人中伯，思考要畫什麼角色的時間比我畫的時間還久，最主要在考量要如何畫出一組我自己也想用的貼圖，於是一個頗搞笑的角色就這樣誕生。

SublimeText Package

Posted by oxxo on 5/20/2014 08:38:00 下午

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201405/keyboard-shortcuts.html

摘要：
自己一直是使用 SublimeText 作為開發的工具，這套由 Google 工程師所設計出來的軟體，因為相當的輕便與快速，又具有非常強大的擴充能力，所以有些人把它當作是好用的文字編輯器，有些人則把它視作方便的開發軟體，總之也慢慢變成了主流的開發工具之一。

oxxo blog 轉移至 www.oxxostudio.tw

Posted by oxxo on 5/01/2014 05:01:00 上午

我一直想要做一個非常「純粹」的 blog，純粹的展現我的作品，純粹的紀錄自己的成長，
不會有太多的連結或廣告干擾，沒有太多額外的特效
( 當然也會具備恰到好處的互動效果與呈現方式 )，
www.oxxostudio.tw 就是一個非常純粹的空間，歡迎舊雨新知多多光臨，
www.oxxostudio.tw 包含了視覺創作、網頁前端程式、UI & UX 三個主要面向，
希望能藉由這個小小平台，能夠展示自己的作品與創意，同時也是我自己練習的平台，記錄自己的成長足跡！

點選前往：
OXXO.STUDIO ( www.oxxostudio.tw )

訂閱：文章 (Atom)

oxxo's blog 搬家到 www.oxxostudio.tw 囉！歡迎舊雨新知多多光臨！

2014年12月29日

2014年12月27日

2014年12月26日

2014年12月23日

2014年12月17日

2014年12月14日

2014年12月12日

2014年12月11日

2014年12月8日

2014年12月6日

2014年12月3日

2014年12月1日

2014年11月16日

2014年11月14日

2014年11月12日

2014年11月4日

2014年11月1日

2014年10月22日

2014年10月21日

2014年10月10日

2014年10月9日

2014年10月6日

2014年9月29日

2014年9月28日

2014年9月27日

2014年9月25日

2014年9月22日

2014年9月21日

2014年9月16日

2014年9月8日

2014年9月6日

2014年9月2日

2014年8月31日

2014年8月30日

2014年7月29日

2014年7月28日

2014年7月26日

2014年7月17日

2014年7月10日

2014年7月2日

2014年7月1日

2014年6月30日

2014年6月28日

2014年6月26日

2014年6月25日

2014年6月24日

2014年6月22日

2014年6月21日

2014年6月18日

2014年6月16日

2014年6月15日

2014年6月14日

2014年6月13日

2014年6月12日

2014年6月11日

2014年6月10日

2014年6月9日

2014年6月8日

2014年6月7日

2014年6月6日

2014年6月4日

2014年6月2日

2014年6月1日

2014年5月31日

2014年5月30日

2014年5月29日

2014年5月27日

2014年5月25日