以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

CSS Gradient似乎不該這樣-聊聊 CSS3

11/14 12' icon

Photo by http://www.spreadshirt.com

我曾經聊過"CSS 愈來愈程式化了",那是 2010 年年中的事,時間推進到現在 2012 年年底,許多技術及規格都大大更新,然則,這種更新,一則以喜,一則以憂。

先聊點歷史

如果你是老設計,那以下幾個問題,你會有感觸

在 CSS 未支援這些內容前,第一個情況,你必需用兩層表格完成,第二個情況,你必需作四張圖片,第三個情況,你必需作八張圖片,那個時候,美工佔設計很重要地位。

當 CSS 第一次出現時,為網頁設計帶來一點點驚艷,真正的驚艷,起肇於 HTML4 與 CSS 搭配,開始有了 Layer 概念後,哇,原來可以在網頁上不受行限制,盡情發揮。

排版

許多人相信,包括我,都認為 CSS 規格的推出,是為了網際排版的需求,也就是 CSS 後兩個字 SS (Style Sheet 樣式表) 所表達的函意,而排版的需求,隨便找份報紙、雜誌來看,屬於文字描述的部份,重點在字型、字體、字級、行距、字距、文繞圖、多欄、重點提示、表格強化等功能,屬於 DM 型式的部份,重點在圖形、標題、標題效果、圖形夾文字、圖形夾表格等。

以文繞圖來說,至今仍只能作到繞矩形圖,以多欄來說,CSS3 推出了 column-count 屬性,注意,是 CSS3 才推出,同樣的,普遍用於重點提示的框線加陰影或圓角,也在 CSS3 時才有了固定規範。

回歸到樣式這個名詞

既然是樣式,簡單的說,就是表現手法,好比一句廣告詞"網內互打免費",想強調"免費"這兩個字,就為這兩個字加上特殊的樣式。

而網頁和傳統靜態文宣的編排有個很重要的差別,在於瀏覽網頁是個動態的事情,觀看書報則是一個靜態的動作,看書,最"動"的事情是翻頁,而瀏覽網頁則大大不同,有太多"動作"發生,至少使用者的滑鼠會移來移去,所以,樣式的套用,除了傳統排版的需求外,應該還要再加上和使用者互動這類的內容。

CSS 的便利性

CSS 的排版能力,除了幾個小細節,說實話不輸專業排版軟體

比如說 first-letter 可以針對段落的第一個字元進行樣式設計。

比如 caption-side 讓表格標題的僵化得到抒解。

比如 clear 讓文字環繞得以加強彈性。

比如 list-style 讓清單樣式更豐富了。

但,太 over 了!

比如說 :enabled ,用在 <input> 標籤,適用於所有 enabled 的 <input> 元件,重點是,在不指定元件 disabled 時,所有 <input> 都是 enabled 不是嗎?

比如說 :before, :after 可以在指定樣式前後加點內容,一個專門處理樣式功能的規格,居然涉獵到內容這個工作,豈不怪哉?

比如說 perspective、rotate 這和 box-shadow 不同,很純粹是影像處理的工作,也被納入樣式。

比如說 appearance,可以 讓部份內容"看起來像",例如 appearance:button,看起來像按鈕,那為何不直接作成按鈕?或模擬一個按鈕樣式?

比如說 animation,作動畫,這好比麥當勞賣清粥地讓我大吃一驚。

比如 resize 可以讓使用者調整區塊大小,但設計者往往設成 none 將區塊鎖死。

接下來 filter Effects 又要推出了.......

似乎不該這樣

謝謝你看到這裡,或許你邊看邊點頭,也或許你邊看邊罵,都好,不要打筆戰,很純粹的個人觀點。

我還是要回歸到 CSS 的主要功能性-樣式,在 W3C 的 CSS 主頁上,標題這麼寫的

WHAT IS CSS?
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

(CSS 是一個為網頁文件增加樣式,例如字型、顏色、留白等簡單機制)

