Clik here to view.
[CSS3]用 CSS3 做載入動畫 - 仿 Flickr 載入動畫
剛剛本來是要跟梅干 A 幾張新圖片來寫範例使用的，他就很大方的給我 Flickr 的相簿讓我自己選。選著選著...咦~Flickr 的載入動畫還蠻有趣的耶，那...就讓我手癢想來試看看。 這兩顆小球會一直移動交換位置，同時階層也會改變。至於怎麼做呢...就讓我們看下去... 檢視原始碼 HTML1 2 3 <body> <div...
View ArticleClik here to view.
[CSS3]text-shadow 文字陰影
在 CSS3 中除了能將區塊加上陰影之外，也能針對一般文字加上 text-shadow 文字陰影的效果，進而產生像是會發光或是有 3D 立體效果。 檢視原始碼 CSS1 text-shadow: none | [ <length>{2,3} && <color>? ]# 一段文字可以套用多組陰影效果，而一組陰影的完整設定是： 檢視原始碼 CSS1...
View ArticleClik here to view.
Phaser 官方範例 - load an image
Phaser 官方有一系列的範例，我會一一的針對這些範例來帶各位看看 Phaser 這遊戲框架能做到怎樣的效果。首先來看第一個範例，從範例中可以學到使用 Phaser 的基本用法跟如何預載圖片。 在網頁中基本上只要有個 div 就可以了： 檢視原始碼 HTML1 2 3 <body> <div id="phaser-example"></div>...
View ArticleClik here to view.
Emmet 教學 - 基本用法
大多數的編輯器都有相對應的 Emmet(Zen Coding) 套件可以安裝，它能加快並縮短開發者在編寫 HTML 及 CSS 的時間。Emmet 基本的用法就跟我們在寫 CSS 的概念是一樣的，讓筆者先一一介紹基本的使用方式。 TagName: 假設我們要產生一個 h1 元素，那麼我們只要直接輸入 h1 後，按下 Tab 鍵或是 Ctrl+E 鍵就能產生出包含起始元素及結束元素的內容 只要是...
View ArticleClik here to view.
Emmet 教學 - 階層及群組
我們在 Emmet 教學系列 - 基本用法中已經學會建立單一元素的方式了，但網頁中通常都是有很多的子元素、孫元素及各種的兄弟元素等等。如果您對 CSS 選擇器熟悉的話，應該多少有用到階層選擇器等功能。同樣的，Emmet 也支援及提供建立含有各種階層關係的縮寫方式。 筆者在此篇會一一解說子階層、兄弟階層、上一層及群組等用法。 子階層 Child: > Emment 在設定子階層用語法跟 CSS...
View ArticleClik here to view.
Emmet 教學 - 顯示文字
學到現在，我們雖然能產生各種元素，但像 h1 或 a 之類的都需要在展開 HTML 後才額外補上內文，那如果想要在寫的過程中也一併產生的話呢？ 文字 Text: {} 如果想要產生元素中的文字時，可以透過加上 {} 大括號並在其中補上想要的內容來產生 基本上 {Text} 也能把它當是一個元素，只是它是純文字而已 不過若是接在 HTML 元素後的話，有些小細節可能要注意一下。例如當我們使用...
View ArticleClik here to view.
Gulp 入門教學 - 安裝 Gulp.js
現在前端的技術越來越多了，連帶的若要將專案發佈到主機上之前，您可能需要進行以下的步驟： 1.將 Babel、TypeScript 及 CoffeeScript 編譯成 JavaScript 2.將 LESS、SASS、SCSS 或 Stylus 編譯成 CSS 3.再把 Jade、Slim 或 Haml 編譯成 HTML 4.合併 HTML 頁面跟 layout 5.將 CSS 加上前綴 6.再把...
View ArticleClik here to view.
Gulp 入門教學 - 壓縮 JavaScript 與 CSS
現在開發網頁大多會引用很多第三方的 JavaScript 跟 CSS 資源，當訪客瀏覽時就會啪啦啦的向主機發起下載這些資源的請求(Request)。其實瀏覽器跟主機同時間能處理的請求是有限制的，所以這樣的動作多少會影響到效能。 筆者現在要來教大家如何將這些 JavaScript 跟 CSS 資料分別合併同一支檔案，並且順便將檔案進行壓縮來節省檔案大小。 首先建立一個練習用的 gulp2...
View ArticleClik here to view.
Emmet 教學 - 複製元素及編號
當我們要產生 ul 清單時，通常需要一次輸出大量的 li，如果要一個一個使用 + 的方式來建立的話，那應該會瘋掉吧。不過在 Emmet 中，這當然都考慮到了。 複製 Multiplication: * 如果想要一次產生一組類似的區塊的話，我們可以使用 * 來當做類似數學的乘法效果，假設需要 5 個一樣的內容就是 *5 再假設筆者想要再一個 .container 中放置 3 個 .block，然後每個...
View ArticleClik here to view.
Emmet 教學 - 自訂屬性
有網友透過即時聊天系統來詢問說：「若當 HTML 產生後也存檔又重新開啟，但想要再調整某區塊或是一大塊的內容的話，那有辦法再還原成 Emmet 語法片段嗎？」，Emmet 其實只是設計在編寫過程中使用，但一但產生後就不可逆了，所以我建議該網友，若可以的話，可以參考使用一些 HTML 的樣板引擎，像是 Haml 或 Jade 等等。 Jade...
View Article