+ SEASON CODE +

ลำดับตอนที่ #18 : +tip+ {สำหรับคนเขียนไม่เป็น}

^
^
ตัวหนังสือเล็กไป กด เพิ่มขนาด นะฮะ!

ABOUT
รวมโค้ดเสริมในการเขียนโค้ดชี้รูป ชี้ลิงค์ครับบ!! ><"

- - - - - - - - - - - - - - - - -
{ลิงค์}ใส่พื้นหลังลิงค์  {  background:#โค้ดสีพื้นหลังลิงค์;  }
- - - - - - - - - - - - - - - - -
{ลิงค์,รูป} ใส่ขอบโค้งทั้งสี่มุม! >< ..ยิ่งเลขมาก ยิ่งโค้งเยอะ!
-โค้งทุกมุม {  border-radius:เลขรัศมีโค้งpx;}
-มุมบนซ้าย  {  border-top-left-radius:เลขรัศมีโค้งpx;  }
-มุมบนขวา  {  border-top-right-radius:เลขรัศมีโค้งpx;  }
-มุมล่างซ้าย  {  border-bottom-left-radius:เลขรัศมีโค้งpx;  }
-มุมล่างขวา  {  border-bottom-right-radius:เลขรัศมีโค้งpx;  }

ตัวอย่างจ้าา~ (ซ้าย โค้ง20px   ขวาโค้ง50px)
       

- - - - - - - - - - - - - - - - -
{ลิงค์} ใส่เส้นขอบในแบบต่างๆ
มารู้จักรูปแบบของขอบกันก่อนนน!! ><
(เขียนตามตัวหนังสือด้านในรูปแบบเส้นโลดด! เช่น เส้นประใส่  dashed )

  dashed  

    solid    

  dotted  

  groove  

*ที่ฮิตๆจะมี เส้นประ กับเส้นตรงครับ!*
*เส้นขอบที่เห็นด้านบน ขนาด 2px นะครับ*

-ขอบรอบๆลิงค์ (เป็นกรอบสี่เหลี่ยม) {  border:ขนาดเส้นpx รูปแบบของเส้น #สีของเส้น;  }
-ขอบล่างลิงค์ (เหมือนเส้นใต้) {  border-bottom:ขนาดเส้นpx รูปแบบของเส้น #สีของเส้น;  }
-ขอบบนลิงค์ (เส้นเหนือ) {  botder-top:ขนาดเส้นpx รูปแบบของเส้น #สีของเส้น;  }
-ขอบซ้าย (ยิ่งหนายิ่งสวย) {  border-left:ขนาดเส้นpx รูปแบบของเส้น #สีของเส้น;  }
-ขอบขวา (ยิ่งหนายิ่งสวย) {  border-right:ขนาดเส้นpx รูปแบบของเส้น #สีของเส้น;  }

*เปลี่ยนเฉพาะส่วนที่เป็นสีแดงๆ เท่านั้น นะครับ!
- - - - - - - - - - - - - - - - -
{ลิงค์,รูป} มาใส่เงาเก๋ๆกันเต๊อะ!

เงาพื้นหลังลิงค์ กับรูป{  box-shadow:0px 0px 0px #สีเงา;  }

  ตัวอย่างเงาพื้นหลังลิงค์  



#######---#######
เงาสำหรับตัวหนังสือ! {  text-shadow:0px 0px 0px #สีเงา;  }

ตัวอย่าเงาตัวหนังสือ


อธิบายส่วนประกอบนิดนึงง! =3=
เงาซ้าย-ขวา {  box-shadow:10px 0px 0px #สีเงา;  }
ผลของส่วนนี้ (ส่วนซ้าย) {ฝั่งซ้าย 10px  ฝ่งขวา -10px}
ค่า + เงาไปทางขวา.. ค่า - เงาไปทางซ้าย
                 


เงาบน-ล่าง {  box-shadow:0px 10px 0px #สีเงา;  }
ผลของส่วนนี้ (ส่วนกลาง) {ฝั่งซ้าย 10px  ฝั่งขวา  -10px}
ค่า + เงาอยู่ด้านล่าาง.. ค่า - เงาอยู่ด้านบน


      



ค่าความฟุ้งกระจายของเงา {  box-shadow:0px 0px 10px #สีเงา;  }
ผลของส่วนนี้ (ส่วนขวา) {ซ้าย 10px  มีค่าเป็นบวก เท่านั้น // ขวา 30px}
เลขยิ่งมาก ความฟุ้งก็มากเช่นกัน!

    


สามารถใส่รวมๆกันได้ เช่น  box-shadow:4px 5px 8px #ff0000;

ผลที่ได้ ...


- - - - - - - - - - - - - - - - -

ก็อาจจะมีแค่นี้แหละ! แหะๆๆ ^^
จะสวยหรือไม่สวย ก็ขึ้นอยู่กับจินตนาการและความคิดสร้างสรรค์ของเราเองครับ!

กรุณาอย่าลบเครดิตในโค้ดฮะ!

นำโค้ดไปใช้ก็เม้นท์บอกด้วยนะครับ!




 

เหมียว หง่าว