相信很多部落格都會把誰來我家設定的非常美觀,有興趣來看看吧!


1209008815.gif 誰來我家的中英對照:

/*--誰來我家--*/ #visitor {} 

/*--誰來我家的標題--*/ #visitor .box-text{} 若不想顯示標題,可在{}內打上display: none;

/*--誰來我家的內容區塊--*/ #visitor .box-title{ position: absolute; top: 0px; left: 0px; width:0px; height: 0px; } 

/*--誰來我家的頭像--*/ #visitor img{ width: 0px; height: 0px; padding: 1px; border: 1px dashed #; } 

/*--尚未點擊頭像的效果--*/ #visitor a img { filter:blur(opacity=0); }

/*--移動到頭像後的效果--*/ #visitor a:hover img { filter:alpha(opacity=100); position: relative; left: 1px; top: 1px; }






1209008816.gif 誰來我家語法使用說明:

紅色部分》這語法為可移動誰來我家的語法,若不想移動,請將此語法刪除。
Top 為設定的高度
Left 為向左移動(或者改Right 向右移動)
width 為誰來我家語法的總寬度(數字越大,此語法就會越往橫向伸長)
height 總高度(數字越大,此語法就會越往直立伸長,請自行判斷)
0px; px(pixel)為長度單位,請自行設定。


橘色部份》為設定頭像的寬&高。

width 跟 height 設定的 0px 要一致,例如 width: 20px; height: 20px;


綠色部份》這個代碼是幫頭像增加虛線,若不想使用可自行刪除

padding 為虛線跟頭像的距離
border 為虛線的粗度
dashed 為短直線的代碼,也可以修改其他種類(solid 實線 - double 雙重線 )
然後在 # 後面 ; 前面填上色碼(這裡提供我覺得還蠻不錯得色碼表


lamp_02.gif 線條效果圖片!
誰來我家 (1).png 


紫色部份
》為點擊前跟點擊後的語法效果。
filter: 後 (opacity=0); 之前,中間為修改的地方


粉色部份》為透明度的深淺。

(opacity=0); 數值越少越透明,最多到100


藍色部份》點擊後會有稍微凹陷的效果,若不想使用可自行刪除。

position: relative; left: 1px; top: 1px; 請自行修改






1209008819.gif 誰來我家濾鏡效果:

memo.gif 以下效果是要修改 filter:alpha(opacity=0); 紅色部份,透明度自行修改。

正常效果 Alpha 
模糊效果 Blur 
黑白效果 Gray 
負片效果 Xray 
對比過度 Invert 
隱藏效果 Mask (底部會顯示白色)
橫波效果 Wave 
左右相反 FlipH 


memo.gif 以下效果是要修改 filter:alpha(opacity=0); 紅色部份,請整串換掉。

由右下開始漸層透明效果 alpha(style=1); 
四個角偏橢圓透明效果 alpha(style=2); 
四個角四邊形透明效果 alpha(style=3); 
變形效果 Wave(strength=10,freq=5,lightstrength=10,phase=5);
馬賽克效果 progid:DXImageTransform.Microsoft.Pixelate(maxsquare=3); 
(maxsquare=3) 數值為馬賽克模糊度的大小,請自行調整。


memo.gif 以下效果是圓形朦朧感效果,要使用請全部修改。

#visitor a img {FILTER: alpha(style=2)}
#visitor a:hover img {FILTER: alpha(style=3)}
aicon_167.gif 還要在紅色字 #visitor {} 部份加上以下語法
BACKGROUND-POSITION: center bottom; BACKGROUND-IMAGE: none; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: #ffffff;


memo.gif 以下是濾鏡效果使用範例。

例如我想要點擊前黑白,點擊後馬賽克:
#visitor a img {FILTER: Gray;}
#visitor a:hover img {FILTER: progid:DXImageTransform.Microsoft.Pixelate(maxsquare=3);}

例如我想要點擊前彩色,點擊後負片+凹陷效果:
#visitor a img {FILTER:alpha;}
#visitor a:hover img {FILTER: Xray; position: relative; left: 1px; top: 1px;}


lamp_02.gif 以下效果圖片用的是"100"不透明!
誰來我家.png 




1209008819.gif 誰來我家圖片替換效果:

若要使用圖片替換效果,就盡量不要用濾境效果,這樣會變的很雜亂。

首先請在 #visitor img 內的 {width: 0px; height: 0px;} 設定都改為0px;

然後請複製以下語法,自行修改貼上

#visitor .box-text li {float:left;}
#visitor .box-text li a {display:block; width:圖寬px; height:圖高px; border: none; background: url(頭像圖片網址) no-repeat; }
#visitor .box-text li a:hover {background:#點擊後底部的顏色,請輸入色碼;}
#visitor .box-text li a:hover img {display:block; width:圖寬px; 圖高px;}
#visitor .box-more { display: none; }

若你的頭像要預定為20px,圖片的大小就要20公分,寬&高也請設定20px。 






1209008819.gif 整理說明

如果是使用後台介面修改,可利用 Ctrl+F 搜尋 #visitor。
以上的效果同樣也可使用在其他有頭像的地方。
aicon_167.gif 此篇為格主整理出來的資料,勿隨意複製、轉貼、引用。

    全站熱搜

    好心動 發表在 痞客邦 留言(13) 人氣()