➨ さる381㋡ △full.version :: Code

ลำดับตอนที่ #10 : ▍css ▍ตกแต่งแถบเมนูหน้าไอดีให้งดงาม

} BORDERLINKS !

รายละเอียด
language : css
Effect :�dec.
Element : borderlinks
�

โค้ดนี้นี่คือไม่ค่อยจะมีประโยชน์5555
ด้วยความว่าง ไม่รู้จะแต่งไอดีเพิ่มไงดีเลยปิ๊งไอเดีย
ใครมีไอเดียอื่นเอามาแชร์กันมั่งดิครับ ตันแรงมาก ถถถถ

� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � �

Note!

โค้ดนี้ใช้ได้แค่เฉพาะหน้าหลักของไอดีเท่านั้น!
ถ้ากดเข้าเมนูอื่นๆก็คืนสู่สามัญครับ
�

อธิบายเล็กน้อย
1.พื้นหลัง
พื้นหลังรูป -> background:url(urlรูป);
พื้นหลังสี -> background:#โค้ดสี;
- - - - - - - - - - -
2.ขอบ
border:ความหนาpx ชนิดขอบ #สีขอบ;
- - - - - - - - - - -
3.เงา
*เงาซ้ายขวา = เลื่อนตามแกนX | ติดลบ=เลื่อนซ้าย,ติดบวก=เลื่อนขวา
*เงาบนล่าง =�เลื่อนตามแกนY�| ติดลบ=เลื่อนบน,ติดบวก=เลื่อนล่าง

เงากล่อง ->�box-shadow: เงาซ้ายขวาpx เงาบนล่างpx เบลอpx #สีเงา;
พื้นหลังสี -> text-shadow: เงาซ้ายขวาpx เงาบนล่างpx เบลอpx #สีเงา;

� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � �

<style name="ZaruCode1361205" type="text/css"> /* !-แถบเมนูรวม */ #borderlinks{ background:url(http://i.imgur.com/ljTbb98.png)!important;/* รูปพื้นหลัง */ background-repeat:repeat!important; border:3px solid #000!important;/* ลักษณะเส้นขอบ */ border-radius:10px;/* ความโค้งของขอบ */ } /* !-เมนูที่อยู่ปัจจุบัน */ #active{ background:#9c0000!important;/* สีพื้นหลัง */ -moz-box-shadow: 3px 1px 0px #000000;/* เงาของขอบ[หมาไฟ] */ -webkit-box-shadow: 3px 1px 0px #000000;/* เงาของขอบ[โครม] */ box-shadow: 3px 1px 0px #000000;/* เงาของขอบ */ } /* !-เวลาชี้เมนูที่อยู่ปัจจุบัน */ #active:hover{ background:#fff!important;/* สีพื้นหลัง */ -moz-box-shadow: 0px 0px 9px #000!important;/* เงาของขอบ[หมาไฟ] */ -webkit-box-shadow: 0px 0px 9px #000!important;/* เงาของขอบ[โครม] */ box-shadow: 0px 0px 9px #000!important;/* เงาของขอบ */ } /* !-ตัวอักษรของเมนูที่อยู่ปัจจุบัน */ a#active{ color:#fff!important;/* สีตัวอักษร */ text-shadow:2px 0px 0px #000;/* เงาตัวอักษร */ } /* !-เวลาชี้ตัวอักษรของเมนูที่อยู่ปัจจุบัน */ a#active:hover{ color:#000!important;/* สีตัวอักษร */ text-shadow:none;/* เงาตัวอักษร */ } /* !-เมนูอื่นๆ */ #borderlinks a{ color:#000;/* สีตัวอักษร */ -webkit-transition-duration: .5s;/* ความเร็วหลังชี้ */ border-radius:5px;/* ความโค้งของขอบ */ padding-top:5px; padding-bottom:5px; } /* !-เวลาชี้เมนูอื่นๆ */ #borderlinks a:hover{ color:#fff;/* สีตัวอักษร */ background:#000;/* สีพื้นหลัง */ -webkit-transition-duration: .1s;/* ความเร็วในการชี้ */ -moz-box-shadow: 0px 0px 9px #9c0000;/* เงาของขอบ[หมาไฟ] */ -webkit-box-shadow: 0px 0px 9px #9c0000;/* เงาของขอบ[โครม] */ box-shadow: 0px 0px 9px #9c0000;/* เงาของขอบ */ }</style>

� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � �


����
TERMS OF USE
1. ห้ามดัดแปลงโค้ด
2. ห้ามนำโค้ดไปแจกต่อ
3. เม้นบอกกันหากนำไปใช้
5. โหวต รีวิว เพื่อเป็นกำลังใจให้บทความ

さる381㋡ △Code�


� � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � � �

Thanks : Transform V.2 | House Froz