10yearssvg不知道大家有沒有注意到，這次的 Firefox 十週年活動網站上出現了一些特殊的動畫元素。這些元素不是 GIF 圖素，也不需要複雜的動畫套件，而是運用了 SVG 本身具備的動畫功能。 使用 SVG 來做動畫有幾個好處： 首先因為是向量圖形，所以任意縮放變形都不怕出現鋸齒顆粒。 多...

RWD 全稱為 Responsive Web Design（適應性網頁設計），簡單來說就是讓你的網頁能夠伸縮自如的設計方式。在前兩篇文章介紹完九個 RWD 小撇步之後，接下來小小分析一些常見的 RWD 流言，並不是說這些流言都是胡謅一通，但我們如果常因為流言中的一些負面模糊形容而卻步，很可能就錯失了...

接續上一篇所介紹的一些基本 CSS 排版小技巧，本文第一部分開始介紹 CSS media queries 常見的使用方式，以及一些在開發初期就要先注意的地方；第二部分則介紹一些適應性設計相關的工具及 Javascript 套件。希望這些小撇步可以幫助你在開發網站上事半功倍囉！ 運用 CSS medi...

繼之前蓋索林大師的一個打十個系列文章，介紹了 Gaia WebApp 支援多種設備的技巧，本系列文章將深入介紹一些網頁適應性設計相關的通用工具及方法。如果你還不知道什麼是適應性設計，底下有簡潔的介紹。 什麼是適應性設計？它適合我嗎？ 適應性設計 (Responsive Web Design，簡稱 R...

Firefox 愛在鵲橋狐你幸福 在八月份的七夕搭鵲橋活動裡，用網頁動畫呈現了牛郎織女團聚慶祝的畫面。不知道有沒有眼尖的網友發現，其實活動網頁裡的動畫效果都是運用 CSS animation 及 CSS transition 所做出的特效喔！揪～竟～要怎麼做出這些特效呢？讓我們繼續看下去。 這邊也順...

前面介紹過了去年九月份活動頁的 Canvas 刮刮樂、以及照片上傳元件。 這次重頭戲來啦！ 登登登！傳說中的～視差動畫！ 設定你的視差捲軸動畫 視差效果視差效果（圖片取自 Wikipedia） 先構思好動畫的進行方式，視差故名思義就是景物因遠近不同造成視線內移動速度的差異， 最常見的例子是在坐車時，...

接續前一篇介紹 Canvas 刮刮樂的文章， 本篇介紹的是去年九月份 Firefox OS 讓你盡情享受每一刻 活動的照片上傳作法。 有做過上傳表單的人一定對瀏覽器提供的預設上傳元件有一些意見， 它的外觀光用 CSS 來設定樣式也救不了，而且上傳圖片沒有前端預覽很不直覺。 幸好可以搭配<label元...

nanoblock firefox 難得破例不講技術，耶誕節快到了，應該要來點輕鬆的。 狐迷們，今天我們一起用積木來做一隻小火狐吧！ 首先要準備的積木材料如下圖： nanoblockfirefoxblocks 從頭到尾分解步驟 底下開始詳細的圖文分解步驟，只要一步步照著做，很快就可以完成你的積木小火...

我就先不賣關子，底下這個 fiddle 就是這篇文章的刮刮樂範例完整版。 可以玩玩看，試著瞭解裡面的程式腳本，或是 fork 來改改看。 有興趣但看不太懂 code 的話， 就跟著本篇文章的介紹帶你入門吧！ 如果大家有看過九月份的「Firefox OS 讓你儘情享受每一刻」活動網頁（註 1）， 應該...

培樂多黏土早餐 （圖片來源：radiobread） 六月的時候 Askeing 大大介紹了 Python 開發好幫手 – virtualenv，如果你剛好是 Python/Django 的新手，能照著 Askeing 的解說順利地完成 virtualenv 安裝使用，那麼這篇文章可以給你一個自己學習...