*~Cat's EYEs~*

關於部落格
猫の目の中に世界を見ている
  • 165172

    累積人氣

  • 0

    今日人氣

    0

    訂閱人氣

用CSS的濾鏡效果美化相簿

由於濾鏡效果只有IE使用者看得出來,因此本文的圖片皆已使用濾鏡效果轉換後再截取放置了,讓FireFox使用者也能直接立刻看到效果。

原圖(無任何效果):

語法:
以下語法皆分成兩部份解說,新舊版使用者也有另外的說明

濾鏡參數:


●Alpha(透明與漸變)<<底圖顏色會對漸變(柔邊)造成影響,白色會接近透明,黑色會像被暗洞吞沒一般

屬性值:filter: alpha
數值:opacity(透明效果)=0~100(0為完全透明、100為完全不透明,一般設定多以20~80設定)   style(漸變)=1(線形)、2(放射狀)、3(長方形)
            
                     
(opacity=50,style=1)線狀漸變 
(opacity=50,style=2)放射漸變   (opacity=50,style=3)長方形漸變


●Blur(模糊)

屬性值:filter: blur
數值:direction(模糊方向)=0~270(0為垂直向上,每45度為一單位,預設值為向左270度)  strength(模糊範圍)=5~n(預設值為5px,輸入值為整數,單位為像素)
                                                              
(direction=45,strength=20)45度模糊、範圍20像素  (direction=180,strength=20)180度模糊、範圍20像素


●FlipH、FlipV(水平翻轉、垂直翻轉)

屬性值:filter:
FlipH、FlipV
(FlipH水平)        (FlipV垂直)


Gray(灰階)

屬性值:
filter: gray      


●Invert(底片、負片效果)

屬性值:
filter: invert     


●Xray(X光片效果)

屬性值:
filter: xray        


●Wave(波浪效果)

屬性值:
filter: wave
數值:freq(波浪數)=1~n    lightstrength(光影效果)=0~100  phase(偏移效果)=0~100  strength(振幅大小)=
0~100
(freq=3, lightstrength=50,phase=30,strength=10)



設定語法:
開啟CSS樣版後,利用Ctrl+F搜尋到修改數值
無論是否全部修改,建議還是至少留其中一種正常數值給來訪者賞閱,以免來訪者完全不知版主到底PO些什麼圖片

filter: ○○○○(○○○○請參考上方屬性值)

間接效果請自行在原修改數值下按下Enete跳行後再插入語法

相簿封面
<直接效果>←滑鼠不移向即產生效果
●...
●...
●...
TD.albumList IMG(舊版)
{
...........; filter: ○○○○
}


●.....
●.....
●.....
.albumimg(新版)
{
...........; filter: ○○○○
}

<間接效果>←滑鼠移到照片上後才產生的效果
●...
●...
●...
TD.albumList IMG(舊版)
{
abcdefghi.....
}

TD.albumList A:hover IMG
{
  filter: ○○○○
}


●.....
●.....
●.....
.albumimg(新版)
{
abcdefghi.....
}

.albumimg A:hover IMG
{
  filter: ○○○○
}


相簿內頁小圖



<直接效果>
●...
●...
●...
TD.albumShow IMG(舊版)
{
...........; filter: ○○○○
}


●.....
●.....
●.....
.photoimg(新版)
{
...........; filter: ○○○○
}

<間接效果>
●...
●...
●...
TD.albumShow IMG(舊版)
{
abcdefghi.....
}

TD.albumShow A:hover IMG
{
  filter: ○○○○
}


●.....
●.....
●.....
.photoimg(新版)
{
abcdefghi.....
}

.photoimg A:hover IMG
{
  filter: ○○○○
}


相簿輪播圖(含廣告)



<直接效果>

●...
●...
●...
TD.albumCache IMG(舊版)
{
...........; filter: ○○○○
}


●.....
●.....
●.....
td.photoList(新版)
{
...........; filter: ○○○○
}

<間接效果>
●...
●...
●...
TD.albumCache IMG(舊版)
{
abcdefghi.....
}

TD.albumCache A:hover IMG
{
  filter: ○○○○
}


●.....
●.....
●.....
td.photoList(新版)
{
abcdefghi.....
}

td.photoList A:hover IMG
{
  filter: ○○○○
}


內頁大圖(輪播上方的正常尺寸照片)

<直接效果>
DIV.albumPhoto(舊版)
{
 ...................;
filter: ○○○○
}


.photoview(新版)
{

...................; filter: ○○○○
}

<間接效果>

DIV.albumPhoto(舊版)
{
 ...................;
filter: ○○○○
}

DIV.albumPhoto A:hover IMG
{
  filter: ○○○○
}



.photoview(新版)
{
abcdefghi.....
}

.photoview A:hover IMG
{
  filter: ○○○○
}


範例:
A.相簿封面:靜態模糊(直接效果)

.........

TD.albumList IMG
(以舊版為例)
{
...........; filter: blue
(direction=45,strength=20);
}

........

B.相簿封面:動態波浪(間接效果,滑鼠移到照片上才會產生)

.........................

.albumimg(以新版為例)
{
abcdefghi.....
}

.albumimg A:hover IMG
{
  filter: wave
(freq=3, lightstrength=50,phase=30,strength=10);
}

...........................
沒有數值者直接複製屬性值即可
相簿設定
標籤設定
相簿狀態