網頁藝術思考 - <strong class="xtra"><i lang="en">CSS</i> 網頁設計藝術</strong>

html 5 使用者輸入元素 (ui elements) 新屬性

(繼續閱讀...)

不老師 發表在 痞客邦 留言(0) 人氣()

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

(繼續閱讀...)

不老師 發表在 痞客邦 留言(3) 人氣()

css 3D 動畫 (3D animation) ：立方體

(繼續閱讀...)

不老師 發表在 痞客邦 留言(0) 人氣()

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

(繼續閱讀...)

不老師 發表在 痞客邦 留言(0) 人氣()

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

(繼續閱讀...)

不老師 發表在 痞客邦 留言(7) 人氣()

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

(繼續閱讀...)

不老師 發表在 痞客邦 留言(23) 人氣()

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

(繼續閱讀...)

不老師 發表在 痞客邦 留言(4) 人氣()

css attribute selectors (css 屬性指標)

(繼續閱讀...)

不老師 發表在 痞客邦 留言(0) 人氣()

樹狀選單加入樹狀線條的設計
說明：設計具有樹狀線條的資料夾選單或樹狀選單 (folder menu or tree menu)。本篇的討論僅適用一層子選單，更多層子選單的設計方式，以後再討論。
適合：有設計網頁及撰寫 css 語法經驗者。
難度：
更新：2008-10-13

(繼續閱讀...)

不老師 發表在 痞客邦 留言(4) 人氣()

具有半透明值 (alpha 色版) 的 css 3 顏色單位

(繼續閱讀...)

不老師 發表在 痞客邦 留言(10) 人氣()

Box Model (框框模型) 是什麼？
請參閱👉新版解說。包含 3D 動畫展示。

(繼續閱讀...)

不老師 發表在 痞客邦 留言(3) 人氣()

為物件指定 hasLayout property
說明： ie 專有用法 (ie only)。部分 ie 專有的特性 (property) ，如 filters and transitions ，有作用的必要條件就是指定 hasLayout 性質。 hasLayout 性質本來是微軟為了補救 ie 內部不完善所自創的，並非 w3c 標準，所以有時用起來覺得相當無厘頭。但神奇地， ie7 以前舊版衍生的網頁不正常呈現問題 (ie bugs)，大多數竟可由指定 hasLayout 來解決。
適合：有 html 及 css 語法撰寫基礎者。
難度：
更新：2008-02-18
適用：ie7 ~ ie5.5

(繼續閱讀...)

不老師 發表在 痞客邦 留言(1) 人氣()