HTML5 控制裝置陀螺儀 ( 三軸 )

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201506/html5-device-orientation.html

摘要：
自從幾年前入手智慧型手機之後，對於行動裝置上特有的陀螺儀 ( 三軸 ) 偵測與感應器就滿感興趣的，而相關的應用除了在一些典型的 APP 裏頭很常見到之外 ( 指南針、水平儀、星空定位...等 )，在遊戲裡頭更是屢見不鮮 ( 賽車、跑酷、飛行、滾球...等 )，但撇除 APP 不談，過去在網頁裡頭要使用陀螺儀的三軸感測，幾乎是不可能，應該是說沒這個必要，因為在智慧行動裝置尚未普及的年代，誰會搬台電腦轉來轉去呢？ 不過在行動裝置發達的現在，手機或平板的瀏覽器效能也跟了上來，加上 iOS 與 Android 兩大陣營對於瀏覽器可以控制硬體的權限逐漸鬆手，慢慢的當年 HTML5 裏頭所制定出來，和控制裝置硬體相關的 API 也逐漸可以派上用場。

Read More

玩轉 CSS 3D - 正八面體與正十二面體

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201506/css-3d-platonic-solid-2.html

摘要：
上一篇 介紹了正四面體與正六面體，接著我們要用同樣的方法，來製作正八面體與正十二面體，這兩個正多面體雖然組合的面比較多，不過因為具備了對稱性，所以只需要製作出一半的結構，另外一半再用反轉的方式接在一起即可。

Read More

玩轉 CSS 3D - 正四面體與正六面體

完整文章位於 OXXO.STUDIO 新網站
點選閱讀完整文章：
http://www.oxxostudio.tw/articles/201506/css-3d-platonic-solid-1.html

摘要：
繼 上一篇 我們理解了 CSS 3D 的箇中原理之後，廢話就不用多說，直接來畫正多面體吧！只要正多面體可以畫出來，基本上在 CSS 3D 的領域裡，大概就沒甚麼難得倒我們了。 首先看一下 維基百科，對於正多面體的介紹：「多面體，或稱柏拉圖立體， 指各面都是全等的正多邊形且每一個頂點所接的面數都是一樣的凸多面體。」簡單來說，就是非常對稱的立方體，而且每一個面都是由正多邊形組成，因此在這一篇，將會畫出正四面體、正六面體。 開始之前，如果有不會用 CSS 畫正多邊形的，請先參考我之前寫過的：單一 div 的正多邊形變換 ( 純 CSS )

Read More

玩轉 CSS 3D - 原理篇

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

摘要：
這篇 CSS 3D 的文章，其實醞釀已久，從 CSS 3D 出來的時候就已經在關注，只是要寫 CSS 3D 真的很費工，裏頭太多東西要講，加上最近在做 Webduino 可以改變世界的事業 ( Webduino 超讚呀！ )，所以就一直擱著了，趁著端午連假，一口氣把它搞定吧！ 雖然 CSS 3D 並非真的 3D，CSS 3D 坦白說就是純粹利用計算的方法，藉由瀏覽器的高效能，在 2D 的空間繪製一個 3D 的圖形，就像我們拿張紙，用鉛筆在上頭畫個正立方體之類的，也因為是藉用了瀏覽器來運算，自然而然非常地耗效能，往往只要有過多的形狀轉換為 3D 呈現，就會發現電腦的風扇開始狂轉，這也是使用 CSS 3D 必須要注意的地方，畢竟 CSS 原本就不是拿來做 3D 應用的技術，可以畫 3D，只是可以加強 CSS 呈現的美感和能力，但用在精細的 3D 動畫或轉場效果，還是交給專業的 3D 繪圖軟體來進行。

Read More

oxxo.studio 一周年生日快樂

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

摘要：
今天是 oxxo.studio 開台一年的日子，雖然說部落格上的文章不是從五月一號開始，但第一個版本是在五月一號上線的，當初其實也用這個部落格作為我自己的生日禮物 ( 我也是五月一號出生ㄎㄎ )。 oxxo.studio 一直以來都是我自己練習與筆記紀錄的空間，由於我自己的專長是視覺與網頁前端 ( 簡稱視覺前端 )，所以內容都比較著墨在網頁前端技術與一些視覺設計上，很感謝 facebook 社團朋友們與大大們的支持和捧場，可惜原本要挑戰每個月都有寫文章，結果四月在瘋狂的忙碌 Webduino 這個產品的開發與宣傳，導致四月份竟然沒有文章呀！( 原本以為有一篇，結果是在三月底寫的... )

Read More

運用 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