2015年1月31日

深入解析 CSS Flexbox

Posted by oxxo on 1/31/2015 11:49:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/css-flexbox.html

摘要：
Flexbox 是一個 CSS3 的盒子模型 ( box model )，顧名思義它就是一個靈活的盒子 ( Flexible Box )，為什麼最近這個屬性才紅起來呢？最主要也是因為 CSS3 的規範終於普及 ( 或 IE 終於敗亡 )，加上行動裝置的發展促成了響應式布局興起，自適應長寬彈性相當大的 Flexbox 就趁勢而起了。

2015年1月26日

點選自動複製 ( ZeroClipboard )

Posted by oxxo on 1/26/2015 11:21:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/zeroclipboard.html

摘要：
自從用了 Github 開始，一直都覺得它裏頭複製網址的方法做得很好，只需要點一個按鈕就可以複製 ( 也有可能因為文字欄位太短才用這種方式 )，仔細看了一下它怎麼寫的，發現上面用 div 疊了一層 flash 的 swf ，百般不思其解的狀態下找了一些資料，發現原來不能用純 javascript 的方法來做是因為瀏覽器的安全性限制，不能夠單純用前端存取剪貼簿的資料，所以才會用 flash 作為介接。

2015年1月24日

SVG D3.js - transition 基本篇

Posted by oxxo on 1/24/2015 09:19:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/svg-d3-14-transition-1.html

摘要：
在 CSS 裡面有非常好用的 transition 屬性，同樣的在 d3.js 裡頭也有，而且比 CSS 的 transition 更加強大，除了會自動去計算補間動畫 ( 這個詞在 flash 裡頭很常聽到 )，更可以自己設定自己的補間效果 ( tween )，自己去設定相關的插值 ( interpolate )，許多 d3.js 圖表的動態效果，都是藉由這個 transition 來完成的！這篇將先會先介紹基本的 transition 的用法，後續會用其他篇幅來說明比較進階的應用。

2015年1月13日

CSS 搞怪的 text-decoration

Posted by oxxo on 1/13/2015 11:37:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/css-text-decoration.html

摘要：
自己從出社會工作開始，CSS 一定會出現在每個大大小小不同的專案裏頭，真可以說是吃飯的工具無誤，但今天在改一個專案的時候卻遇到了一個莫名其妙的屬性：text-decoration，這個屬性，其實就只是用來把一段文字加上上橫線、刪除線或底線的屬性罷了，通常會用在移除超連結的底線、或一些特殊強調的效果裏頭，但是這麼容易的屬性，為什麼會莫名其妙呢？就讓我們繼續看下去~

SVG D3.js - CSV 數據處理

Posted by oxxo on 1/13/2015 11:37:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/svg-d3-13-csv.html

摘要：
在數據的類型裡，CSV 是一種相當普及且方便的數據文件格式，從我們每個人手邊的 excel 就可以輕鬆地將數據轉換成 CSV 的數據格式，而對於 d3.js 而言，除了可以很輕鬆的處理 JSON 數據之外，也可以很便利的處理 CSV 的數據，搭配前幾篇所介紹的數據處理方法，就可以做出多樣的變化。

2015年1月12日

SVG D3.js - 數字格式 ( Formatting )

Posted by oxxo on 1/12/2015 12:20:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/svg-d3-12-formatting.html

摘要：
在 SVG D3.js - 時間格式 ( Time Formatting ) 這篇文章裡看完了時間的格式，接著就要來看看 d3.js 對於數字格式是如何處理的，因為 d3.js 主要就是針對數據去進行視覺化，所以大幅簡化了過去我們往往要寫很多判斷式來讓數字格式化的方法，只需要運用簡單的 API，就能夠輕鬆地讓數據格式化。其實講到數據的格式化，讓我想到一個強迫症藝術家 Ursus Wehrli 的一系列作品 ( Tidying Up Art )，從一堆雜亂無章的數據當中把這些數據分門別類並且格式化，意境上非常的雷同呀喔哈！( 所以這篇文章的圖片就用這系列藝術作品來表現吧！ )

2015年1月5日

認識 300 dpi

Posted by oxxo on 1/05/2015 11:53:00 下午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/know-300-dpi.html

摘要：
2014 年底我又做了一些印刷品，雖然距離上次做印刷品已經過了兩三年，但印刷的基本常識只要了解，就一輩子不會忘，但不管做幾次印刷，總是會聽到「300 dpi」這個專有名詞，不論是往來的信件或電話，印刷廠總是會要求要給 300 dpi 的圖，傳遞訊息的人也三不五時講個 300 dpi 來凸顯一下自己的專業，彷彿做印刷，不談「300 dpi」就渾身不對勁。

2015年1月4日

Mac Dock 實作

Posted by oxxo on 1/04/2015 12:18:00 上午
完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201501/mac-dock.html

摘要：
2015 年的第一篇文章，寫的是我自己在 2012 年的舊作！？隨著這幾年自己技術的提升，總算是運用了一些 HTML5 的技術，來讓當年做的這組 Mac Docker 效果更加完善，這裡將這個效果的製作方式分享給大家，歡迎和期待各路高手和大大能給予一些建議指教。( 完成範例：mac-dock-demo.html ) Mac Dock 的效果其實不難做，說穿了只用了一點點 CSS3 的 transition 與 transform ，HTML5 的 data-attribute，以及 jQuery 的 animate 而已，真正難的地方在於計算各個 icon 的大小和位置，當初光是想這個演算法就花了整整三天，最後出來只要五行就搞定了，可以參考下圖這個計算草稿：
訂閱： 文章 (Atom)