LaZy cOdE

2011/03/16

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

2011/03/14

(Drupal)Photoshop 根本轉唔到ICO...但可以裝PLUGIN

整完Drupal site, 最後發覺唔記得轉browser logo, 開一開ps 完來唔support

原來有plugin

ICO (Windows Icon) file format plugin for Photoshop

The plugin gives Photoshop the ability to directly Open and Save Windows icon (.ICO) and cursor (.CUR) files (saving .CUR files is supported by version 2.1 or later)

http://www.telegraphics.com.au/svn/icoformat/trunk/dist/README.html

裝完再export 的時候, 就多了個選項了!

--------------------------------------------------------------
但轉icon 時, 若果就咁replace misc 入面既ico , 或者放root, 或者放theme, 係轉唔到icon既!

要入番 appearance -> [theme] - > shortcut icon setting

2011/03/13

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/