玩弄∥充滿變化性的#menu－蘋果咬一口

你知道嗎?留言板的服務連結可以很特別!
光是[相簿｜網誌｜...]這樣多無聊?
這篇教學讓你的服務連結具個人風格喔!
心動唄?不如馬上行動!

★示意圖：
蘋果留言版的服務連結，所使用的效果有...
1.顏色漸層　2.連結+小圖　3.去框[｜｜｜]

★複製語法(去框)：
#menu span {visibility:hidden}#menu span a {visibility:visible}

★複製語法(連結+小圖)：
#linkMypage {BACKGROUND:url (http://你的圖址.jpg) no-repeat left bottom}

★參考語法(漸層及其他變化)：

＊黑白濾鏡
看起來是黑白連過去是彩色
.side a img{filter:gray;}
.side a:hover img{ filter:alpha(opacity=100) ;}

＊漸層濾鏡（款式一）
看起來是半透明連過去是彩色（由右下開始漸層透明）
.side a img{filter:alpha(style=1);}
.side a:hover img{ filter:alpha(opacity=100) ;}

＊漸層濾鏡（款式二）
看起來是半透明連過去是彩色（四個角有透明的感覺.偏橢圓）
.side a img{filter:alpha(style=2);}
.side a:hover img{ filter:alpha(opacity=100) ;}

＊漸層濾鏡（款式三）
看起來是半透明連過去是彩色（四個角有透明的感覺.四邊形）
.side a img{filter:alpha(style=3);}
.side a:hover img{ filter:alpha(opacity=100) ;}

＊ｘ光濾鏡
看起來是x光連過去是彩色
.side a img{filter:xray;}
.side a:hover img{ filter:alpha(opacity=100) ;}

＊對比濾鏡
看起來是對比過度連過去是彩色
.side a img{filter:invert;}
.side a:hover img{ filter:alpha(opacity=100) ;}

＊模糊濾鏡
看起來是模糊連過去是正常彩色
.side a img{filter:blur;}
.side a:hover img{ filter:alpha(opacity=100) ;}

＊隱藏濾鏡
看起來是隱藏連過去會出現照片（會顯示白色）
.side a img{filter:mask;}
.side a:hover img{ filter:alpha(opacity=100) ;}

＊波紋濾鏡
看起來有橫波連過去會出現正常照片（橫波較粗）
.side a img{filter:wave;}
.side a:hover img{ filter:alpha(opacity=100) ;}

＊馬賽克濾鏡
看起來是正常照片連過去會過馬賽克
.side A IMG {FILTER: alpha(opacity=100)}
.side A:hover IMG{FILTER: progid:DXImageTransform.Microsoft.Pixelate(maxsquare=3)

＊變型濾鏡
看起來是變形移過去是正常照片
.side a img{filter:Wave(strength=10,freq=5,lightstrength=10,phase=5);}
.side a:hover img{ filter:alpha(opacity=100) ;}

＊朦朧濾鏡
看起來是圓形朦朧感連過去會變回正常
.side {BACKGROUND-POSITION: center bottom; BACKGROUND-IMAGE: none; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: #ffffff}
.side A IMG {FILTER: alpha(style=2)}
.side A:hover IMG {FILTER: alpha(style=3)}

＊相反濾鏡
看起來是與照片左右相反連過去會變回正常
.side a img{filter:FlipH;}
.side a:hover img{ filter:alpha(opacity=100) ;}

挑好了濾鏡種類之後，不可以照貼喔
因為那是相簿並非網誌

例如蘋果留言版的效果
#menu a {filter:alpha(style= 2);}
#menu a:hover {filter:alpha(opacity=5);}

注意到了嗎?前面是#menu而不是.side
()括弧內數值自由更換

(1)歡迎各位引用此文，但請注意網路禮儀哦
(2)此「語法教學」無名小站適用
(3)如果喜歡，離開前給個回應囉，謝謝。
(4)開放右鍵，是給方便而不是讓有心人士隨便
(5)若語法有問題，請到留言板，禁止在C-BOX發問