圖片框框的 CSS 特效

在網頁上搞一些小特效
其實滿炫的又可以讓網頁加分
最近看到 Creating a Border Animation Effect with SVG and CSS
抓下來研究研究
發現框線是用 SVG 畫的
搭配 CSS 的 transform
簡單的技術卻做出很炫的效果
玩特效的人真是不簡單啊

more

利用 CSS 跟 label 更換 checkbox 的方格

label 的 for 屬性可以連動到 checkbox
所以不用真正點擊到 checkbox 就可以 checked
利用這一點再加上 CSS 的 Adjacent sibling combinator
這樣就可以將醜醜的 checkbox 換成漂亮的圖片

more

設定 DIV 背景色的透明度,但不影響其他 DIV

DIV 的透明度設定是滿簡單的
不過要在 hover 時改變背景色和透明度
而且不影響 DIV 堆疊上方的其他 DIV
就要改變一下 CSS 的寫法

more

CSS 製作浮動選單,固定在網頁的旁邊

許多網站上都有浮動選單
就是會固定在瀏覽器可視範圍的某個地方
例:MB.EXTRUDER
就算用滑鼠滾動視窗
浮動選單會跟著你的畫面移動

more

Media types 分辨螢幕與列印的樣式

上網逛一些商店或百貨公司的網站
常有跳出優惠卷網頁可以列印
而網頁上看到的內容
希望跟實際上列印出來的結果不同
或是不希望將背景顏色列印出來的話
可以用CSS語法的Media types
去分辨螢幕與列印樣式

more

用 DIV、CSS 實做 Table

一般網頁要放表格式的資料時
一直以來大部分是用Table來做
用DIV+CSS也可以呈現表格式的資料
跟Table比較是有不少優點
不過由於DIV+CSS的方式是比較新的屬性
要注意瀏覽器版本的相容性問題

more

CSS 內嵌字體

一般寫HTML網頁上的文字
大部分會用系統上的內置字型
如果使用者電腦沒有安裝網頁上的字型
會自動顯示預設字型
不過這樣就無法呈現真實的設計

more

Flash 裡加入 Facebook 的 Like 按鈕(運用DIV+CSS方式)

用二個DIV分別放入Flash跟"讚"按鈕
利用CSS的position及z-index屬性
讓DIV重疊顯示及設定相對位置
就呈現出"讚"按鈕在Flash裡的假象

more

CSS 會讓網頁在各瀏覽器看起來不同

使用者打開瀏覽器去瀏覽網頁
這是再平常不過的事情
不過以使用者角度來看
不管是用什麼瀏覽器
所看到的網頁應該是一樣
這…..是沒錯的
但以網頁開發者來說
是沒辦法完全保證看起來都是一樣

more

margin 跟 padding 的差別

在網頁排版的時候
需要設定邊界的距離
margin跟padding用起來好像差不多
常常不確定要用那一個
這裡做個範例

more