運用 clip-path 的純 CSS 形狀變換

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

摘要：
在 單一 div 的正多邊形變換 ( 純 CSS ) 這篇所提到繪製正多邊形的方法，算是純粹利用偽元素來完成，不過坦白說還有另外一種方法，可以將單一 div 做更多形狀的變換，這種方法就是 CSS3 的「clip-path」，這個「clip-path 」看起來有點眼熟，因為它原本就存在於 SVG 裡頭 ( 參考：SVG 研究之路 (9) - Clipping and Masking )，利用遮罩 ( 剪裁 ) 的方法，連接座標繪製遮罩區域，就可以做出許多不同的形狀，讓底色或底圖顯現，隨著瀏覽器對於 CSS3 的支援度大幅提升，自然而然的就可以用它來做些與眾不同的變化。 最先看到這個屬性的應用，是從這個網站看到的：http://species-in-pieces.com/ ，不得不說這個網站做得實在太神了，一開始看到還真以為是用 SVG 做的，沒想到竟然是用 CSS 刻出來的... 真是太驚人啦！

Read More

單一 div 的正多邊形變換 ( 純 CSS )

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

摘要：
上一篇 我們介紹了如何利用 before 和 after 偽元素來做 Material Design 風格的按鈕，裏頭關鍵的技術就在於活用邊框寬度和 div 本體寬高，因此這篇再加碼一個效果，就是純粹利用 CSS，讓「單一個」div，從正三角形變換為正八邊形 ( 單一 div 最多只能做到正八邊形 )，最後再搭配動畫的效果，變成正多邊形的變換動畫，也由於正多邊形需要用到不少的三角函數計算，為了方便起見，這裡將正多邊形的邊統一都設為 100px。 如果對於偽元素的應用有興趣的，也可以參考我之前的一些文章的啦！

Read More

純 CSS Material Design 風格按鈕

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

摘要：
其實 Material Design 的扁平化、以及著重動畫強調的設計風格早在去年七八月的時候就開始大流行 ( 2014 年的 Google I/O 大會 )，在台灣高雄的志誠大大也不遑多讓的翻譯了相關設計文件 ( 參考 Google Material Design 正體中文版 )，然而當初一看到，其實就很想要嘗試做做看 Material Design 的 icon 按鈕，這類型的按鈕往往只利用幾何色塊的變化，就能抓住使用者的眼光，並且從幾何形狀中明白按鈕的含意，這也是 Material Design 非常強調的設計理念和精髓。

Read More

純 CSS 繪製圓餅圖

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

摘要：
當初我玩 SVG 的初衷，一部分就是因為當時的瀏覽器無法支援 CSS3 的動畫效果，當年為了一個圓餅圖 ( pie chart )，做不出來簡直快抓狂啦，但是近年來瀏覽器的效能大幅躍進，基本上使用純粹的 CSS 也可以做到圓餅圖的效果 ( 甚至是動畫 )，所以就用一篇文章來記錄一下純 CSS 繪製圓餅圖的過程吧！ 利用 CSS 做圓餅圖不如 SVG 來的直覺，畢竟在 CSS 裡頭要做成圓形，只能利用border-radius的方法進行，因此純粹的 CSS 圓餅圖，勢必得用一個以上的 div 來組合產生，那麼，啾竟需要多少個 div 才有辦法做出一個漂亮的圓餅圖呢？目前我的做法「只需要用一個 div 搭配自身兩個偽元素」即可，換句話說，就是用 div 本身作為遮罩，內容的兩個偽元素互相旋轉搭配，就可以做出逼真的圓餅圖。 看完上面的文字，我相信一定還是搞不太懂，所以先來看一下步驟拆解圖，兩個偽元素拆解出來，就是兩個一模一樣的半圓形，利用半圓形的旋轉，就可以做出從 180 度開始往上算的扇形。

Read More

改變 HTML5 range 樣式的兩種方法

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/html5-input-range-style.html

摘要：
今天來探討一下 HTML5 的 range 這個新的 input 類型，不過重點不是在 range 要如何使用，而是在如何去改變 range 的樣式，做出一個漂漂亮亮的滑動桿。 過去我們要製作美美的滑動桿 ( range slider )，不外乎就是用個 span 或 div ，搭配判斷滑鼠座標 ( pageX、pageY ) 與點擊事件來製作，就算是 HTML5 具有了 range 的 input 類型，預設的樣式只能滿足基本的需求，對於有一些要求視覺設計的網站來說，根本就毫無用武之地，只好自己手動自幹一個 range slider 來用了。 雖然這篇會介紹兩種修改 range 樣式的方法，但由於 HTML5 與 CSS3 在各個瀏覽器之間仍然沒有完全統一 ( 雖然去年十月好像就說標準制定完成了 )，所以要改變 range 的樣式，仍然必須使用到各家瀏覽器自己的特有寫法來調整，因此下列的範例，主要以 Chrome 為主，也會介紹 Firefox 的用法，至於 IE，能吃嗎？XD

Read More

Gulp 學習 6 - 架設 Markdown 轉 HTML 環境

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/gulp-6-markdown-to-html.html

