ใช้งาน CSS Sprite images กับ การกำหนด CSS ของ Input form อย่างง่าย

31 October 2009 By Ninenik Narkdee
css sprite images

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css sprite images




การทำ CSS Sprite Images ช่วยลดจำนวน HTTP Requests ตัวอย่าง กรณีเรามีปุ่มที่เป็นรูปภาพอยู่ 3 อัน
เมื่อมีการเรียกหน้าเพจนั้น ก็จะมีการเรียก HTTP Requests เท่ากับ 3 ตามจำนวนของรูป เป็นต้น
บางกรณีการทำ CSS Sprite ยังช่วยลดขนาดของไฟล์ได้อีกด้วย ทำให้การโหลดหน้าเว็บเพจเร็วขึ้น

การทำ CSS Sprite Images เป็นเทคนิคการรวมไฟล์รูปภาพหลายๆ รูปเป็นรูปเดียว แล้วกำหนดการนำมาแสดง
โดยใช้เป็น Backgroud แล้วระบุตำแหน่งของแต่ละรูป เรียกใช้ผ่าน css class (div.class) หรือ css selector (div#selector)

ตัวอย่าง รูปที่รวมกันแล้ว


ผลลัพธิ์การทำ CSS Sprite Images

CSS code ตัวอย่าง

<style type="text/css">
input.iSubmit,input.iSend,input.iClear{
	padding:0;margin:0;border:0;border-collapse:collapse;cursor:pointer;
}
input.iSend{
	width:65px;height:20px;
	background:url(demo/images/css_bt_sprite.png) -1px -1px;
}
input.iSubmit{
	width:65px;height:20px;
	background:url(demo/images/css_bt_sprite.png) -1px -23px;
}
input.iClear{
	width:65px;height:20px;
	background:url(demo/images/css_bt_sprite.png) -1px -45px;
}
</style>

HTML code ตัวอย่าง

<input name="button" type="submit" class="iSubmit" id="button" value=" " />
<input name="button2" type="reset" class="iClear" id="button2" value=" " />
<input name="button3" type="button" class="iSend" id="button3" value=" " />



เพียงกด Like หรือ Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: sprite images css







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