
html 5 使用者輸入元素 (ui elements) 新屬性
不老師 發表在 痞客邦 留言(0) 人氣(21,130)

css gradient 漸層設計冥想
說明:
css level 3 (
css 3)
gradient 歷經數年數次的規則編修,終於有了底定的態勢,多家瀏覽器也在本文發表的當年有了更完整的支援,讓我們不需再完全只能依賴像素化圖形製作
漸層。特別僅運用
CSS gradient 技術,設計出令人意想不到的圖案 (
patterns) ,期望能激發更多的設計想像空間。
適合:想模仿範例自行製作者,須熟悉
html 及
css 語法,並有使用繪圖軟體漸層經驗。
難度:
更新:
支援:詳細可參考
Can I Use (至更新時,部分仍為廠商專屬擴充特性,須加上
辨識詞)。
不老師 發表在 痞客邦 留言(3) 人氣(16,206)

css 3D 動畫 (3D animation) :立方體
不老師 發表在 痞客邦 留言(0) 人氣(8,481)

javascript 輪播廣告範例三則
說明:
jQuery Cycle 2 plugin 運用
html 5 的技術有了很大的轉變,與第一代
jquery cycle 的架構大不相同,提供設計者更多彈性,也就有了更多的設計發想空間。特別運用部分技術,設計富有更多想像的視覺輪動效果。範例也儘可能地符合
WAI 及台灣政府
無障礙網頁的相關規範。
Cycle 2 plugin 使用方法可參考
教學及基本解説。
適合:想模仿範例自行製作者,須熟悉
html,
css,
jQuery 及
javascript 語法。
難度:
更新:
支援:
jQuery 1.7 以後。
不老師 發表在 痞客邦 留言(0) 人氣(14,123)

css 3 動態視覺範例二組:
說明:
css level 3 (
css 3) 引領視覺設計進入了動畫層次,讓我們可以很容易製作出以往必須倚靠動畫程式才能完成的效果。特別僅運用
CSS 技術,設計出一連串令人意想不到的動態效果,期望能激發更多的設計想像空間。
適合:想模仿範例自行製作者,須熟悉
html 及
css 語法。
難度:
更新:
支援:依據個別範例内標註。
不老師 發表在 痞客邦 留言(7) 人氣(27,355)

css transform 能旋轉、傾斜、縮放變形 box
說明:運用
css level 3 (
css 3) 的
transform 特性 (
css properties) ,直接就可以旋轉、歪斜、放大、縮小、移動元素 (
elements) 的
box ,甚至
3D 的迴旋、透視。包括整個元素所有的內容也都隨之變形,不再侷限只能在僵硬的矩形框,對網頁排版及設計上會有很大的彈性和突破,而且對網頁正常的編排不會有相互排擠問題,一格黏接一格耗時費工的殘腦時代終將走入歷史。本篇僅先就
2D transform 的部分討論。
適合:有
html 及
css 語法基礎概念者。
難度:
更新:
支援:詳細可參考
Can I Use 。(至更新時,部分仍為廠商專屬擴充特性,須加上
辨識詞)
不老師 發表在 痞客邦 留言(23) 人氣(224,589)

css box-shadow 產生陰影效果或光暈效果的特性
說明:元素 (
elements) 的
box 呈現陰影或光暈的效果。可指定陰影的位移距離、顏色、模糊程度、擴散程度,也支援內陰影,甚至多層次堆疊的陰影。運用這個
css level 3 (
css 3) 的特性 (
css property) ,讓我們可以很輕鬆就能呈現迷人的視覺效果,而不需要煩瑣地一張一張製作圖片。更具意義的是,產生的陰影不會對版面編排造成影響。
適合:有
html 及
css 語法基礎概念者。
難度:
更新:
支援:
firefox,
google chrome,
opera,
ie9 (至撰文時) 。
不老師 發表在 痞客邦 留言(4) 人氣(179,003)

css attribute selectors (css 屬性指標)
不老師 發表在 痞客邦 留言(0) 人氣(8,573)

樹狀選單加入樹狀線條的設計
說明:設計具有樹狀線條的資料夾選單或樹狀選單 (
folder menu or tree menu)。本篇的討論僅適用一層子選單,更多層子選單的設計方式,以後再討論。
適合:有設計網頁及撰寫
css 語法經驗者。
難度:
更新:
不老師 發表在 痞客邦 留言(4) 人氣(29,594)

具有半透明值 (
alpha 色版) 的 css 3 顏色單位
不老師 發表在 痞客邦 留言(10) 人氣(301,727)