PIXNET Logo登入

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

跳到主文

把玩 css 網頁視覺設計、矜持 w3c 網頁標準語法 (html)、體認友善的無障礙網頁 (accessibility)。靜墨的荒莫 ～ 不老師

部落格全站分類：視覺設計

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 11月 26 週二 201314:32

  • CSS Gradient 漸層視覺設計範例 [5*]

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

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

  • 個人分類：CSS單位(units),值(value)
▲top
  • 7月 28 週一 200814:07

  • 半透明與透明效果設計 - CSS rgba, hsla 色彩單位 (CSS color units) [2*]

等級2
具有半透明值 (alpha 色版) 的 css 3 顏色單位
(繼續閱讀...)
文章標籤

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

  • 個人分類：CSS單位(units),值(value)
▲top
1

本站搜尋

<span>出爐文章</span>

  • HTML5 form elements (ui elements) 新屬性 [2*]
  • CSS Gradient 漸層視覺設計範例 [5*]
  • CSS 3D 動畫範例展演 [5*]
  • jQuery Cycle2 輪播廣告範例展演 [5*]
  • CSS3 動畫範例展演 [5*]
  • 旋轉、傾斜、縮放的變形效果 transform (CSS properties) [2*]
  • 陰影效果及光暈效果的 box-shadow (CSS property) [1*]
  • Attribute Selector 屬性指標 (CSS Selectors) [2*]
  • CSS 設計 - 樹狀選單, 資料夾選單 (tree menu / folder menu) [5*]
  • 半透明與透明效果設計 - CSS rgba, hsla 色彩單位 (CSS color units) [2*]

文章分類

toggle CSS selectors語法(CSS教學) (2)
  • Attribute Selectors (1)
  • pseudo-elements擬元素 (1)
toggle CSS property語法(CSS教學) (2)
  • transform,animation,transition (1)
  • background,border (1)
toggle CSS語法與一般規則(CSS教學) (2)
  • CSS單位(units),值(value) (2)
  • CSS box, block, inline (1)
toggle CSS設計研討 (3)
  • CSS hacks (1)
  • IE bugs & IE only (1)
  • CSS網頁設計魔法 (3)
toggle (x)HTML語法(教學) (2)
  • Attributes屬性 (1)
  • IE Only (1)
toggle jQuery Plugin (1)
  • 輪播廣告 (1)
  • 未分類文章 (1)

文章清單

文章迴響

  • [23/07/17] johsuan 於文章「旋轉、傾斜、縮放的變形效果 transf...」留言：
    您好, 想了很久還是不清楚如果旋轉的中心點在元素外，...
  • [17/12/14] barrychen 於文章「半透明與透明效果設計 - CSS rgb...」留言：
    感....感覺這個網站的css動畫好多，看起來好不舒服......
  • [16/04/05] pulipuli.chen 於文章「陰影效果及光暈效果的 box-shado...」留言：
    講解的很仔細，但真要微調還真困難啊@@'...
  • [16/03/23] 啊Q 於文章「旋轉、傾斜、縮放的變形效果 transf...」留言：
    抱歉0.0確實沒看到剛剛指細讀過後有看到您所說的. 會...
  • [16/03/21] 啊Q 於文章「旋轉、傾斜、縮放的變形效果 transf...」留言：
    不惑仔大大您好~想請問一下，那除了文字以外.可以用來放大放影...
  • [16/03/02] 劍木拓也 於文章「CSS3 動畫範例展演 [5*]...」留言：
    回給 風焰瘖 : 寫在這裡 <head><style>CS...
  • [16/02/25] 風焰瘖 於文章「CSS3 動畫範例展演 [5*]...」留言：
    不好意思 還是不太懂耶... 要打在哪裡?? 那請問C...
  • [16/02/24] 風焰瘖 於文章「CSS3 動畫範例展演 [5*]...」留言：
    請問這個語法要怎麼使用?? 如果說我在Dreamweave...
  • [16/01/15] 龍蝦帝國 於文章「半透明與透明效果設計 - CSS rgb...」留言：
    好酷~~~謝謝分享...
  • [15/12/02] isavia 於文章「CSS Gradient 漸層視覺設計範...」留言：
    這裡的範例都好棒~ 不過網頁中下一直有個弧形半透明mask...

參觀人氣

  • 本日人氣：
  • 累積人氣：