รวมโค๊ดที่เกี่ยวกับ "Top Friends" + การสร้างโค๊ด
::Code::
<style type="text/css">
เลือกเอาโค๊ดข้างล่างมาใส่ตามความต้องการ
</style>
EXโค๊ดท๊อปเฟรนติดกันขนาด100*100 ก่อนชี้ลิ้งรูปขาว-ดำ หลังชี้ลิ้งรูปปกติ ไม่เเสดงชื่อเพื่อน<style type="text/css">
.friend-picture a img {width:100px; height:100px !important; }
.friend-picture {height:100px !important;width:100px!important}
.friend-picture {margin-left: 0px;}
.friend-picture img {Filter: Gray}
.friend-picture a:hover img { filter: none;}
.friend-name {display:none}
</style>
EXโค๊ดท๊อปเฟรนขนาด100*100 มีช่องว่างระหว่างรูป<style type="text/css">
.friend-picture a img {width:100px; height:100px !important; }
.friend-picture {height:100px !important;width:100px!important}
.friend-picture {margin-left: 3px;}
</style>
::CODE::
1. ขยายรูปท๊อปเฟรน.friend-picture a img {width:100px; height:100px !important; }
.friend-picture {height:100px !important;width:100px!important}- คำอธิบาย
ตัวเลข height:100px เเละ width:100px ควรเปลื่ยนให้สัมพันธ์กันทั้งกรอบรูปเเละขนาดรูป ยกตัวอย่างเช่น ถ้าเปลื่ยนเป็นwidthเป็น90 ก็ต้องเปลื่ยนทั้ง2บรรทัด
ปล.ควรใส่โค๊ดข้อ3ด้วย ถ้าไม่ใส่marginรูปจะขาดเพราะพื้นที่ไม่พอ
2. ใส่กรอบให้ท๊อปเฟรน.friend-picture {border: Dotted 3px #FFFFFF;}- คำอธิบาย
Dotted = ชนิดของกรอบมีให้เลือกเช่น Dashed, Dotted, Solid, Groove, Inset, Outset ,Ridge, Double
3px = ขนาดของกรอบ
#FFFFFF = สี
3. การจัดขอบรอบๆองค์ประกอบ.friend-picture {margin-left: 0px;}.friend-picture {margin-left: 3px;}ปล.เลือกอันใดอันหนึ่ง
- คำอธิบาย
0px = ขอบท๊อปเฟรนติดกัน ใช้คู่กับท๊อปเฟรนขนาด100*100
3px = ท๊อปเฟรนขนาด100*100 ถ้าใส่ขนาด3pxก็จะมีช่องห่างกันกำลังสวย
4. ท๊อปเฟรนเรืองเเสง.friend-picture {filter:progid:DXImageTransform.Microsoft.Glow(color=#FFFFFF,strength=8);}- คำอธิบาย
#FFFFFF = สี
strength=8 = ถ้าใส่เลขเยอะก็จะมีเเสงเยอะขึ้นตามตัวเลข
5. ท๊อปเฟรนเเนวตั้ง.friend{ float: none !important; }6. ลบชื่อเพื่อนในท๊อปเฟรน.friend-name {display:none}7. ให้ท๊อปเฟรนเเนวยาวอยู่ตรงกลาง#friends {text-align: center;}8. เป็นการใส่"Effect&Filter"ให้กับท๊อปเฟรนโค๊ดเเยกเป็น2ช่วง
- การกำหนดเอฟเฟคของรูปปกติก่อนชี้Mouse
.friend-picture a img {ใส่โค๊ตEffect&Filter}- การกำหนดเอฟเฟคของรูปหลังชี้ Mouse
มี2เเบบคือใส่Effectธรรมดาหรือใส่รูป ให้เลือกอย่างใดอย่างหนึ่งหรือMixกันก็ได้
.friend-picture a:hover img {เลือก"Effectที่เป็นโค๊ด}
.friend-picture a:hover {background-image:url(Effectที่เป็นรูป.gif);}*
เลือก"Effectที่เป็นรูป.gif" ->
http://www.thaihi5.com/board/index.php?topic=5320.0*
เลือก"Effectที่เป็นโค๊ด"- ชี้เเล้วภาพขาว-ดำ
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
Mouse 2 in 1
::CODE::
<style type="text/css">
body {cursor: url( urlของเม้าส์เวลาปกติ );}
a {cursor: url( urlของเม้าส์ตอนที่ชี้ลิ้งค์ );}
</style>
EXเม้าส์รูปคิตตี้หมุนๆ ตอนชี้ลิ้งเป็นรูปดาบ :D [ตอนนี้เราใช้อยู่มาดูรูปเเบบได้]<style type="text/css">
body {cursor: url(
http://www.123cursors.com/freecursors/7683.ani); }
a {cursor: url(
http://www.myspacecursor.net/cursor/Sword.cur);}
</style>
**ถ้ามีเวลาจะมาอัพเวปรูปcursorนะ
บทความ^^ รวม Code Link Effect & Filter | <( っ '๐')づ ⌒☆
http://www.thaihi5.com/board/index.php?topic=5320.0^^ กรอบรูปคอมเม้นต์, กรอบหลุยส์ & ปีก | <( っ '๐')づ ⌒☆
http://www.thaihi5.com/board/index.php?topic=8582.0^^ เเจก Code Top Friends เท่าของจิงๆ สวยมั่กๆ | <( っ '๐')づ ⌒☆
http://www.thaihi5.com/board/index.php?topic=4702.0บทความใหม่^^ ชำเเหละโค๊ด+Mixโค๊ด "Top Friends" & Mouse 2 in 1 ☆| <( っ '๐')づ ⌒☆
http://www.thaihi5.com/board/index.php/topic,15421.0
