useful websites

some testing browser website

HTML5 (可以知道唔同browsers support html5 的情況)

http://html5test.com/index.html

CSS3 (唔同browser 對css3 selector 的tester)

http://tools.css3.info/selectors-test/test.html

css3 border-radius

border-radius 係可以好簡單整到圓角邊

支援的browser: firefox, chrome, safari, ie9
ff4 以上先supoort 冇browser prefix

ie9 唔駛prefix的

.border_radius{

    border:10px solid #ffdd00;

    

    /*

    *4個角都是以20px 為radius 的圓角

    *(圖1)

    */

    border-radius: 20px; 

    -webkit-border-radius: 20px; 

    -moz-border-radius: 20px;    

    

    

    /*

    *左上角 同 右下角 是10px, 右上角 同 左下角 是40px

    *有-webkit-字頭會好奇怪, 要小心~!

    *(圖2)

    */

    border-radius: 10px 40px;

    -webkit-border-radius: 10px 40px;

    -moz-border-radius: 10px 40px;

    

    

    /*

    *左上角 是10px, 右上角 同 左下角 是20px, 右下角 是40px

    *(圖3)

    */

    border-radius: 10px 20px 40px;

    -webkit-border-radius: 10px 20px 40px;

    -moz-border-radius: 10px 20px 40px;

    

    /*

    *由左上角開始順時針的4個角

    *(圖4)

    */

    border-radius: 10px 20px 30px 40px;    

    -webkit-border-radius: 10px 20px 30px 40px;    

    -moz-border-radius: 10px 20px 30px 40px;    

    

    /*

    *border-*, -webkit-border-*, -moz-border-radius-* *: 指某一個角 

    *-moz- 的寫法有少少唔同, 要小心~!

    *(圖4)

    */

    border-top-left-radius:10px;

    border-top-right-radius:20px;

    border-bottom-right-radius:30px;

    border-bottom-left-radius:40px;    

    -webkit-border-top-left-radius:10px;

    -webkit-border-top-right-radius:20px;

    -webkit-border-bottom-right-radius:30px;

    -webkit-border-bottom-left-radius:40px;    

    -moz-border-radius-topleft:10px;

    -moz-border-radius-topright:20px;

    -moz-border-radius-bottomright:30px;

    -moz-border-radius-bottomleft:40px;

}

圖1

圖2

圖3

圖4

css3 box-shadow

box shadow 可以好易幫d box 打陰影

圖片都得, 但inset 就冇效果

支援的browser: firefox, chrome, safari, opera, ie9

ff4 以上先supoort 冇browser prefix

.box_shadow{

    box-shadow: 5px -5px 8px 3px #0000ff, -10px -10px 15px 5px #ff0000 inset;

    -webkit-box-shadow: 5px -5px 8px 3px #0000ff, -10px -10px 15px 5px #ff0000 inset;

    -moz-box-shadow: 5px -5px 8px 3px #0000ff, -10px -10px 15px 5px #ff0000 inset;

}

第1個 (5px): x 的偏離, 正數係右面, 負數係左面

第2個 (-5px): y 的偏離, 正數係下面, 負數係上面

第3個 (8px):  blur 的長度, 個影的邊邊幾長 (可有可無)

第4個 (3px): 影的大小, 每邊長多幾多px (可有可無)

第5個 (#0000ff): 影的顏色

第6個 (inset): 影是向外定向內 (ourset/ inset), default 係outset (可有可無) (向內的話唔計padding)

可以set多過一個shadow, 用',' 分隔

.box_shadow 的效果

reference link: http://www.css3.info/preview/box-shadow/

css3 text-shadow

text-shadow 係css3 的standard
唔駛加browser prefix 都用到 =]
支援的browser: firefox, chrome, safari, opera [no ie =.=]

.text_shadow{

    text-shadow: 5px -10px 20px #ff0000;

}

第1個 (5px): x 的偏離, 正數係右面, 負數係左面
第2個 (-10px): y 的偏離, 正數係下面, 負數係上面
第3個 (20px): blur 的長度 (越大越濛)
第4個 (#ff0000): 顏色

 可以有幾個shadow 的, 用 ',' 分隔

.text_shadow 的效果