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

31 October 2009


การทำ 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=" " />








บทความในหมวดที่่น่าสนใจ อื่นๆ CSS Learning

18 Oct 08 สร้างเมนูแนวนอน ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4184 25 Sep 08 ความรู้เกี่ยวกับ CSS เบื้องต้น อ่าน 4142 25 Sep 08 เอา scrollbar ออกจาก textarea ด้วย CSS อ่าน 4100 24 Feb 09 การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง อ่าน 4044 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 3992 25 Sep 08 Borders การจัดการเกี่ยวกับขอบ อ่าน 3991 15 Oct 08 การสร้างข้อความแจ้งเตือนด้วย CSS อ่าน 3771 25 Sep 08 ข้อความ Text การจัดการเกี่ยวกับขนาดและรูปร่างของข้อความ อ่าน 3725 25 Sep 08 รวมส่วนประกอบต่างข้างบนเป็น CSS อ่าน 3648 19 Mar 10 ทบทวน คุณสมบัติ สี color และ พื้นหลัง background property ของ CSS อ่าน 3528 06 Jun 09 ใช้ css กำหนด media print ให้ ไม่แสดง ปุ่มสั่งพิมพ์ print หน้าเอกสารที่ต้องการ อ่าน 3471 25 Sep 08 Margins and Padding การจัดการพื้นที่ระหว่างสิ่งต่างๆ อ่าน 3433 03 Apr 11 จัดข้อความยาว ให้อยู่ในกรอบ ด้วย css break word อ่าน 3291 08 Oct 08 การกำหนดสี scrollbar ของ textarea อ่าน 3278 16 Oct 08 การแสดงเฉพาะปุ่มสำหรับ upload อ่าน 3231

บทความคนเข้าอ่านวันนี้

25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1 อ่าน 6166 22 Mar 10 ทบทวนคำสั่ง break และ continue ใน javascript อ่าน 2427 07 Sep 10 ใช้ ckeditor กับ filemanager ด้วย php รองรับ ฟังก์ชัน javascript อ่าน 3439 26 Sep 10 การแสดงข้อมูล แนะนำ เส้นทาง ใน google map อ่าน 2690 21 Mar 11 การสร้างปุ่ม facebook ล็อกอิน เว็บไซต์ แบบแสดงรูป และกำหนดเพิ่มเติม อ่าน 2588 27 Nov 09 แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย อ่าน 2530 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 3992 25 Sep 08 แบ่งหน้า ด้วย Code แบบง่าย อ่าน 5652 18 Sep 10 ดึงข้อมูล จากฐานข้อมูล สร้าง รายการเครือข่าย แบบ tree ด้วย php อ่าน 2663 04 Oct 08 SQL คืออะไร อ่าน 7496 05 Jul 09 สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajax อ่าน 13030 28 Oct 09 สร้าง Swap Banner แบนเนอร์แบบสลับอัตโนมัติ ด้วย jQuery อย่างง่าย อ่าน 4187 23 Dec 09 จัดรูปแบบ การแบ่งคอลัมน์ column ของ ตาราง สำหรับแสดงข้อมูล ด้วย php อ่าน 3914 26 Feb 09 สร้างแบบฟอร์มค้นหาข้อมูลในเว็บไซต์ ด้วย Google อ่าน 3496 13 Oct 08 คำสั่ง SQL AND OR อ่าน 3104 20 Mar 10 ใช้ jQuery สร้าง การเลื่อนโฟกัส ของ textbox ด้วยลูกศร บนแป้นพิมพ์ คีบอร์ด keyboard อ่าน 3001 28 Oct 08 ฟังก์ชัน สร้าง ajax object ไว้ใช้งานอย่างง่าย อ่าน 3891 13 May 09 แก้ไขการตัดข้อความด้วย substrใน php แล้วมีรูปสี่เหลี่ยม อ่าน 2732 15 Oct 08 สร้าง box แบบสวยงาม ด้วย CSS อ่าน 7591 01 Feb 09 สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery อ่าน 6022
จำนวนผู้เยี่ยมชม 784677
คน 2012 © Copyright ninenik.com. All rights reserved.