摘要：
要談到 Markdown 轉 HTML，其實有一大堆的 Markdown 編輯器都做得到，我個人最愛用的不外乎就是 Markdown Pad ( 只有 windows )、Mou ( Mac ) 和 lightPaper ( Mac )，然而不管是怎樣的編輯器，基本上都會具備將 markdown 轉為 HTML 的功能，所以一直以來我都不覺得在編輯器撰寫之後在轉檔有什麼不方便的，我的 blog 文章也一直都是用 markdown 寫的，不過自從用 gitbook 寫書之後，赫然發現 gitbook 的 markdown 自動轉換 html 功能真是太優了，用自己慣用的編輯器，存檔之後，Gitbook 就自動將 markdown 轉換為 HTML，而且還套上 layout 和樣式，真是太讚啦！ 於是，當我發現 Gulp 也有 markdown 轉換的套件之後，就決定可以自己來做一個轉換的環境，如此一來就不用受限於各個編輯器的樣式，也不用受限於 gitbook 只能轉電子書的樣貌，甚至可以搭配之前幾篇介紹過的壓縮打包、html extend...等，做出一個純粹用 markdown 編寫網頁的環境。

Read More

SublimeText - Seti_UI theme

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

摘要：
今天來介紹一個非常漂亮的 SublimeText theme：Seti_UI，這大概也是最近身邊的人幾乎每個人都用的樣式，我也是因為看到別人用才下載來用的，沒想到一用之後驚為天人，一定要分享給大家。

Read More

Gulp 學習 5 - 建立 HTML 模板

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/gulp-5-html-extend.html

摘要：
這個部落格經營了快一年，都是利用 fire.app 替我建置「純靜態」的 blog，換句話說，其實我只是撰寫內容，然後藉由 fire.app 幫我把內容和 layout 合併在一起，如果有興趣的人可以直接購買 fire.app 下來使用即可。不過這一篇並不是要介紹 fire.app，而是要利用 gulp，建立 HTML 的模板，同樣也是將 layout 和 content 分開，然後在預覽與上線的時候再合併。 這裡我們要用到的是 gulp-html-extend 這個套件 ( 參考 gulp-html-extend )，和之前介紹過的 gulp-html-replace 類似，gulp-html-extend 會把某些特定註解內的內容置換為我們想要的內容，但與 gulp-html-replace 不同的地方，在於 gulp-html-replace 要置換的內容寫在 gulpfile.js 裏頭，而 gulp-html-extend 則是將外部的 HTML 內容嵌入註解的區域。

Read More

Low-Poly Art

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/low-poly-art.html

摘要：
Low-Poly 這是個之前很紅的向量繪圖風格，不過其實 Low-Poly 存在已久，是由 3D 電腦繪圖發展而來，Low-Poly 是一個利用較少的多邊形，來構成一個 3D 的模型，由於減少了多邊形的數目，相對在做運算也會較為迅速，但缺點就是外觀會呈現一片一片的非擬真狀態。

Read More

Gulp 學習 4 - 建立 SCSS/SASS 編輯環境

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/gulp-4-scss-sass.html

摘要：
隨著時代的演進，這一兩年來我都已經是用 SCSS 在編寫 CSS，不過 SCSS/SASS 是建構在 Ruby 的環境之下，通常我們要使用，則必須先安裝 Ruby 以及 compass，或也可以購買安裝 Fire.app 代勞，那麼要如何才能用 gulp ，來建立一個自動執行轉換 SCSS 的環境呢？

Read More

Gulp 學習 3 - 打包壓縮 HTML

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/gulp-3-compress-html.html

摘要：
上一篇我們看完了打包與壓縮 CSS 和 JS，為什麼打包壓縮 HTML 不要一起講呢？是因為打包壓縮 HTML 還會用到額外的套件和方法，避免混淆，所以就分成兩篇來紀錄。 壓縮 HTML 與 CSS 和 JS 不同的地方，在於 CSS 和 JS 利用合併之後再混淆或壓縮，而 HTML 除了壓縮，更多了去置換內容的方式，例如我們有一個網頁，裡頭載入了三個 CSS 與三個 JS，壓縮之後就會變成只有一個 min.css 和一個 min.js，如此一來原本要載入六個檔案，瞬間就變成了只需要載入兩個檔案而已，也由於由六個 request 降為兩個 request，整個網頁的流暢度也會提升。( 就像傳送一千個小檔案，速度遠不如把一千個小檔案壓縮成一個大檔案，直接傳送大檔案還來得快 )

Read More

Gulp 學習 2 - 打包壓縮 CSS 與 JS

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201503/gulp-2-compress-js-css.html

摘要：
通常我們在寫網頁的時候，都會引入許多的 JS 和 CSS，而每引入一個也就會產生一個 request，當引入的越來越多，在效能和時間的等待上也就相對付出的越來越多，雖然在對於現在的網路速度和瀏覽器效能而言，看似問題都不大，但是對於一個流量超大的網站來說，一個使用者多了一個 request，在效能的處理上就相對重要許多，因此，在做網頁的時候，往往至少會分成兩個階段，一個階段是「開發時期」的版本，一個階段是「發佈上線」的版本，最主要就是會把「開發」和「上線」分開，如此一來才不會一時疏忽把還沒開發好的版本給對外公開了。

Read More

Gulp 學習筆記 1 - 安裝與執行

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

摘要：
在二月的時候，我花了不少時間在學習 Gulp 這個任務自動化管理工具，最主要受到了 Gitbook 的啟發，還有洧杰與志誠的推薦，讓我毅然決然地投入了 Gulp 的世界，過去因為工作的需求，接觸過一點點的 Grunt，Gulp 和 Grunt 的初衷相同，都是要把過去需要人工處理的步驟給自動化，如此一來就可以省下不少寶貴的時間，不過我的 Gulp 仍不熟稔，因此從這篇開始的接下來幾篇，都是我學習 Gulp 的歷程，如果有寫錯或是不明白的地方，也請大家多多給予指教。

Read More