Clik here to view.
[CSS3]用 CSS3 畫圖示 - 雲朵
CSS3 除了用來裝飾網頁元素之外，其實如果你有天份的話，學學之前的日本神人透過畫出個哆啦a夢也不是什麼大問題哩。當然啦~羅馬不是一天造成的，現在要立馬畫出哆啦a夢是太強人所難了，所以我們就從最基本的圖示來練習吧！ 筆者要利用 border-radius 圓角效果來將各位怎樣畫出一朵雲。首先放置個 div 區塊： 檢視原始碼 HTML1 2 3 <body> <div...
View ArticleClik here to view.
[CSS3]用 CSS3 做效果 - 影像縮放位移突顯效果
有網友在影像縮放位移突顯效果中留言說該效果不用程式也能做出來。是的~在 CSS3 的 transition 及 transform 的加持下，像這樣的效果都能不靠程式就實做出來了。 因為沒有使用程式來產生超連結，所以 HTML 得調整一下元素內容： 檢視原始碼 HTML1 2 3 4 5 6 <body> <div...
View ArticleClik here to view.
[CSS3]box-shadow 區塊陰影
如果想在圖片上加入陰影效果時，一般可能會需要使用到影像編輯軟體才行。但現在可以用 CSS3 的 box-shadow 屬性就能輕鬆做出陰影效果了。 檢視原始碼 CSS1 box-shadow: none | <shadow> [ , <shadow> ]* 一個元素是可以套用多組陰影效果的，而一組陰影的完整設定是： 檢視原始碼 CSS1 box-shadow:...
View ArticleClik here to view.
[CSS3]用 CSS3 做表單 - 自訂單/多選框樣式(二)
在用 CSS3 做表單 - 自訂單/多選框樣式(一)中學到將 label 標籤改成帶有單/多選框的功能，而現在則是要教大家如何憑空產生出單/多選框的元素囉。 一樣是一個 radio 元素加一個專屬的 label 元素： 檢視原始碼 HTML1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <body>...
View ArticleClik here to view.
[CSS3]用 CSS3 做效果 - 影像左右移動突顯效果
如果有寫過 jQurey 動畫效果的話，應該會知道它本身並不支援各種顏色的動畫改變，不過現在只要使用 CSS3 的 transition 的話，管它是要從紅到綠還是從白到黑都是能直接產生補間動畫的。我們拿影像左右移動突顯效果來練習吧。 一樣的 HTML 內容： 檢視原始碼 HTML1 2 3 4 5 6 7 8 9 10 11 12 13 14 <body> <div...
View ArticleClik here to view.
[CSS3]用 CSS3 畫圖示 - 太極圖
border-radius 除了做邊框圓角效果之外，把它用在畫圖示上的話，其實能產生出很多不同的創意哩。筆者今天要繼續使用它來教各位畫-太極圖。 檢視原始碼 HTML1 2 3 4 5 6 <body> <div class="taichi"> <div class="white-circle"></div> <div...
View ArticleClik here to view.
[CSS3]用 CSS3 畫圖示 - 愛心
昨天教各位使用 border-radius 來畫太極圖，今天則是要教各位一樣是使用圓角效果來愛心。 我們只需要一個 div 區塊就可以了： 檢視原始碼 HTML1 2 3 <body> <div class="heart"></div> </body> 然後指定區塊的寬高： 檢視原始碼 CSS1 2 3 4 5 .heart { position:...
View ArticleClik 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
