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

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

說明： html 5 在填表相關元素 (form-associated elements) 增加了不少有用的屬性 (attributes) 。有的是強化使用者易用性，也使觸控裝置有了處理的原則。有的是在瀏覽器增加了驗證 (form validation) 功能，簡化了以往只能倚賴的複雜的 javascript 程序。

適合：有 html 語法基礎概念者。

難度：

更新：2014-12-4

(繼續閱讀...)

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

css gradient 漸層設計冥想

• 說明： css level 3 (css 3) gradient 歷經數年數次的規則編修，終於有了底定的態勢，多家瀏覽器也在本文發表的當年有了更完整的支援，讓我們不需再完全只能依賴像素化圖形製作漸層。特別僅運用 CSS gradient 技術，設計出令人意想不到的圖案 (patterns) ，期望能激發更多的設計想像空間。


• 適合：想模仿範例自行製作者，須熟悉 html 及 css 語法，並有使用繪圖軟體漸層經驗。


• 難度：


• 更新：2013-12-19

(繼續閱讀...)

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

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

• 說明： css level 3 (css 3) animation 動畫特性，搭配 3D transform 造形，讓我們不需用到 3D 動畫軟體，不需要撰寫程式，不需要 3D 繪圖，就能做出 3D 立體透視效果。特別僅運用 CSS 技術，做出簡單的 3D 立方體及動畫範例。


• 適合：想模仿範例自行製作者，須熟悉 html 及 css 語法。


• 難度：


• 更新：2013-6-3

(繼續閱讀...)

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

javascript 輪播廣告範例三則

• 說明： jQuery Cycle 2 plugin 運用 html 5 的技術有了很大的轉變，與第一代 jquery cycle 的架構大不相同，提供設計者更多彈性，也就有了更多的設計發想空間。特別運用部分技術，設計富有更多想像的視覺輪動效果。範例也儘可能地符合 WAI 及台灣政府無障礙網頁的相關規範。 Cycle 2 plugin 使用方法可參考教學及基本解説。


• 適合：想模仿範例自行製作者，須熟悉 html, css, jQuery 及 javascript 語法。


• 難度：


• 更新：2013-5-1

(繼續閱讀...)

不老師 發表在 痞客邦 留言(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

(繼續閱讀...)

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

css box-shadow 產生陰影效果或光暈效果的特性

• 說明：元素 (elements) 的 box 呈現陰影或光暈的效果。可指定陰影的位移距離、顏色、模糊程度、擴散程度，也支援內陰影，甚至多層次堆疊的陰影。運用這個 css level 3 (css 3) 的特性 (css property) ，讓我們可以很輕鬆就能呈現迷人的視覺效果，而不需要煩瑣地一張一張製作圖片。更具意義的是，產生的陰影不會對版面編排造成影響。


• 適合：有 html 及 css 語法基礎概念者。


• 難度：


• 更新：2011-06-16

(繼續閱讀...)

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

css attribute selectors (css 屬性指標)

• 說明：attribute selector 是善用元素 (elements) 既有的屬性 (attributes) 來指出元素，可有效降低不斷為元素命名 id 或 class 的麻煩。用在程式動態產生的 html ，又不能預先指定 id 或 class 的元素，也會很有助益；或是也可以找出屬性值 (attribute value) 有局部相同的元素。部分為 css level 3 (css 3) 新的規範。 jQuery attribute selectors 物件 (object) 相對應的語法也附帶列出，這部分瀏覽器都可支援。


• 適合：有 html 及 css 語法基礎概念者。


• 難度：


• 更新：2011-11-26

(繼續閱讀...)

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

樹狀選單加入樹狀線條的設計

• 說明：設計具有樹狀線條的資料夾選單或樹狀選單 (folder menu or tree menu)。本篇的討論僅適用一層子選單，更多層子選單的設計方式，以後再討論。


• 適合：有設計網頁及撰寫 css 語法經驗者。


• 難度：


• 更新：2008-10-13

(繼續閱讀...)

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

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

• 說明： rgba 及 hsla 為 css level 3 (css 3) 起，新一代表示色彩的單位 (color units)，最大的進展就是增加了「a」這個可以定義顏色不透明度 (opacity) 的 alpha 值；顏色的指定，當然包括了背景色 (background) 、邊線色 (border) 、前景色或文字色 (color) 、以及 text-shadow, box-shadow 的陰影色、 gradient 的顏色等，這讓以往網頁設計需要繁瑣過程的半透明效果變得簡單輕鬆多了。本篇也附帶討論舊式未支援的瀏覽器，可做到類似效果的幾種設計概念。


• 適合：有 html 及 css 語法基礎概念者。


• 難度：


• 更新：2011-06-12

(繼續閱讀...)

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

Box Model (框框模型) 是什麼？

請參閱👉新版解說。包含 3D 動畫展示。

• 說明：css box model 描述出文件中，元素 (elements) 所形成的最基本矩形區域 (boxes) 及專有名詞；此為呈現視覺性 (visual) 版面的重要基礎。


• 適合：有 html 及 css 語法基礎概念者。


• 難度：

(繼續閱讀...)

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

為物件指定 hasLayout property

• 說明： ie 專有用法 (ie only)。部分 ie 專有的特性 (property) ，如 filters and transitions ，有作用的必要條件就是指定 hasLayout 性質。 hasLayout 性質本來是微軟為了補救 ie 內部不完善所自創的，並非 w3c 標準，所以有時用起來覺得相當無厘頭。但神奇地， ie7 以前舊版衍生的網頁不正常呈現問題 (ie bugs)，大多數竟可由指定 hasLayout 來解決。


• 適合：有 html 及 css 語法撰寫基礎者。


• 難度：


• 更新：2008-02-18

(繼續閱讀...)

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