超酷的CSS3 Animate及Shadow

超酷的CSS3 Animate:
demo: http://daneden.me/animate/#cta 
github: https://github.com/daneden/animate.css

順便也介紹一下一個用CSS3+jquery做出的陰影plugin
demo: http://syddev.com/jquery.shadow/
github: https://github.com/sydlawrence/jQuery-Shadow

Compass

用了只能說.. cool!


簡單紀錄一下安裝方法:
首先，先確定你有安裝ruby，有ruby之後開cmd打
get install compass

安裝完成XD


接著看一下參考資料
http://marlonyao.iteye.com/blog/652103
http://miau715.blogspot.com/2011/04/compassapp.html
http://www.i-design.tw/archives/170


compass有蠻多套件可使用的，這邊介紹一下 fancy-buttons
網站上的影片可以知道fancy-buttons可以做到怎麼樣的程度
打一段code就有這麼棒的效果實在很方便呀!

安裝
gem install fancy-buttons

要建立compass專案的方法是
compass create 專案名

加入fancy-buttons的話則要用
compass -f fancy-buttons -r fancy-buttons 專案名

最後，到 ruby資料夾/bin 找compass開啟 (不是compass.bat)
加入
require 'compass-colors' 
require 'fancy-buttons'

因為fancy-button需要compass-colors這個套件
所以記得要先
gem install compass-colors

在寫scss的時候，可在專案目錄下用
compass watch

這樣可在你的scss變動時，自動產生對應的css，非常方便!
( 不過不知道為什麼 compass -w 是沒用的 )

IE的CSS hack

這篇文章寫的就非常清楚了，這邊節錄一下我覺得比較常用的:

(以下皆節錄於: http://sofree.cc/ie6-ie7-ie8-firefox-css-hack/ )

區別IE和Firefox

【辨識符號】：「\9」

【範例練習】：

#tip {

background:blue; /*Firefox 背景變藍色*/

background:red \9; /*IE6、IE7、IE8背景變紅色*/

}

【說明】：因為IE瀏覽器看得懂「\9」，但是非IE的瀏覽器一律看不懂，因此就可以用這個語法來區分IE和Firefox(非IE瀏覽器，像是Opera、Google Chrome、Safari等)，因此以上CSS範例中，非IE瀏覽器是顯示藍色背景，IE系列瀏覽器是顯示紅色背景。

區別IE6、IE7、Firefox (方法 1)

【辨識符號】：「*」、「_」

【範例練習】：

#tip {

background:blue; /*Firefox背景變藍色*/

*background:black; /*IE7 背景變黑色*/

_background:orange; /*IE6 背景變橘色*/

}

【說明】：IE7和IE6可讀「*」(米字號)，IE6又可以讀「_」(底線)，但是IE7卻無法讀取「_」，至於Firefox(非IE瀏覽器)則完全無法辨識「*」和「_」，因此就可以透過這樣的差異性來區分IE6、IE7、Firefox，

區別IE6、IE7、IE8、Firefox

【辨識符號】：「\9」、「*」、「_」

【範例練習】：

#tip {

background:blue; /*Firefox 背景變藍色*/

background:red \9; /*IE8 背景變紅色*/

*background:black; /*IE7 背景變黑色*/

_background:orange; /*IE6 背景變橘色*/

}

【說明】：因為IE系列瀏覽器可讀「\9」，而IE6和IE7可讀「*」(米字號)，另外IE6可辨識「_」(底線)，因此可以依照順序寫下來，就會讓瀏覽器正確的讀取到自己看得懂得CSS語法，所以就可以有效區分IE各版本和非IE瀏覽器(像是Firefox、Opera、Google Chrome、Safari等)。