CSS3 Transform 變形效果 - 3D 篇

再來篇差不多的文章，同樣是換湯不換藥～當然還是要為各位解說一下 CSS3 Transform 的 3D 基本觀念。首先，我要先釐清一下軸線的方向：

哇～真是太神奇了！在高興的同時別忘了～並不是所有的瀏覽器都有支援！請各位還是以先進的瀏覽器以進行檢視吧！

3D CSS3 Transform

Google Chrome	Safari	Firefox	IE	Opera
12.0	4.0	10.0	10.0	12.0

CSS3 Transform 變形效果 - 2D 篇

嗯～就叫它「變形效果」吧！

在 CSS3 中再加入了 Transform 效果囉！此屬性可產生一些簡單的 2D 變形如縮放、旋轉、傾斜。此外，更可產生 3D 的變形，這...真的是太強悍啦！

在高興的同時別忘了～並不是所有的瀏覽器都有支援！請各位還是以先進的瀏覽器以進行檢視吧！

2D CSS3 Transform

Google Chrome	Safari	Firefox	IE	Opera
1.0	3.2	3.5	9.0	10.5

CSS3 Transition 轉場動畫應用實例 - 滑動廣告篇

再來一篇換湯不換藥的範例，我們稱它為滑動廣告！其觀念是與前篇一模一樣，僅僅是 HTML 結構不一樣而已！請各位仔細聽我說來...

若還不熟悉請見以下兩篇文章～

1. 淺談 CSS3 Transition 轉場動畫效果
2. CSS3 Transition 轉場動畫應用實例 - 滑動選單篇

CSS3 Transition 轉場動畫應用實例 - 滑動選單篇

不知各位有沒有仔細研讀 淺談 CSS3 Transition 轉場動畫效果 的文章內容呢？如果沒有仔細研讀的話，請趕快回去複習一番！否則，會不知道接下來我要做什麼喔！？

接下來，要教各位利用 CSS3 Transition 來製作出網路上常見的滑動選單效果。各位可以點選下方的 Demo 連結來檢視一下效果的呈現！( 請各位還是要注意一下前篇提供給各位的各家瀏覽器支援度 )

淺談 CSS3 Transition 轉場動畫效果

哇... CSS3 出現轉場效果了耶！也就是俗稱的動畫效果～讓您的滑入（ :hover ）不再是死板板的變化了！不過，還是請各位不要使用腦殘的 IE 來觀看喔！否則的話，是看不到 CSS3 Transition 的轉場動畫效果喔！以下幫各位整理一下瀏覽器的支援性～

inline-block對於各家瀏覽器的呈現

將清單設定為水平的方式最常用的方法就是對 li 設定 float:left ，用久了亦會過於乏味。最近在案子中 Amos 使用到 display:inline 也是不錯的選擇，只不過配合使用的 inline-block 此屬性對於 IE6、IE7 有些小小的問題。請看下列示範 ~

What is 「CSS Sprites」?

通常被意譯為「CSS影像拼合」或「CSS貼圖定位」。CSS Sprites並不是一門新技術，目前它已經在網頁開發中發展得較為成熟，但CSS Sprites並不是什麼金科玉律，但在很多情況下，它有著一定的優勢，最重要的是它可以減輕服務器的負載，提高網頁加載速度。隨著Web設計朝向精緻、巧妙的方向發展，設計師們開始考慮使用非Javascript的方式製作鼠標滑過、點閱過的效果，這時CSS Sprite應運而生。

說白了，CSS Sprites其實就是把網頁中一些背景影像整合到一張影像文件中，再利用CSS的「background-image」、「background- repeat」、「background-position」的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。

在CSS中所使用的單位

相對單位:

• px (像素，會隨著螢幕解析度而改變)
• % (百分比，相對於父元素。父元素可以是任何容器，例如:div、table、瀏覽器...等)
• em (假設父元素字型大小 9pt ,子元素字型大小為 2em ,結果子元素字型大小就是 18pt,也就是父元素的兩倍)
  例如 :
  body {font-size: 12pt;}
  h1 {font-size: 3em;}
  則標題一的文字大小會是36pt。
• ex (字母x的高度)

絕對單位:

• px(像素，螢幕解析度不改變的情況下)
  
• in (英吋)
• cm (公分)
• mm (公釐)
• pt (印刷點數)
• pc (1pc 等於 12pt)

What is 「CSS HACK」?

為自己做個筆記，不然常常忘東忘西的。

所謂的「CSS HACK」指的就是能夠解決瀏覽器問題的特殊技巧，僅管 W3C 制定了標準化的 CSS 和 XHTML 語法，但是，各家瀏覽器的支援程度卻不太一樣，因此衍生出了各種亂七八糟的問題，問題狀況輕的時候可能只是位置偏移了一點點，或是間距大了一點點....問題狀況嚴重的時候可能就會讓整個網頁的版面都垮掉了！

半透明效果

在網頁之中，如要對影像或有背景色彩的區塊加上半透明效果，並不需要由繪圖軟體著手(png的半透明)，僅需要一些CSS設定即可，但...卻又有瀏覽器的限制。

您不可不知的CSS群組化寫法

常常我們的 CSS 樣式中會有好幾個地方需要使用到相同的設定時，一個一個分開寫會是一件滿累人的工作，重覆性太高且顯得冗長，更不好管理....在 CSS 語法的基本設定中，就可以把這幾個相同設定的選擇器合併在一起，原本可能是寫了 7~8 行相同的語法，合在一起後就只要短短的一小行，怎麼看都讓人心曠神怡啊~

不可不知的各種CSS縮寫方式

使用CSS縮寫的好處

1. 當然就是CSS原始碼可變得更精簡，檔案也就更小。
2. 單一項目僅需一列即可清楚呈現，維護上與查找上也比較方便。
3. 看起來比較舒服啦~

解決各家瀏覽器排版的最佳方法「Reset CSS」

之前偶然在論壇上看到的東東，不知道對各位有沒有好處?
6666
重要的是我也還沒有測試過各瀏覽器的狀況~還是先貼再說吧!

使用CSS最令人頭痛的部分就是各家瀏覽器的差異性太多了，套句Amos說的~"腦殘的IE6"看起來正常，但是到了Firefox卻走了樣，位置全跑了...追根究柢之下才知道是IE6的問題，更何況還有IE7、IE8、Chrome、Opera、Safari...這麼多種不同的瀏覽器要測試，我想都應此要爆肝了吧!

會造成這樣大差距的主意在於「W3C 所制定的 HTML 標籤在 CSS 中的預設值」各家瀏覽器的支援程度都不太相同，基本上 Firefox 是最聽話的一家，只要是 W3C 規定的 Firefox 都會乖乖尊守，然而最不聽話的就是 IE 瀏覽器，常常跟 W3C 唱反調....唉！

何謂CSS?

CSS是Cascading Style Sheets的縮寫，我們中文稱為「串聯樣式表」，代表各樣式可分開定義，最後再串接起來套用在一個網頁上。
目前CSS已經發展到「第二代」也就是分為CSS1和CSS2，後者的版本較新，也含有更多的擴充功能。
CSS雖然可以加強版面的編排效果，但是不同廠牌，不同版本的瀏覽器所支援及呈現的結果都會有差異性，所以網頁加入CSS後，最好能在不同的瀏覽器中做測試，或是在網頁中標明您做設計的網頁，是用何種瀏覽器觀賞才能獲得最佳的效果。