Quantcast
Channel: 男丁格爾's 脫殼玩
Browsing latest articles
Browse All 17 View Live

Image may be NSFW.
Clik here to view.

[CSS3]用 CSS3 做載入動畫 - 仿 Flickr 載入動畫

剛剛本來是要跟梅干 A 幾張新圖片來寫範例使用的,他就很大方的給我 Flickr 的相簿讓我自己選。選著選著...咦~Flickr 的載入動畫還蠻有趣的耶,那...就讓我手癢想來試看看。 這兩顆小球會一直移動交換位置,同時階層也會改變。至於怎麼做呢...就讓我們看下去... 檢視原始碼 HTML1 2 3 <body> <div...

View Article



Image may be NSFW.
Clik here to view.

[CSS3]text-shadow 文字陰影

在 CSS3 中除了能將區塊加上陰影之外,也能針對一般文字加上 text-shadow 文字陰影的效果,進而產生像是會發光或是有 3D 立體效果。 檢視原始碼 CSS1 text-shadow: none | [ <length>{2,3} && <color>? ]# 一段文字可以套用多組陰影效果,而一組陰影的完整設定是: 檢視原始碼 CSS1...

View Article

Image may be NSFW.
Clik here to view.

Phaser 官方範例 - load an image

Phaser 官方有一系列的範例,我會一一的針對這些範例來帶各位看看 Phaser 這遊戲框架能做到怎樣的效果。首先來看第一個範例,從範例中可以學到使用 Phaser 的基本用法跟如何預載圖片。 在網頁中基本上只要有個 div 就可以了: 檢視原始碼 HTML1 2 3 <body> <div id="phaser-example"></div>...

View Article

Image may be NSFW.
Clik here to view.

Emmet 教學 - 基本用法

大多數的編輯器都有相對應的 Emmet(Zen Coding) 套件可以安裝,它能加快並縮短開發者在編寫 HTML 及 CSS 的時間。Emmet 基本的用法就跟我們在寫 CSS 的概念是一樣的,讓筆者先一一介紹基本的使用方式。 TagName: 假設我們要產生一個 h1 元素,那麼我們只要直接輸入 h1 後,按下 Tab 鍵或是 Ctrl+E 鍵就能產生出包含起始元素及結束元素的內容 只要是...

View Article

Image may be NSFW.
Clik here to view.

Emmet 教學 - 階層及群組

我們在 Emmet 教學系列 - 基本用法中已經學會建立單一元素的方式了,但網頁中通常都是有很多的子元素、孫元素及各種的兄弟元素等等。如果您對 CSS 選擇器熟悉的話,應該多少有用到階層選擇器等功能。同樣的,Emmet 也支援及提供建立含有各種階層關係的縮寫方式。 筆者在此篇會一一解說子階層、兄弟階層、上一層及群組等用法。 子階層 Child: > Emment 在設定子階層用語法跟 CSS...

View Article


Image may be NSFW.
Clik here to view.

Emmet 教學 - 顯示文字

學到現在,我們雖然能產生各種元素,但像 h1 或 a 之類的都需要在展開 HTML 後才額外補上內文,那如果想要在寫的過程中也一併產生的話呢? 文字 Text: {} 如果想要產生元素中的文字時,可以透過加上 {} 大括號並在其中補上想要的內容來產生 基本上 {Text} 也能把它當是一個元素,只是它是純文字而已 不過若是接在 HTML 元素後的話,有些小細節可能要注意一下。例如當我們使用...

View Article

Image may be NSFW.
Clik 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 Article

Image may be NSFW.
Clik here to view.

Gulp 入門教學 - 壓縮 JavaScript 與 CSS

現在開發網頁大多會引用很多第三方的 JavaScript 跟 CSS 資源,當訪客瀏覽時就會啪啦啦的向主機發起下載這些資源的請求(Request)。其實瀏覽器跟主機同時間能處理的請求是有限制的,所以這樣的動作多少會影響到效能。 筆者現在要來教大家如何將這些 JavaScript 跟 CSS 資料分別合併同一支檔案,並且順便將檔案進行壓縮來節省檔案大小。 首先建立一個練習用的 gulp2...

View Article


Image may be NSFW.
Clik here to view.

Emmet 教學 - 複製元素及編號

當我們要產生 ul 清單時,通常需要一次輸出大量的 li,如果要一個一個使用 + 的方式來建立的話,那應該會瘋掉吧。不過在 Emmet 中,這當然都考慮到了。 複製 Multiplication: * 如果想要一次產生一組類似的區塊的話,我們可以使用 * 來當做類似數學的乘法效果,假設需要 5 個一樣的內容就是 *5 再假設筆者想要再一個 .container 中放置 3 個 .block,然後每個...

View Article


Image may be NSFW.
Clik here to view.

Emmet 教學 - 自訂屬性

有網友透過即時聊天系統來詢問說:「若當 HTML 產生後也存檔又重新開啟,但想要再調整某區塊或是一大塊的內容的話,那有辦法再還原成 Emmet 語法片段嗎?」,Emmet 其實只是設計在編寫過程中使用,但一但產生後就不可逆了,所以我建議該網友,若可以的話,可以參考使用一些 HTML 的樣板引擎,像是 Haml 或 Jade 等等。 Jade...

View Article
Browsing latest articles
Browse All 17 View Live




Latest Images