我們看到了 CSS 設計的初衷,而演變到現在,我個人認為快變成四不像,尤其當瀏覽器不支援時,一切空談,當瀏覽器支援後,又存在不同瀏覽器表現差異的問題,然後設計師們知道了新規格的推出,不趕緊加入就落伍了,看到種種新規格,一陣興奮,可以少作幾張圖,大大增加網頁的可看性,但激情只維持了三秒,接下來繁瑣的語法、瀏覽器的支援、大量的舊文件作品都要由個人網頁上拿掉,以免被客戶認為技術過時....

如果有一天,CSS 有 3D 這個屬性,我一點都不意外!喔,出現在 HTML6 我也不意外!

 

 

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

What makes you grow taller during puberty?   2017/7/22 上午 12:01:00

Excellent post! We are linking to this great article on our site.
Keep up the great writing.

foot pain big toe   2017/7/4 上午 04:58:00

First off I would like to say great blog! I had a quick question in which I'd like to ask if you do not mind.
I was curious to know how you center yourself and clear your mind before writing.
I have had trouble clearing my mind in getting my thoughts out there.
I do take pleasure in writing but it just seems like the first 10 to 15
minutes are generally wasted simply just trying to figure out how to
begin. Any suggestions or tips? Appreciate it!

foot pain diagnosis   2017/7/3 下午 11:14:00

These are truly impressive ideas in concerning blogging.
You have touched some pleasant factors here.
Any way keep up wrinting.

   2017/6/24 下午 08:36:00

I drop a comment each time I especially enjoy a article on a site or I have something to add to the conversation. It is triggered by the sincerness
displayed in the article I browsed. And on this post 【卜維丰】似乎不該這樣-聊聊 CSS3.
I was moved enough to drop a thought ;) I do have
2 questions for you if it's okay. Is it simply me or do a few
of the responses come across as if they are left by brain dead visitors?
:-P And, if you are writing at other sites, I would like to follow anything fresh you have
to post. Could you make a list the complete urls of your community pages like
your twitter feed, Facebook page or linkedin profile?

miscreantbullet57.jimdo.com   2017/6/12 下午 02:34:00

WOW just what I was searching for. Came here by searching for
fuck it

cristineemley.blogas.lt   2017/6/11 上午 05:33:00

Your way of describing the whole thing in this paragraph is actually pleasant,
all can easily be aware of it, Thanks a lot.

manicure   2017/5/4 上午 08:49:00

Nice post. I learn something new and challenging on websites I stumbleupon on a daily basis.
It's always exciting to read through content from other writers and use something from their
web sites.

manicure   2017/4/11 下午 06:29:00

I love what you guys are up too. This type of clever work and reporting!
Keep up the excellent works guys I've incorporated you guys to blogroll.

Eastpak   2016/11/14 下午 02:07:00

謝謝分享^^

Johnny   2012/11/15 下午 12:34:00

就像閣下把下面那個留言板做成美觀的樣式一樣, 原本單調的 fieldset 元素, 不用寫程式、不用做圖片, 使用 CSS 就能辦到。其實, 你也可以完全使用舊方法來做, 但是, 請想像一下, 萬一你哪天想把「給個回應」四個字改成「請留言」或者變換顏色; 哪天又想把這個留言板底色改成深色系, 那麼, 使用 CSS 套板似乎是平常人會選擇的做法。

再拿 appearance 來說吧! 在某種情況下, 這個功能就不是雞肋了。例如要把一段文字所在地加上按鈕, 卻又希望這個按鈕維持跟文字相同的動態 style (例如字型、底色等), 使用 appearance 確實是一個既快又方便的方法。當然, 你也可以堅持寫程式去動態加入 input 元素, 或者 toggle 兩者的 visibility 等等。

新的技術如果不能為大家帶來方便, 那麼這個技術就是沒用的。不過我個人覺得 CSS3 確實能帶給所有人方便。

Recca Tsai   2012/11/14 上午 12:18:00

如果就樣式的名詞來看
確實CSS3很多新增的屬性
讓CSS複雜化了

不過如果從HTML5的角度來看
似乎是有意讓HTML走向類似FLASH
所以它提供了這些方法
(就像是FLASH可以用程式寫動畫,或是用移動補間等等來設計動畫)
從這個角度似乎又很合理

或許這樣東西最大的問題是......
設計前端頁面設計該怎麼分工了


給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: