Secret Celtic RadiO

ลำดับตอนที่ #10 : 11

` The cat โค้ดแมวๆ ●

นำโค้ดไปใช้ อย่าลืม คอมเม้น ในตอนนี้เลย
และ อย่าลืม ติดเครดิต ร้านโค้ดแมวๆ ด้วยน้า
 

CODE

(โค้ดในกล่องนี้สำหรับให้กล่องเพลงอยู่ทางด้านซ้ายมือ)

<div id="klao"> <img src="http://i.imgur.com/LGhtSZG.gif"> <div id="line" class="line"></div> <div class="play"> <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://k003.kiwi6.com/hotlink/csglyv85dm/3.mp3&t0=K L A O&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" /> </div> </div> <style type="text/css"> #klao { position: fixed; bottom: 20px; left: 20px; width: 31px; height: 31px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background: #f8b7b7; /* ใส่โค้ดสีตรงวงกลมสีชมพู */ -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } #klao img { width: 15px; padding: 8px 0px 0px 8px; } #line { position:absolute; background: #f8b7b7; /* ใส่โค้ดสีตรงวงกลมสีชมพู */ } .line { top: 13px; left: 30px; width: 0px; height: 3px; -webkit-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease; transition-delay: 0s; -webkit-transition-delay: 0s; } #klao:hover .line { width: 20px; -webkit-transition-delay: 0s; } .play { top: 0px; left: 50px; width: 140px; height: 0px; padding: 0px 5px 5px 5px; overflow: hidden; position: absolute; text-align: center; background: #ffffff; /* player background */ border-left: 3px solid #f8b7b7; /* ใส่โค้ดสีตรงวงกลมสีชมพู */ opacity: 0; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition-delay: .4s; -webkit-transition-delay: .4s; } #klao:hover .play { height: 25px; opacity: 1; transition-delay: .6s; -webkit-transition-delay: .6s; } </style>


อธิบายส่วนประกอบ 
ตรง /* ใส่โค้ดสีตรงวงกลมสีชมพู */
คือตรงพื้นหลังทั้งวงกลมสีชมพูและขอบที่ยื่นออกมาสีชมพูน่ะ
แนะนำให้ใส่สีเดียวกันหมดเลยนะขรั่บ จะชมพูก็ชมพูล้วนเลยจ้า

  
ส่วนเสียงเพลงทำอย่างไร? ให้เข้าไปดูที่ตอนที่ 49  สอนทำกล่องเพลง billy

ทริปเกร๋ ! ฟรีไอค่อนจิ๋วๆ สำหรับเครื่องเล่นดนตรีโดยเฉพาะเยอะแยะมากมาย คลิก

CODE

(โค้ดในกล่องนี้สำหรับให้กล่องเพลงอยู่ตรงเนื้อหา)

<div id="klao"> <img src="http://i.imgur.com/LGhtSZG.gif"> <div id="line" class="line"></div> <div class="play"> <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://k003.kiwi6.com/hotlink/csglyv85dm/3.mp3&t0=K L A O&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" /> </div> </div> <style type="text/css"> #klao { position:relative; left: 20px; width: 31px; height: 31px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; background: #f8b7b7; /* ใส่โค้ดสีตรงวงกลมสีชมพู */ -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } #klao img { width: 15px; padding: 8px 0px 0px 8px; } #line { position:absolute; background: #f8b7b7; /* ใส่โค้ดสีตรงวงกลมสีชมพู */ } .line { top: 13px; left: 30px; width: 0px; height: 3px; -webkit-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease; transition-delay: 0s; -webkit-transition-delay: 0s; } #klao:hover .line { width: 20px; -webkit-transition-delay: 0s; } .play { top: 0px; left: 50px; width: 140px; height: 0px; padding: 0px 5px 5px 5px; overflow: hidden; position: absolute; text-align: center; background: #ffffff; /* player background */ border-left: 3px solid #f8b7b7; /* ใส่โค้ดสีตรงวงกลมสีชมพู */ opacity: 0; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition-delay: .4s; -webkit-transition-delay: .4s; } #klao:hover .play { height: 25px; opacity: 1; transition-delay: .6s; -webkit-transition-delay: .6s; } </style>
 

 

T H E M E
◈ B L & W H ◈