เเบ่งเป็น 2 ขึ้นตอนนะครับ
a img {ใส่โค๊ต} = การกำหนดเอฟเฟคของรูปปกติ
a:hover img {ใส่โค๊ต} = การกำหนดเอฟเฟคของรูปหลังชี้ Mouse
ถ้าอยากให้เป็นภาพปกติก็ใส่โค๊ต Filter: none = ภาพปกติ
::Filter ที่จะนำไปใส่ในช่อง {ใส่โค้ดลิงค์}::
- ชี้เเล้วภาพขาว-ดำ
Filter: Gray
- ชี้เเล้วภาพเเนวx-ray
Filter: Xray
- ชี้เเล้วภาพกลับเป็นสีตรงข้ามกัน
Filter: Invert
- ชี้เเล้วภาพจางลงเหลือ60% (สามารถปรับค่าได้ใส่เลขอะไรภาพจะเหลือความจางเท่านั้น%)
Filter: Alpha(opacity=60)
- ภาพเบลอธรรมดา ::กำลังดี::
Filter: Blur
- ภาพเบลอมากๆ
Filter: Blur(Add = 0, Direction = 225, Strength = 10)
- ชี้ลิ้งเป็นรูปคลื่น
Filter: Wave(Add=0, Freq=10, LightStrength=20, Phase=220, Strength=10)
- ชี้ลิ้งเเล้วเป็นกลมๆ
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)
- ชี้ลิ้งเเล้วเป็นคลื่น...ลองเอง
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0) Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10)
- กลับด้านซ้าย-ขวา
FILTER: fliph()
- ชี้ลิ้งเเล้วความเข้มของสี ไล่จากซ้าย-->ไปขวา
FILTER: Alpha(Opacity=100,FinishOpacity=0,Style=1)
- ชี้ลิ้งเเล้วความเข้มสี ไล่จากขวา->ไปซ้าย
FILTER: Alpha(Opacity=0,FinishOpacity=100,Style=1)
- ไล่สีจากกลางภาพ ไปขอบภาพ
FILTER: Alpha(Opacity=100,FinishOpacity=0,Style=3)
- ชี้ลิ้งเเล้วใส่ Filter แบบไล่สีเป็นวงกลมให้กับภาพ
FILTER: Alpha(Opacity=100,FinishOpacity=0,Style=2)
- ภาพปกติ
Filter: none
Credit :: ThaiHi5.com (http://kojungza.hi5.com/)
---------------------------------------------------------------------------------
Code Link EFFECT แบบสำเร็จ
แบบที่ 1 page เบลอๆ
<style type="text/css">
a:link img {filter:blur(add = 0, direction = 225, strength = 10);}
a:visited img {filter:blur(add = 0, direction = 225, strength = 10);}a:hover img {filter: none}
</style>
แบบที่ 2 จะเปลี่ยนเป็นสีเทา
<style type="text/css">
a:link img {filter:none;}
a:visited img {filter:none;} a:hover img {filter:gray;}
</style>
แบบที่ 3 ด้านซ้ายไปขวา จากขวาไปซ้าย
<style type="text/css">
a:hover img {filter:fliph;}
</style>
แบบที่ 4 อันนี้ต้องลองเอง
<style type="text/css">
a:link img {filter:xray();} a:visited img {filter:xray();} a:hover img {filter:none;}
</style>
แบบที่ 5 page ใส
<style type="text/css">
a:link img {filter:alpha(opacity=60);} a:visited img {filter:alpha(opacity=60);} a:hover img {filter:none;}
</style>
แบบที่ 6 ขาวดำ
<style type="text/css">
a:link img {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;}
</style>
แบบที่ 7 เหมือน หิน
<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:progid:dximagetransform.microsoft.emboss;} </style>





















0 comments:
แสดงความคิดเห็น