2015年2月12日

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

摘要:
自從 2014 年底的台北市市長選舉,柯 P 用了 GitBook 發表了「政策白皮書」之後,GitBook 這個以 GitHub 為基底的電子書瞬間爆紅,也因為政策白皮書瞬間流量爆炸,讓 GitBook 這個外國團隊還發公開信給柯 P 呀!( 連結參考 ) 然而 GitBook 這個服務也不是這時候才開始,根據他們官方說法,2014 年結束時在上頭已經有 3300 本電子書,而我也在 2014 上架了一本公司產品的教學手冊 ( 截至今日瀏覽人次快五千 ),目前也在籌備要上架自己的教學手冊。 因為 GitBook 是基於 GitHub 的方式運作,所以最基本發佈的方式與 Git 沒有太大的差異,而 GitBook 又是由 Node.js 開發而成,所以若要使用本機環境進行編寫書籍,就必須要安裝 Node.js,同時也要使用 Markdown 的語法來編輯,簡單來說,如果要用自己的編輯器 ( sublimeText、筆記本...等 ) 來編輯,就是安裝 Node.js 以及了解基本的 Git 與 Markdown。

2015年2月9日

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

摘要:
這是只用了一個 div 來做的小動畫,純粹利用 CSS3 的 animation 來完成,就像是一個正方形在地上彈跳,碰到地面的時候尖角還會壓縮變圓,陰影的部分也會隨著正方形升高而縮小,至於到底該怎麼完成呢?讓我們繼續看下去。 由於只使用了一個 div,要同時達到正方形旋轉與陰影縮放的效果,這裡必須使用兩個偽元素 ( before 與 after ) 來完成,嚴格來說,雖然只有一個 div,但是卻是把這個 div 當作外框,讓偽元素 before 作為旋轉的正方形,讓偽元素 after 作為陰影,如果對於偽元素不太了解的,可以參考我之前寫的這篇:電子時鐘效果 ( CSS 偽元素的應用 )

2015年2月2日

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

摘要:
之前我有寫過一篇文章:「CSS 垂直置中的三個方法」,這篇將延續該篇文章,繼續介紹另外四種垂直置中的方法,總共七種 CSS 垂直置中的方法分別是:設定行高、添加偽元素、calc 動態計算、使用表格或假裝表格、transform、絕對定位、使用 Flexbox。