สไปรท์ค่อนข้างน่าสนใจและ เทคโนโลยีที่เรียบง่าย- ตอนนี้ฉันจะบอกคุณเพิ่มเติมเล็กน้อยเกี่ยวกับเรื่องนี้

เกิดอะไรขึ้น สไปรต์ CSS?

กล่าวโดยสรุป CSS Sprite คือรูปภาพหลายรูปในไฟล์เดียว มีไฟล์เดียวแต่มีหลายภาพอยู่ข้างใน ในเวลาเดียวกันผู้เยี่ยมชมจะมองไม่เห็นสิ่งนี้โดยสิ้นเชิง สำหรับคนที่กำลังดูไซต์นี้ ดูเหมือนว่าเขาจะเห็นหลายรายการ แต่ละภาพ.

เหตุใดจึงจำเป็น? สไปรท์จะลดจำนวนคำขอไปยังเพจจากผู้ใช้และลด ขนาดโดยรวมภาพ ส่งผลให้ผู้เยี่ยมชมเห็นเว็บไซต์เร็วขึ้น

วิธีนี้ทำอย่างไร? รูปภาพธรรมดาจะเพิ่มความกว้างและความสูง กล่าวคือ รูปภาพหลายรูปจะถูกวางเรียงกันบนรูปภาพธรรมดา จากนั้นแต่ละภาพจากชุดนี้จะถูกแทนที่เข้าไป บล็อกที่จำเป็นด้วยความกว้างหรือความสูงที่กำหนดเพื่อไม่ให้มองเห็นภาพอื่นๆ ทั้งหมด ครอปทั้งชุดและเหลือเพียงภาพเดียว สไปร์ทตัวหนึ่ง รูปภาพอื่นๆ ทั้งหมดยังคงอยู่นอกบล็อกเฉพาะ

เพื่อให้ชัดเจนยิ่งขึ้นฉันจะเปรียบเทียบ ลองจินตนาการว่าคุณกำลังมองผ่านรูกุญแจ คุณเห็นเพียงบางส่วนของห้องที่แยกจากกันที่อีกด้านหนึ่งของประตู หากคุณขยับไปทางด้านข้างเล็กน้อยแล้วมองเข้าไปในถ้ำจากมุมที่ต่างออกไป คุณจะเห็นส่วนอื่นๆ ของห้องเดียวกัน

คำศัพท์เฉพาะทาง

เพื่อหลีกเลี่ยงความสับสน เรามานิยามคำศัพท์กันทันที:
สไปรท์คือภาพหนึ่งภาพจากไฟล์ที่มีหลายภาพ
ภาพต่อเรียงคือไฟล์ที่มีรูปภาพหลายรูป

คุณสมบัติของการใช้สไปรท์

เมื่อใดที่คุณควรใช้สไปรท์? โดยทั่วไปมีคำตอบเดียวคือ ควรใช้สไปรท์หากคุณมีรูปภาพขนาดเล็กจำนวนมากบนหน้าเว็บ มันไม่สำคัญว่ามันจะเป็นภาพประเภทไหน หากคุณมีการไล่ระดับสีจำนวนมากในตำแหน่งเดียวกัน มีปุ่มจำนวนมาก ไอคอนจำนวนมาก ฯลฯ ถ้าด้วยเหตุผลบางอย่าง หน้าแยกกันมีรูปภาพเล็กๆ จำนวนมาก คุณอาจลองใช้สไปรท์ดู

โดยปกติแล้วหน้าเว็บจะมีรูปภาพสามประเภท ได้แก่ jpg, PNG และ GIF รูปแบบทั้งหมดเหล่านี้มีโหมดการดาวน์โหลดสองโหมด - โหมดปกติและโหมดการดาวน์โหลดแบบค่อยเป็นค่อยไป

รูปแบบ jpg อาจเป็นแบบปกติ (พื้นฐาน) หรือแบบก้าวหน้า (แบบก้าวหน้า) ใน โหมดปกติรูปภาพเริ่มแสดงทีละบรรทัดขณะโหลดและเข้าทันที คุณภาพดี- ในโหมดโปรเกรสซีฟ รูปภาพ jpgมีการดาวน์โหลดทั้งหมดในคราวเดียว แต่มีคุณภาพต่ำและคุณภาพจะเพิ่มขึ้นเมื่อดาวน์โหลด

Gif และ PNG มีพฤติกรรมเหมือนกัน GIF อาจเป็นแบบปกติหรือแบบอินเทอร์เลซก็ได้ PNG อาจเป็นแบบปกติหรือแบบอินเทอร์เลซก็ได้ พฤติกรรมของ gif และ png แบบอินเทอร์เลซนั้นคล้ายคลึงกับพฤติกรรมของ JPG แบบก้าวหน้า- ลักษณะการทำงานนี้จะเพิ่มขนาดไฟล์เล็กน้อย

ทั้งหมด. รูปภาพอาจปรากฏบนเพจทันทีหรืออาจปรากฏขึ้นโดยมีความล่าช้า นี่เป็นสิ่งสำคัญที่ต้องรู้เมื่อพูดถึงสไปรท์ ขอแนะนำให้สร้างสไปรท์แบบอินเทอร์เลซหรือแบบก้าวหน้า ผู้ใช้ควรเห็นภาพโดยเร็วที่สุด แม้ว่าจะมีคุณภาพต่ำก็ตาม

แต่! ถ้า ไฟล์สุดท้ายเนื่องจากสไปรท์ทั้งหมดจะมีขนาดใหญ่เกินไป แม้จะมีความก้าวหน้าและการอินเทอร์เลซ แต่ผู้เยี่ยมชมจะต้องรอแม้จะดาวน์โหลดไฟล์เพียงบางส่วนก็ตาม ดังนั้นฉันไม่แนะนำให้ใช้สไปรท์ชุดใหญ่ หากไฟล์มีขนาดใหญ่สไปรท์ทั้งหมดจะหายไปโดยสิ้นเชิง - เพื่อเร่งความเร็วไซต์ เมื่อใช้สไปรท์ชุดใหญ่ ผู้ใช้จะต้องรอนานกว่าการแยกภาพปกติ

ไฟล์ที่มีขนาดเกิน 30 กิโลไบต์ดูเหมือนใหญ่สำหรับฉัน นี่เป็นเรื่องส่วนตัว คุณอาจมีแนวคิดเกี่ยวกับขนาดของไฟล์เป็นของตัวเอง ไฟล์ขนาด 30 กิโลไบต์จะดาวน์โหลดไฟล์ในเวลาประมาณ 7 วินาที ด้วยความเร็วอินเทอร์เน็ต 56.6 kbps

ตัวอย่างการใช้สไปรท์ สไปรท์พร้อมไอคอน

ในสไปรท์หนึ่ง ฉันจะมีไอคอนสำหรับ:

รายการ - หนึ่งไอคอน

ลิงค์ - สามไอคอน

แบบฟอร์มการค้นหา - ไอคอนเดียว

นั่นคือสไปรท์ชุดแรกของฉันจะมีรูปภาพห้ารูป รูปภาพของฉันทั้งหมดจะมีขนาดเท่ากัน - 16 x 16 พิกเซล สไปรท์สามารถใช้สร้างภาพที่มีความละเอียดต่างกันได้ โดยไม่จำเป็นว่าความละเอียดของภาพทั้งหมดจะตรงกัน ที่ ความละเอียดที่แตกต่างกันรูปภาพ จะซับซ้อนกว่าเล็กน้อยในการรวมรูปภาพเหล่านี้เป็นไฟล์เดียว

ด้วยเหตุนี้ ตัวอย่างแรกจะมีลักษณะดังนี้:

ฉันพบห้าไอคอน จากนั้นฉันก็รวมพวกมันทั้งหมดไว้ในไฟล์เดียว นี่คือไฟล์ที่ฉันลงเอยด้วย:

ฉันดึงความสนใจของคุณ ใน ในกรณีนี้ไอคอนไม่ได้อยู่ใกล้กัน แต่มีการเยื้องเล็กน้อยระหว่างกัน จะเลือกเยื้องเหล่านี้ได้อย่างไร? แน่นอนคุณสามารถคำนวณทุกอย่างแบบพิกเซลต่อพิกเซลได้ แต่กรณีของเราค่อนข้างง่าย ดังนั้นจึงเป็นการดีที่สุดที่จะเลือกการเยื้องเหล่านี้ในภาพโดยการทดลอง ขั้นแรก เรารวมภาพเข้าด้วยกันโดยใช้ตา จากนั้นเราก็ถ่ายภาพบนสุดแล้ววางลงบน สถานที่ที่ถูกต้อง- หากรูปภาพอยู่ในตำแหน่งเดิม แต่ในขณะเดียวกันก็มีรูปภาพอีกชิ้นหนึ่งยื่นออกมาจากที่ใดที่หนึ่ง จะต้องเพิ่มการเยื้อง

อีกสิ่งหนึ่ง สุดท้ายในรายการคือไอคอนสำหรับรายการ - ลูกศรสีเขียว- ทำไมเธอถึงเป็นคนสุดท้าย? ตำแหน่งของไอคอนที่เหลืออยู่ในรูปภาพนั้นไม่แยแสกับเรา แต่ในรายการรายการใด ๆ สามารถครอบครองได้หลายบรรทัดและหากลูกศรสีเขียวอยู่ตรงกลางแสดงว่า บรรทัดต่อไปนี้ภาพอื่นๆก็จะโดดเด่นออกมา ดูภาพรายการด้านบนเพื่อดูว่าฉันกำลังพูดถึงอะไร

ดังนั้น. ฉันพบไอคอนห้าไอคอนและรวมเป็นไฟล์เดียว เราจะทำอย่างไรต่อไป? แน่นอนเราเขียนโค้ด:

• รายการ
• อีกหนึ่งรายการครับ
• รายการ
• อีกหนึ่งรายการครับ
  แต่เป็นสองบรรทัด
• รายการ
• อีกหนึ่งรายการครับ

นี้ รหัสเอชทีเอ็มรายการ. ตอนนี้ลองใช้สไปรท์ของเรากับมัน:

Ul li( ช่องว่างภายใน:0 0 0 21px; พื้นหลัง:url("sprites.png") 0 -94px ไม่ทำซ้ำ; )

เราทำอะไรที่นี่? เยื้องแต่ละอัน

ห่างจากขอบด้านซ้าย 21 พิกเซล เพื่อให้ข้อความไม่บดบังรูปภาพ จากนั้นตั้งค่า sprites.png เป็นภาพพื้นหลัง ความสูงของภาพทั้งหมดที่มีสไปรท์ในกรณีนี้คือ 110 พิกเซล และลูกศรสีเขียวอยู่ที่ส่วนท้ายสุด ความสูงของลูกศรสีเขียวคือ 16 พิกเซล นั่นคือลูกศรเริ่มต้นหลังจากพิกเซลที่ 94 จากด้านบนของรูปภาพ ซึ่งหมายความว่าเราต้องย้ายพื้นหลังขึ้น 94 พิกเซล ใน รหัส CSSมันเขียนแบบนี้ "0 -94px" นั่นคือย้าย 0 พิกเซลไปทางขวาและ 94px พิกเซลขึ้น

มาปิดท้ายด้วยรายการกัน ตอนนี้เรามาสร้างลิงก์ในลักษณะเดียวกันโดยประมาณ:

A( ช่องว่างภายใน:0 0 0 20px; พื้นหลัง:url("sprites.png") 0 -42px ไม่ทำซ้ำ; ) a( ช่องว่างภายใน:0 0 0 20px; พื้นหลัง:url("sprites..png") 0 -21px ไม่ซ้ำ)

ตัวเลือกหมายถึงอะไร? เห็นได้ชัดว่าตัวเลือกนี้บังคับให้เบราว์เซอร์ใช้สไตล์นี้กับลิงก์ทั้งหมดที่มีแอตทริบิวต์ href ซึ่งค่าขึ้นต้นด้วยสตริง http://site/ สไปรท์นั้นถูกใช้ในลักษณะเดียวกับในกรณีของรายการ ฉันจะพิจารณาลิงก์เดียวเท่านั้น - ลิงก์ไปยังบล็อกของฉัน

เรากำหนด ลิงค์ที่ต้องการโดย href.. คุณสามารถกำหนดคลาสให้กับลิงก์ที่ต้องการหรือเพิ่มสไตล์ให้กับแอตทริบิวต์ style ได้โดยตรงในโค้ด html หรือระบุลิงค์ที่ต้องการโดยใช้วิธีอื่น

เราสร้างระยะขอบ 20 พิกเซลจากขอบด้านซ้ายของลิงก์ใดลิงก์หนึ่ง

ระบุรูปภาพ sprites.png เป็นภาพพื้นหลัง

รูปภาพที่ฉันเลือกสำหรับบล็อกคือ 21 พิกเซลจากขอบด้านบน ซึ่งหมายความว่าเราต้องย้ายพื้นหลังลง 21 พิกเซล ใน css ฉันเขียนแบบนี้: “0 -21px”

สไปรท์การบ้านที่มีการไล่ระดับสี

ตอนนี้เรามาดูตัวอย่างที่สองกัน


ภาพนี้แสดงหน้าต่าง หน้าต่างมีส่วนหัว เนื้อหา และส่วนท้าย แต่ละองค์ประกอบเหล่านี้มีการตั้งค่าการไล่ระดับสีพื้นหลังไว้ หากไม่สามารถมองเห็นได้ในทันที มีการเปลี่ยนสีจากสีซีดไปเป็นสีอิ่มตัว

ฉันจะแสดงให้คุณเห็นว่าการไล่ระดับสีในหน้าต่างนี้สามารถสร้างเป็นสไปรท์ได้อย่างไร ส่วนหัวและส่วนท้ายของหน้าต่างจะมีความสูงคงที่ - 30 พิกเซล ตัวหน้าต่างจะยืดออกขึ้นอยู่กับความยาวของข้อความ

ตอนนี้เรามาเขียนโค้ด html สำหรับหน้าต่างกัน:

มาเริ่มใช้สไปรท์กันเถอะ เริ่มจากชื่อหน้าต่างกันก่อน:

#window-header( ความสูง:30px; พื้นหลัง:#C0C0FF url("gradients.png") 0 0 ซ้ำ-x; )

ในไฟล์ gradients.png ขั้นแรกจะมีการไล่ระดับสีสำหรับส่วนหัว จากนั้นสำหรับเนื้อหา จากนั้นจึงสำหรับ บรรทัดล่าง- นั่นคือการไล่ระดับสีสำหรับชื่อเรื่องเริ่มต้นจากด้านบนสุด ดังนั้นเราจึงเพียงแค่ตั้งค่าไฟล์ให้เป็นพื้นหลังและระบุตำแหน่งเป็น "0 0" นั่นคืออย่าถอยไปไหนเลย หากต้องการทำให้การไล่ระดับสียืดออกในแนวนอน ให้เขียนว่า "repeat-x"

เพื่อให้แน่ใจว่าการไล่ระดับสีทั้งหมดพอดีกับส่วนหัว ให้ตั้งค่าความสูงเป็น 30 พิกเซล

มาตั้งค่าการไล่ระดับสีสำหรับส่วนท้ายในลักษณะเดียวกับส่วนหัว:

#window-footer( ความสูง:30px; พื้นหลัง: #C0FFC0 url("gradients.png") 0 -60px ซ้ำ-x; )

เฉพาะครั้งนี้เราจะย้ายรูปภาพลง 60 พิกเซล

สถานการณ์กับตัวหน้าต่างนั้นซับซ้อนกว่า ร่างกายของเราจะยืดไม่เหมือนกับส่วนหัวและส่วนท้าย นั่นคือ ถ้าเราสร้าง div หนึ่งรายการสำหรับตัวหน้าต่างและใส่การไล่ระดับสีที่นั่น การไล่ระดับสีทั้งหมดจะปรากฏใน div นี้พร้อมกัน อีกทางหนึ่ง เราสามารถใส่การไล่ระดับสีสำหรับเนื้อหาเป็นแนวตั้ง แต่จะเกิดอะไรขึ้นถ้าเรามีการไล่ระดับสีหลายแบบสำหรับบล็อกที่ยืดออก? คุณไม่สามารถทำทุกอย่างได้ในคราวเดียว เราจะทำมันให้ฉลาดขึ้นอีกหน่อย

รหัส CSS จะเป็นดังนี้:

#window-body( ตำแหน่ง:ญาติ; ) #window-body-gradient( ตำแหน่ง:สัมบูรณ์; ซ้าย:0; บน:0; ความกว้าง:100%; ความสูง:30px; พื้นหลัง:url("gradients.png") 0 - 30px ซ้ำ-x; ) #window-body-text( ตำแหน่ง: ญาติ; )

ตอนนี้ฉันจะบอกคุณโดยละเอียดมากขึ้นว่าเราทำอะไรที่นี่ นี่คือโค้ด html ของตัวหน้าต่างแยกกัน:

อย่างที่คุณเห็น เรามีนักร้องอีกสองคนฝังอยู่ในร่างกาย "window-body-gradient" ตัวแรกจะเป็นผู้รับผิดชอบในการไล่ระดับสี “window-body-text” ที่สองใช้สำหรับข้อความ นอกจากนี้ ตามที่ชัดเจนจากโค้ด CSS เราใช้ตำแหน่ง: ญาติ; สำหรับทั้งตัวหน้าต่าง

สำหรับ div การไล่ระดับสี เราระบุตำแหน่ง:สัมบูรณ์ ดังนั้นเราจึงทำให้ div การไล่ระดับสีออกจากโฟลว์ทั่วไป ตอนนี้ div นี้ไม่มีผลกับสิ่งใดเลย เนื่องจากเราได้ระบุตำแหน่ง: สัมพันธ์กับทั้งเนื้อหา div การไล่ระดับสีจึงไม่ลอยไปไกลกว่าตำแหน่งแม่ ติดไว้ที่ขอบด้านซ้ายและด้านบนของตัวหน้าต่างโดยใช้ “left:0; ด้านบน:0;". ตั้งค่าความสูงของ div การไล่ระดับสีเป็น 30 พิกเซล นั่นคือ ในกรณีนี้ เราจะระบุความสูงของการไล่ระดับสีที่เราจะแนบไว้ หากความสูงของ div มากกว่าความสูงของการไล่ระดับสี สไปรท์อื่นๆ จะโผล่ออกมาใน div และสุดท้าย เราก็แนบไฟล์ การไล่ระดับสี.png ของเราเข้ากับ div การไล่ระดับสี ตามปกติ เราจะย้ายพื้นหลังขึ้นตามระยะทางที่ต้องการ ในกรณีนี้ เราจะย้ายพื้นหลังขึ้น 30 พิกเซล

ตอนนี้เรามีการไล่ระดับสีในเนื้อความของหน้าต่าง แต่มันบดบังข้อความ เพื่อป้องกันไม่ให้ข้อความถูกบดบัง เราจะล้อมข้อความทั้งหมดไว้ใน div และกำหนดตำแหน่งให้สัมพันธ์กัน เมื่อกำหนดแล้ว ข้อความจะอยู่ด้านบนของการไล่ระดับสี

นั่นคือทั้งหมดโดยพื้นฐาน ตอนนี้เราได้วางการไล่ระดับสีทั้งหมดไว้ในหน้าต่างของเราแล้ว และในส่วนหัว และในร่างกาย และในห้องใต้ดิน

ฉันอธิบายยาวมากเพื่อให้ทุกอย่างชัดเจน แต่ในความเป็นจริง หากคุณรู้เพียงเล็กน้อยเกี่ยวกับเลย์เอาต์ ก็อาจจะเพียงพอแล้วสำหรับคุณที่จะดูตัวอย่างด้วยตนเอง:

ฉันทำซ้ำลิงก์อีกครั้ง

ที่จริงแล้ว คุณสามารถมีตัวอย่างการใช้สไปรท์ได้มากมาย ฉันแสดงตัวอย่างเพียงสองตัวอย่างเท่านั้น แต่ตัวอย่างเหล่านี้น่าจะเพียงพอที่จะเข้าใจวิธีการทำงานของสไปรท์ หากคุณมีคำถามใด ๆ ถามในความคิดเห็น

คำว่าสไปรท์ (ภาษาอังกฤษ sprite - fairy, ghost) ถูกใช้ครั้งแรกโดยแอนิเมเตอร์ของ Disney ในความสามารถที่แตกต่างกันเล็กน้อย อนิเมเตอร์เพื่อความรวดเร็วและ การสร้างที่สะดวกและตัวการ์ตูนที่ "ฟื้นคืนชีวิตชีวา" ขั้นแรกเราวาดทุกขั้นตอนของการเคลื่อนไหวของพวกเขา ฟิล์มใสจากนั้นพวกเขาก็วางภาพยนตร์เหล่านี้ไว้ที่พื้นหลังหลัก - เวที และได้รับเฟรมของการ์ตูน ซึ่งจะช่วยประหยัดเวลา เงิน และความกังวลของศิลปิน... พวกเขาเรียกสไปรต์ของภาพยนตร์เรื่องเดียวกันนี้

จากนั้นจึงนำคำว่าสไปรท์มาใช้ คอมพิวเตอร์กราฟิกและแพร่หลายโดยเฉพาะในเกมคอมพิวเตอร์ - แต่นี่ไม่ใช่สิ่งที่ฉันอยากบอกคุณอย่างแน่นอน.. วันนี้ฉันอยากจะบอกคุณเกี่ยวกับสิ่งที่เรียกว่า CSS สไปรต์..

ดังนั้น สไปรท์ใน CSS มักจะหมายถึงรูปภาพเดียวที่ประกอบด้วย “ส่วน” หลายส่วนที่แสดงแยกกัน ขึ้นอยู่กับการกระทำของผู้ใช้

มีคำมากเกินไป...ผมจะยกตัวอย่าง...

นี่คือสไปรท์ที่ปรากฏในทุกหน้าของไซต์นี้:

เพียงแต่ว่าในสถานะ "สงบ" คุณจะเห็นส่วนหนึ่งของมัน และเมื่อคุณวางเคอร์เซอร์ จะแสดงอีกส่วนหนึ่ง

วิธีการทำเช่นนี้? จริงๆแล้วมันค่อนข้างง่าย

ใน ในตัวอย่างนี้สำหรับบล็อกด้วย ขนาดคงที่เราโหลดรูปภาพ "สองเท่า" เป็นพื้นหลัง แต่เนื่องจากขนาดที่กำหนดให้กับบล็อกนั้นมีความสูงเพียงครึ่งหนึ่งของรูปภาพ เบราว์เซอร์จึงแสดงเฉพาะ "ส่วน" แรกของภาพพื้นหลังเท่านั้น และเมื่อใด เมื่อคุณเลื่อนเคอร์เซอร์ คลาสหลอก :hover จะถูกทริกเกอร์ด้วยคุณสมบัติตำแหน่งพื้นหลัง ซึ่งจะเลื่อนพื้นหลังไปตามระยะทางที่ต้องการ ดังนั้นจะแสดงส่วนที่สองของรูปภาพ

เอาล่ะ ปล่อยโลโก้ของฉันไว้คนเดียว โดยเฉพาะอย่างยิ่งเมื่อฉันโกหกคุณนิดหน่อย... มาทำสิ่งที่มีประโยชน์มากขึ้นสำหรับคุณกันดีกว่า เช่น ปุ่มนี้:

มาเปิด Photoshop แล้ววาดอะไรแบบนี้ลงไป:

สิ่งสำคัญที่นี่คืออย่าทำผิดพลาดกับขนาด! ส่วนที่สองของรูปภาพที่ปุ่มของเราใช้งานอยู่จะต้องมีขนาดเท่ากันทุกประการกับส่วนแรกของรูปภาพ ไม่เช่นนั้นเมื่อคุณวางเคอร์เซอร์ไว้ ทุกอย่างจะ "กระโดด" ในภายหลัง วิธีที่ดีที่สุดคือวาดส่วนหนึ่งของรูปภาพก่อน จากนั้นคัดลอก เรียกใช้ผ่านฟิลเตอร์ วาดรูปบางอย่างให้เสร็จ และทากาวสองภาพให้เป็นภาพเดียว... อย่างไรก็ตาม บทเรียน Photoshop ไม่ใช่สิ่งที่ฉันสนใจ...

ดังนั้นเราจึงมีรูปภาพ "สองเท่า" ขนาด 175 x 80 พิกเซล จำขนาดเหล่านี้และเริ่มเขียนโค้ด

ได้มาแบบนี้... ดูผลลัพธ์แล้วอ่านคอมเมนต์ในโค้ดได้เลย:

สไปรต์ CSS

เนื้อ (สีพื้นหลัง: #020)
h1 (ขนาดตัวอักษร:24px; สี: #ddd)

/* สร้างคลาสแยกสำหรับลิงค์ด้วยปุ่ม */
ก.สไปรท์(
จอแสดงผล:บล็อก; /* ลิงค์จะเป็นบล็อก -
ความกว้าง:175px; /* ความกว้างของบล็อก 175 พิกเซลตลอดความกว้างของรูปภาพ "สองเท่า" ของเรา */
ความสูง:40px; /* ความสูงของบล็อก 40 คือครึ่งหนึ่งของความสูงภาพซ้อนของเรา */
พื้นหลัง:url("sprite.png"); /* ทำให้รูปภาพเป็นพื้นหลัง (โดยรู้ว่าจะมองเห็นได้เพียงครึ่งเดียว) */
ระยะขอบ:3px; /* "ช่องว่าง" ระหว่างปุ่ม */
การจัดตำแหน่งข้อความ: กึ่งกลาง; /* ข้อความอยู่ตรงกลาง */
ความสูงของบรรทัด:40px; /* ระยะห่างระหว่างบรรทัดคือ 40 พิกเซล เพื่อให้ข้อความอยู่ตรงกลางปุ่ม */
ขนาดตัวอักษร:18px; /* ตัวอักษร 18 พิกเซล */
สี:#ddd; /* สีเทาใกล้กับสีขาวมากขึ้น */
การตกแต่งข้อความ:ไม่มี /* เราจะไม่ขีดเส้นใต้ลิงค์ของคลาสนี้ */
}

/* รูปแบบลิงก์เมื่อโฮเวอร์ */
ก.สไปรท์:โฮเวอร์ (
ตำแหน่งพื้นหลัง: 0 -40px; /* นิยายทั้งหมดอยู่ที่นี่แล้ว! เราย้ายพื้นหลังขึ้นไป 40 พิกเซล โดยมีค่าตำแหน่งพื้นหลังติดลบ ดังนั้นจึงแสดงส่วนที่สองของรูปภาพที่ปุ่มของเราทำงานอยู่ */
สี: #fff /* สีขาว */
}



นี่คือเมนูที่เราได้รับ:

ปุ่ม 1
ปุ่ม 2
ปุ่ม 3
ปุ่ม 4

ฉันคิดว่าผู้อ่านหลายคนสงสัยว่า: “เหตุใดจึงจำเป็นต้องใช้สไปรท์เหล่านี้เลย ในเมื่อสิ่งเดียวกันสามารถทำได้โดยใช้รูปภาพสองรูปแยกกัน โดยอันหนึ่งเป็นพื้นหลังสำหรับลิงก์เท่านั้น และอันที่สองสำหรับลิงก์ด้วย :hover โดยไม่ต้องต่อสู้กับ Photoshop และไม่คำนวณพิกัดพื้นหลังสำหรับ CSS เหรอ?”

ประการแรก: ความเร็วในการโหลดภาพเพิ่มขึ้นอย่างมาก!! แม้ว่ารูปภาพ "สองภาพ" จะมีน้ำหนักเท่ากับรูปภาพ "เดี่ยว" ขนาดเล็กสองภาพแยกกัน แต่การโหลดรูปภาพขนาดใหญ่หนึ่งภาพจะเร็วกว่า เนื่องจากเบราว์เซอร์ไม่ได้สร้างเพิ่มเติม คำขอ HTTPไปยังเซิร์ฟเวอร์

คุณจำตอนที่ฉันแสดงโลโก้สไปรท์ของฉันให้คุณดูและบอกว่าฉันโกหกได้ไหม? ความฉลาดของฉันอยู่ที่ว่าภาพนี้ไม่ได้มีส่วนตรรกะสองส่วนของภาพ แต่มีสิบแปดส่วน!!

และดูเหมือนว่านี้โดยสมบูรณ์:

นั่นคือกราฟิกเกือบทั้งหมดที่คุณเห็นบนเว็บไซต์นี้มาหาคุณจริง ๆ ในรูปแบบของภาพเดียว! ไฟล์ซีเอสเอสฉันจะไม่แสดงมัน ฉันกลัวมันเอง..))

นี่คือคำขอ HTTP... หากมี 18 ภาพแทนที่จะเป็นภาพเดียว บทสนทนาของเบราว์เซอร์กับเซิร์ฟเวอร์จะมีลักษณะดังนี้:

เบราว์เซอร์: สวัสดีเซิร์ฟเวอร์! ฉันมาจากคุณตามคำขอของฉัน รับ HTML และ เอกสารซีเอสเอสดังนั้นพวกเขาจึงระบุว่าในโฟลเดอร์ "กราฟิก" ของคุณ... ควรมีรูปภาพชื่อ: "picture1" ทิ้งมันไปเหรอ?
เซิร์ฟเวอร์: สวัสดีเบราว์เซอร์ ไม่เจอกันนาน ฉันจะลองดู... ใช่แล้ว ฉันมีรูปนี้แล้ว! จับ!!
เบราว์เซอร์: ขอบคุณ เข้าใจแล้ว! แต่ฉันยังต้องการ "picture2" ในโฟลเดอร์เดียวกัน
เซิร์ฟเวอร์: ใช่แล้ว และมีอันหนึ่ง.. ฉันกำลังส่ง..
เบราว์เซอร์: โหลดแล้ว.. แต่ “picture3” ก็แสดงอยู่ที่นี่ด้วย
เซิร์ฟเวอร์: และคุณนอนไม่หลับ! เก็บภาพไว้!!
เบราว์เซอร์: ขอบคุณ! ใช่ พูดตามตรง ฉันเบื่อแล้ว แต่ผู้ใช้ของฉันต้องการโหลดหน้าเว็บให้สมบูรณ์... พูดง่ายๆ ก็คือ คุณควรมี "picture4" อยู่ที่นั่นด้วย...
เซิร์ฟเวอร์: คุณเริ่มทำให้ฉันเครียดแล้ว! สู่ภาพของคุณ!!
เบราว์เซอร์: ขออภัย ไม่ใช่ความผิดของฉันที่มีภาพมากมายที่นี่!!! ต้องการ "ภาพที่ 5"!
เซิร์ฟเวอร์: คุณกำลังทำให้โปรเซสเซอร์ของฉันเดือดแล้ว!! ฉันลังเล!! รับภาพของคุณ!!
... ... ...

ฉันจะไม่พูดบทสนทนาอีกต่อไป เพราะสิ่งที่ตามมาคือภาษาที่หยาบคาย...

เหตุใดการพูดคุยทั้งหมดนี้ระหว่างเซิร์ฟเวอร์และเบราว์เซอร์ (ไคลเอนต์) ซึ่งใช้เวลานานและการรับส่งข้อมูลและยังโหลดเซิร์ฟเวอร์เมื่อมีผู้เยี่ยมชมไซต์จำนวนมากหากสร้าง HTTP เดียวได้เร็วกว่าและประหยัดกว่ามาก ขอและรับทั้งหมด 18 รูปในแพ็คเกจเดียว!!

ประการที่สอง: การโหลดรูปภาพที่สองเมื่อใช้คลาสหลอก :hover จะเกิดขึ้นเฉพาะในขณะที่ผู้ใช้เลื่อนเมาส์ไปเหนือลิงก์ที่มีรูปภาพแรกเท่านั้น ถ้ามันไม่ใช่ ภาพขนาดใหญ่เช่นเดียวกับปุ่มจากตัวอย่างด้านบนจะไม่มีอะไรเลวร้ายเกิดขึ้น - รูปภาพที่สองจะโหลดอย่างรวดเร็วและผู้ใช้จะไม่สังเกตเห็นอะไรเลย.. จะเกิดอะไรขึ้นถ้าสิ่งนี้ ภาพใหญ่ตามน้ำหนักและขนาด?? จากนั้นผู้ใช้จะดูว่าโหลดอย่างไร แม้ว่าเขาจะเตรียมจิตใจให้พร้อมสำหรับการเปลี่ยนแปลงรูปภาพอย่างรวดเร็วก็ตาม! ข้อดีอีกอย่างสำหรับสไปรท์! ... แม้ว่าตามจริงแล้ว นี่เป็นการลบด้วย.. ลบหากผู้ใช้ไม่เคยวางเคอร์เซอร์ในระหว่างเซสชัน.. โหลดรูปภาพแล้ว แต่ไม่มีประโยชน์สำหรับเขา.. แต่เชื่อฉันเถอะว่า "เหยื่อของ การจราจร” มักจะให้ผลตอบแทนเสมอ !

และประการที่สาม: ถึงจะดูแปลกแค่ไหนก็สะดวก!! ระบุเส้นทางไปยังรูปภาพเดียวกันในโค้ดได้สะดวก ปรับแต่งใน Photoshop ได้สะดวก เช่น ทำให้ทั้งไซต์สว่างขึ้นหรือเข้มขึ้นโดยการทำงานเป็นรูปภาพเดียว จัดเก็บได้สะดวก อัปโหลดลงได้สะดวก เซิร์ฟเวอร์และแม้แต่ใน CSS ก็สะดวกในการทำงานกับสไปรท์ขนาดใหญ่ ! - แม้ว่าจะต้องอาศัยทักษะและนิสัยบางอย่างก็ตาม..

โอเค ตัดสินใจด้วยตัวเองว่าจะใช้สไปรท์หรือไม่... แต่ธุรกิจของฉันมีขนาดเล็ก เพียงเพื่อให้คุณสนใจข้อมูล ดังนั้นพูดซะ... พวกมันจะเกิดขึ้น คำถามเพิ่มเติมฉันรอคุณอยู่ที่

อุตสาหกรรมคอมพิวเตอร์ใน ปีที่ผ่านมาสูงขึ้นมาก สูงมาก หากเกมคอมพิวเตอร์ก่อนหน้านี้เป็นเพียงความบันเทิงสำหรับแฟน ๆ ในวงแคบ ตอนนี้เกมเหล่านั้นก็เป็นอะไรที่มากกว่านั้น สามารถเล่นได้กับคนทุกวัย และโปรเจ็กต์ก็ถูกสร้างขึ้นที่เหมาะกับรสนิยมที่ละเอียดอ่อนที่สุด และที่สำคัญที่สุดคือพวกเขาปรากฏตัวขึ้น โอกาสอันเหลือเชื่อซึ่งก่อนหน้านี้คิดไม่ถึง ดังนั้นตอนนี้เกมคอมพิวเตอร์จึงแทบจะแยกไม่ออกจากความเป็นจริงในแง่ของกราฟิกและฟิสิกส์ พวกเขาสามารถดื่มด่ำกับผู้ใช้ในโลกที่ไม่รู้จัก ทำให้เขามีชีวิตเรื่องราวที่น่าทึ่งและเป็นตัวละครหลักในนั้น แต่ในขณะเดียวกัน บางคนก็ไม่ต้องการถูกจำกัดอยู่เพียงกระบวนการ "เล่น" - พวกเขารู้สึกทึ่งกับขั้นตอนการสร้างเกม อย่างไรก็ตาม นักฝันเหล่านี้ส่วนใหญ่ยังคงอยู่ในระดับจินตนาการ เพราะพวกเขาเชื่อเช่นนั้น กระบวนการนี้ซับซ้อนเกินไป อันที่จริงแล้ว กรณีนี้ไม่ได้เป็นเช่นนั้น ดังที่เห็นได้จากนักพัฒนาอินดี้จำนวนมากที่ปัจจุบันผลิตโปรเจ็กต์จำนวนมากโดยไม่มีงบประมาณจำนวนมากหรือได้รับการสนับสนุนจากผู้จัดพิมพ์ คุณเพียงแค่ต้องเริ่มต้นจากจุดเล็กๆ และค่อยๆ ก้าวไปข้างหน้า ในบทความนี้ คุณจะได้เรียนรู้ว่าสไปรต์เกมคืออะไรและใช้งานอย่างไร เพื่อให้คุณสามารถเริ่มสร้างโปรเจ็กต์ของคุณเองได้

สไปรท์คืออะไร?

หากคุณมีเกมคอมพิวเตอร์อยู่บนจอ คุณเห็นอะไรอยู่ตรงหน้าคุณ? เปลือกกราฟิก ของโครงการนี้พื้นผิวต่างๆ ที่ประกอบด้วยพิกเซลเล็กๆ หากคุณกำลังวางแผนที่จะสร้าง เกมคอมพิวเตอร์แล้วคุณจะต้องทำงานกราฟิกให้มาก แต่ถ้าคุณยังไม่ได้ลงมือทำ โครงการสำคัญคุณไม่จำเป็นต้องทำงานกับโปรแกรมแก้ไขกราฟิก 3D ได้อย่างสมบูรณ์แบบ สไปรท์สำหรับเกมที่คุณสามารถดาวน์โหลดบนอินเทอร์เน็ตจะช่วยคุณได้ที่นี่ แต่มันคืออะไร? จะนำไปใช้ได้อย่างไรและจะทำให้งานของคุณง่ายขึ้นได้อย่างไร? สไปรต์เกมเป็นพื้นผิวสำเร็จรูปของตัวละคร วัตถุ ฯลฯ ที่คุณสามารถดาวน์โหลดลงในคอมพิวเตอร์ของคุณ แล้วใช้ในกระบวนการสร้างเกม ซึ่งหมายความว่าคุณไม่จำเป็นต้องวาดทุกวัตถุในเกม เช่นเดียวกับทุกขั้นตอนของการเคลื่อนไหวของมัน - คุณจะมีทุกอย่างอยู่แล้วใน แบบฟอร์มเสร็จแล้ว- อย่างที่คุณเห็น สไปรต์ของเกมสามารถทำให้ชีวิตของคุณง่ายขึ้นมาก

สไปรท์วิว

ตอนนี้คุณมี ความคิดทั่วไปเกี่ยวกับสไปรท์สำหรับเกม แต่ไม่เพียงพอต่อการใช้ในทางปฏิบัติ เราจำเป็นต้องค้นหาว่ามันคืออะไรและจะนำไปใช้ในการสร้างเกมได้อย่างไร หากคุณกำลังจะใช้สไปรท์ คุณจะต้องดาวน์โหลดสไปรท์ลงในคอมพิวเตอร์ของคุณ ในกรณีส่วนใหญ่จะดูใหญ่หรือใหญ่โตด้วยซ้ำ ไฟล์กราฟิกซึ่งรูปภาพขนาดเล็กหลายสิบหรือหลายร้อยภาพจะอยู่บนพื้นหลังโปร่งใส ดังนั้นคุณสามารถตัดสิ่งนี้ได้ ไฟล์ขนาดใหญ่สำหรับเด็กเล็กเพื่อเข้าถึงสไปรท์ของคุณได้โดยตรง คุณอาจไม่จำเป็นต้องใช้บางส่วนและสามารถตัดออกได้ ดังนั้นวิธีนี้จึงสะดวกกว่าการดาวน์โหลดภาพหลายสิบหรือหลายร้อยภาพ คุณเพียงแค่เลือกไฟล์ขนาดใหญ่ ทำเครื่องหมายพื้นที่ และคุณก็จะได้สไปรท์

การใช้สไปรท์

ดังที่คุณทราบดี ในกรณีส่วนใหญ่ คุณจะสามารถค้นหาสไปรท์สำหรับเกม 2 มิติได้ เนื่องจากภาพ 3 มิติไม่ได้มาตรฐาน ดังนั้น จึงต้องใช้พื้นที่มากในการถ่ายทอดการเคลื่อนไหวทั้งหมดของสิ่งหนึ่ง วัตถุสามมิติ- ในขณะเดียวกัน การทำงานกับสไปรต์ 2 มิติก็ทำได้ง่ายมาก คุณเพียงแค่โหลดสไปรท์ลงในโปรแกรมแก้ไขที่คุณกำลังสร้างและต่อเข้าด้วยกันเพื่อสร้างเอฟเฟกต์การเคลื่อนไหว จากนั้นโหลดมันลงในระดับและเพลิดเพลินไปกับผลลัพธ์

การเปลี่ยนจากสไปรท์เป็นกราฟิก

คุณจะไม่สามารถใช้สไปรท์เพื่อสร้างเกมได้ตลอดชีวิต ดังนั้นหากคุณมีความทะเยอทะยาน คุณจะต้องเรียนรู้วิธีใช้สไปรท์เหล่านั้นหรือหาใครสักคนมาช่วยคุณเกี่ยวกับทักษะนี้

ก่อนที่ pseudo-class:hover จะปรากฏใน CSS การสร้างโรลโอเวอร์ซึ่งเป็นองค์ประกอบที่เปลี่ยนรูปลักษณ์เมื่อวางเมาส์เหนือ - ถูกนำมาใช้ผ่าน ภาษาจาวาสคริปต์- ในปัจจุบันนี้ทำได้ง่ายกว่ามาก แต่มีข้อเสียอยู่ประการหนึ่ง: หากภาพพื้นหลังบางรูปควรปรากฏในสถานะ:hover (เช่น เมื่อวางเคอร์เซอร์ไว้เหนือองค์ประกอบ) รูปภาพจะเริ่มโหลดในขณะที่เคอร์เซอร์ถูกโฮเวอร์ และไม่ เมื่อไร โหลดทั้งหมดหน้า

ด้วยเหตุนี้ จึงอาจมีความล่าช้าเล็กน้อยเมื่อภาพปรากฏขึ้นเป็นครั้งแรก และแม้ว่าความล่าช้านี้จะไม่เกิดขึ้นกับการเลื่อนเคอร์เซอร์ที่ตามมาทั้งหมดอีกต่อไป แต่นักพัฒนาจำนวนมากก็คิดเกี่ยวกับวิธีการแก้ไขปัญหานี้ ตัวอย่างเช่นด้วย โดยใช้จาวาสคริปต์คุณสามารถมั่นใจได้ว่าภาพพื้นหลังทั้งหมดจะถูกโหลดไว้ล่วงหน้า แต่มีวิธีที่ไม่จำเป็นต้องมีความรู้เกี่ยวกับภาษาการเขียนโปรแกรมและก็คือการใช้สไปรท์

CSS สไปรต์คืออะไร

สไปรท์ CSS เป็นไฟล์กราฟิกเดียวที่มีรูปภาพต่างๆ มากมาย มันสามารถมีได้ ตัวอย่างเช่น ทั้งหมด องค์ประกอบกราฟิกอินเตอร์เฟซ เช่น ไอคอน ปุ่ม เป็นต้น นอกจากนี้ สไปรท์มักจะรวมภาพพื้นหลังพร้อมกับรูปแบบต่างๆ สำหรับสถานะ:โฮเวอร์ ตัวอย่างทั่วไปสไปรท์:

สไปรท์ที่มีไอคอนทั้งหมดที่ใช้ สไปรท์พร้อมไอคอนโซเชียลเน็ตเวิร์กและรูปแบบต่างๆ สำหรับ: โฮเวอร์

ประโยชน์ของ CSS สไปรท์

• สไปรท์ CSS ประกอบด้วย ภาพพื้นหลังสำหรับสถานะต่างๆ ขององค์ประกอบ และจะถูกโหลดทั้งหมดเมื่อโหลดหน้าเว็บ วิธีนี้จะป้องกันไม่ให้โรลโอเวอร์ช้าลงเมื่อคุณวางเมาส์เหนือองค์ประกอบเป็นครั้งแรก
• จำนวนการเรียกไปยังเซิร์ฟเวอร์ลดลง ท้ายที่สุดแล้ว การโหลดไอคอนขนาดเล็กแต่ละไอคอนจำเป็นต้องมีคำขอแยกกัน และยิ่งคำขอน้อยลงก็ยิ่งดีเท่านั้น หากต้องการโหลดสไปรท์ คุณจำเป็นต้องมีคำขอเดียวไปยังเซิร์ฟเวอร์
• ข้อดีอีกประการหนึ่งของการจัดเก็บรูปภาพจำนวนมากในรูปแบบสไปรท์ก็คือ หากรูปภาพเหล่านั้นมีจานสีที่คล้ายคลึงกัน รูปภาพขนาดใหญ่หนึ่งภาพจะมีน้ำหนักน้อยกว่ารูปภาพขนาดเล็กแต่ละภาพรวมกัน
• โดยทั่วไปทั้งหมดนี้มีผลดีต่อความเร็วในการโหลดไซต์

วิธีสร้างสไปรท์จากรูปภาพ

ในกรณีคลาสสิก สไปรท์จะถูกสร้างขึ้นในโปรแกรมแก้ไขรูปภาพ รูปภาพขนาดเล็กจะถูกวางตามลำดับบนผืนผ้าใบขนาดใหญ่ (มักมี พื้นหลังโปร่งใส) ซึ่งจะถูกบันทึกเป็นไฟล์กราฟิก

วิธีการสร้างสไปรท์ด้วยตนเองนั้นค่อนข้างใช้เวลานาน ดังนั้นเมื่อการใช้สไปรท์เริ่มได้รับแรงผลักดัน บริการออนไลน์สำหรับ การสร้างอัตโนมัติภาพต่อเรียง เช่น สไปรท์เกน, RetinaSpriteGeneratorและอื่น ๆ คุณอัปโหลดรูปภาพที่จำเป็นเป็นไฟล์แยกไปยังไซต์ และสร้างสไปรท์ให้คุณ ซึ่งคุณสามารถดาวน์โหลดลงคอมพิวเตอร์ของคุณได้ทันที

วิธีใช้ CSS สไปรท์

ตอนนี้ได้เวลาเรียนรู้วิธีใช้ CSS Sprites ในทางปฏิบัติแล้ว เราจะแสดงตัวอย่างเล็กๆ ให้กับคุณโดยใช้ไอคอนที่มีสไปรท์ เครือข่ายทางสังคม(เราแสดงให้เห็นข้างต้น) ในสถานะลิงก์ปกติ ไอคอนโซเชียลเน็ตเวิร์กจะเป็นสี ( แถวบนสุด sprite) และเมื่อคุณวางเคอร์เซอร์เคอร์เซอร์จะเปลี่ยนเป็นสีเทา (เช่นเดียวกับแถวล่าง)

มาร์กอัป HTML มีลักษณะดังนี้:

เราสร้างชั้นเรียนของเราเองเพื่อเชื่อมโยงกับแต่ละเครือข่ายโซเชียล เนื่องจากนี่คือตัวอย่างการทดสอบ เราจึงไม่เสียเวลาในการกรอกแอตทริบิวต์ href - แทนที่จะใส่ลิงก์ไปยังไซต์จริง เราใส่ตัวยึดตำแหน่ง ภายในแท็ก เราไม่ได้วางสิ่งใดเลย เนื่องจากรูปลักษณ์ของลิงก์จะถูกกำหนดโดยภาพพื้นหลังพร้อมไอคอนเครือข่ายโซเชียล

เรามาต่อกันที่ CSS กันดีกว่า ก่อนอื่น เรามาเขียนสไตล์ทั่วไปสำหรับลิงก์ทั้งหมดกันก่อน:

A ( background-image: url(https://goo.gl/1t18Rz); background-repeat: no-repeat; height: 98px; width: 100px; display: inline-block; margin-right: 10px; )

สองบรรทัดถัดไปคือความสูงและความกว้างของแต่ละองค์ประกอบ - ค่านิยมเหล่านี้ถูกกำหนดอย่างไร? ที่นี่เราเริ่มต้นจากขนาดของไอคอนในสไปรท์ ความสูงของแต่ละไอคอนคือ 98 พิกเซล และความกว้างคือ 100 พิกเซล ต่อไป เราจะวางตำแหน่งภาพพื้นหลังของแต่ละลิงก์ โดยปรับพื้นหลังเพื่อให้ไอคอนพอดีกับ "หน้าต่าง" ขนาด 98x100 พิกเซลของลิงก์

A.facebook ( ตำแหน่งพื้นหลัง: ซ้ายบน; )

ไปกันต่อ: วางตำแหน่งพื้นหลังสำหรับลิงก์ Twitter ไอคอน Twitter อยู่ในตำแหน่งทางด้านขวาของ Facebook และขนาบข้างโดยไม่สร้างช่องว่างใดๆ เราจำเป็นต้องย้ายสไปรท์ไปทางพิกเซลด้านซ้ายเพียงพอเพื่อซ่อนไอคอน Facebook และเติมพื้นที่ลิงก์ด้วยไอคอน Twitter ให้สมบูรณ์ เนื่องจากความกว้างของแต่ละไอคอนคือ 100 พิกเซล เราจึงเลื่อนพื้นหลังไปทางซ้าย 100 พิกเซล เรายังไม่ได้เปลี่ยนตำแหน่งแนวตั้งใดๆ แต่คงค่าไว้ด้านบน:

A.twitter (ตำแหน่งพื้นหลัง: -100px ด้านบน; )

เราจะดำเนินการที่คล้ายกันกับลิงก์ที่เหลือ โดยเพิ่มอีก 100 พิกเซลในแต่ละตำแหน่งแนวนอนที่ตามมา ดังนั้นจึงย้ายสไปรท์ไปทางซ้ายมากขึ้นเรื่อยๆ คุณจะได้ภาพนี้:

A.youtube ( ตำแหน่งพื้นหลัง: -200px ด้านบน; ) a.instagram ( ตำแหน่งพื้นหลัง: -300px ด้านบน; ) a.linkedin ( ตำแหน่งพื้นหลัง: -400px ด้านบน; ) a.tumblr ( ตำแหน่งพื้นหลัง: -500px ด้านบน ; ) a.google ( ตำแหน่งพื้นหลัง: -600px ด้านบน; )

ผลลัพธ์ของรหัสนี้แสดงอยู่ในภาพหน้าจอด้านล่าง:

ตอนนี้เรามาดูพฤติกรรมของภาพพื้นหลังเมื่อคุณวางเมาส์เหนือลิงก์ เราจำเป็นต้องเลื่อนสไปรท์ขึ้นในแนวตั้งเพื่อให้ไอคอนจากแถวล่างสุดของสไปรท์ตกลงไปในพื้นที่การดู ทุกอย่างที่นี่ค่อนข้างเรียบง่ายและสามารถแก้ไขได้ด้วยกฎ CSS เดียว นั่นคือการกำหนดค่าด้านล่างให้กับคุณสมบัติ background-position-y:

A:โฮเวอร์ ( ตำแหน่งพื้นหลัง-y: ด้านล่าง; )

ในกรณีของเรา สไตล์นี้สามารถเขียนได้สำหรับลิงก์ทั้งหมด และจะทำงานได้อย่างถูกต้อง อย่างไรก็ตาม ในสถานการณ์อื่นๆ ที่องค์ประกอบในสไปรท์อยู่ในลำดับที่แตกต่างกัน คุณอาจต้องเขียนโค้ดเพิ่มเติม

ดูการสาธิตด้านล่างสำหรับผลลัพธ์ของการทำงานของสไปรท์ (เพื่อให้ตัวอย่างสวยงามยิ่งขึ้น เราได้ทำให้การเลื่อนพื้นหลังนุ่มนวลขึ้นเมื่อวางเคอร์เซอร์):

หากคุณสนใจ นี่คือบรรทัดที่รับผิดชอบในการเปลี่ยนแปลงไอคอนอย่างราบรื่น (ไม่ต้องกังวล อีกไม่นานเราจะศึกษาภาพเคลื่อนไหว CSS และโดยเฉพาะคุณสมบัติการเปลี่ยนแปลง):

A ( การเปลี่ยนแปลง: การคลายออกทั้งหมด 0.2 วินาที; )

ตอนนี้คุณรู้แล้วว่า CSS Sprite คืออะไร และมีประโยชน์อย่างไร นอกจากการป้องกันความล่าช้าในการโหลดภาพพื้นหลังแล้ว การใช้สไปรท์ยังช่วยลดภาระบนเซิร์ฟเวอร์อีกด้วย นอกจากนี้ ยังเป็นวิธีที่สะดวกในการจัดเก็บองค์ประกอบอินเทอร์เฟซแบบกราฟิกทั้งหมดไว้ในที่เดียว

ดังนั้นเราจึงได้ดูวิธีการหลักในการจัดรูปแบบลิงก์แล้ว เราขอแนะนำให้คุณฝึกฝนเพิ่มเติมเพื่อรวบรวมความรู้ที่คุณได้รับ และบทต่อไปของหนังสือของเราเกี่ยวกับแอนิเมชั่น CSS ซึ่งการนำไปปฏิบัตินั้นเกิดขึ้นได้เนื่องจากคุณสมบัติที่ปรากฏใน CSS3 และในบทเรียนแรก เราจะวิเคราะห์คุณสมบัติการเปลี่ยนแปลง -

ชอบ:
27

สิ่งที่ไม่ชอบ : 4

ไม่มีการแปล

เทพดา

ก่อนหรือหลัง “ก่อน” “หลัง” “หลัง”

Angry_bird Angry.png

ไม่มีการแปล

CSS Sprite คือกราฟิกสำหรับเว็บไซต์ของคุณ รวมกันเป็นไฟล์กราฟิกเดียว “ทำไมมีไฟล์เดียว?” - คุณถาม ความจริงก็คือวิธีการจัดเก็บภาพนี้ช่วยให้คุณสามารถปรับปรุงประสิทธิภาพของหน้าเว็บได้ตลอดจนจัดเก็บภาพกราฟิกในลักษณะที่จัดระเบียบมากขึ้น มาดูแนวทางปฏิบัติที่ดีที่สุดบางประการในการใช้สไปรท์กัน ชื่อของสไปรท์อาจทำให้คุณนึกถึงเกมสไปรท์ คอนโซลเกมย้อนยุค และแม้แต่เกมเบราว์เซอร์ที่ได้รับความนิยมในปัจจุบัน:

ดังนั้น ใช้ได้กับการออกแบบเว็บไซต์ สไปรท์เป็นเพียงไฟล์ขนาดใหญ่ไฟล์เดียวที่มีรูปภาพหลายรูปสำหรับไซต์ของคุณ ซึ่งช่วยประหยัดเวลาในการดาวน์โหลดและถ่ายโอนไฟล์ผ่านเครือข่าย ตัวอย่างเช่น เมื่อสไปรท์มีรูปภาพ 20-30 ภาพ สิ่งนี้สามารถแบ่งเบาภาระบนเซิร์ฟเวอร์ได้อย่างมาก เนื่องจากหากรูปภาพเหล่านี้ถูกจัดเก็บแยกกัน เซิร์ฟเวอร์จะต้องทำการร้องขอแยกกัน 20-30 ภาพเพื่อให้ได้แต่ละภาพดังกล่าว ต้องขอบคุณสไปรท์ที่มีการส่งคำขอ HTTP เพียงรายการเดียวไปยังเซิร์ฟเวอร์ - เพื่อรับภาพเดียว สไปรท์อาจไม่สามารถ “อ่าน” ด้วยสายตาได้ เนื่องจากหน้าที่หลักของมันคือการรวบรวม “ชิ้นส่วน” ต่างๆ ของการออกแบบของคุณเข้าด้วยกันเท่านั้น ตัวอย่างเช่น สไปรท์อาจมีลักษณะดังนี้:

ไซต์ที่ทันสมัยส่วนใหญ่ใช้สไปรท์และ VKontakte ที่รู้จักกันดีก็ไม่มีข้อยกเว้น ตัวอย่างเช่น นี่คือวิธีการจัดเก็บ "ส่วนต่างๆ" ของอินเทอร์เฟซไว้ในไฟล์เดียว - นั่นคือไอคอนที่คุ้นเคย:

ข้อดีของการใช้ CSS Sprite คือ คุณเพียงแค่ต้องส่งไฟล์กราฟิกหนึ่งไฟล์ที่มีรูปภาพทั้งหมดของคุณไปให้เซิร์ฟเวอร์ แทนที่จะส่งรูปภาพหลายรูป และผ่านทาง CSS คุณสามารถแสดงส่วนเล็กๆ ของไฟล์กราฟิกนั้นเป็นพื้นหลังสำหรับองค์ประกอบได้ บางคนคิดว่าแต่ละภาพโหลดเร็วขึ้น แต่ก็ไม่เป็นความจริง เมื่ออัปโหลดไฟล์กราฟิกหนึ่งไฟล์ที่มีรูปภาพจำนวนมาก เราจะส่งคำขอเดียวไปยังเซิร์ฟเวอร์ และเมื่ออัปโหลดรูปภาพจำนวนมาก เราจะส่งคำขอเพิ่มเติมไปยังเซิร์ฟเวอร์ การรวมรูปภาพเป็นไฟล์เดียวไม่เพียงลดจำนวนคำขอ HTTP ลงอย่างมาก แต่ยังช่วยลดขนาดไฟล์รูปภาพโดยรวมอีกด้วย

ผมขอยกตัวอย่างสไปรท์อีกตัวอย่างหนึ่งให้กับคุณ นี่คือวิธีที่เว็บไซต์ตะวันตกที่มีชื่อเสียงแห่งหนึ่งที่อุทิศให้กับการออกแบบองค์ประกอบกราฟิกของร้านค้า:

คุณอาจถาม - เวลาใดที่ดีที่สุดในการเตรียมสไปรท์? มีสองแนวทางที่แตกต่างกันสำหรับเรื่องนี้

แนวทางที่แตกต่าง - การสร้างสไปรท์ก่อนและหลังการสร้างไซต์

มีสองวิธีทั่วไปในการสร้างภาพต่อเรียง - สร้างก่อนหรือหลังการสร้างไซต์ของคุณ คุณสามารถวางรูปภาพทั้งหมดลงในภาพต่อเรียงก่อนสร้างไซต์ได้ นี่คือสิ่งที่เราเรียกว่าแนวทาง "ก่อน" นอกจากนี้ คุณสามารถสร้างภาพทั้งหมดเป็นไฟล์แยกกัน ทำให้แก้ไขได้ง่ายขึ้น เมื่อสร้างเว็บไซต์และเตรียมรูปภาพทั้งหมดแล้ว คุณสามารถสร้างภาพต่อเรียงได้อย่างรวดเร็วและง่ายดาย ทั้งด้วยตนเองหรือใช้เครื่องมืออย่างใดอย่างหนึ่ง เราจะเรียกสิ่งนี้ว่าแนวทาง "หลัง" หากภาพต่อเรียงเป็นสิ่งใหม่สำหรับคุณหรือคุณยังใหม่ต่อการออกแบบเว็บไซต์ วิธี "หลัง" จะเหมาะกับคุณมากกว่า มียูทิลิตี้ บริการ และโปรแกรมมากมายที่จะช่วยคุณสร้างสไปรท์ ซึ่งส่วนใหญ่เผยแพร่และให้บริการฟรี

การจัดวางรูปภาพในสไปรท์ให้เป็นระเบียบ

เมื่อสร้างสไปรท์ใน Photoshop ขอแนะนำให้วางรูปภาพทั้งหมดในลักษณะที่จัดระเบียบทันทีและในลำดับที่คุณเลือกเพื่อให้การทำงานในภายหลังจะง่ายและสะดวก พยายามปัดเศษพื้นที่สำหรับภาพต่อเรียงแต่ละภาพให้เหลือ 10 พิกเซลที่ใกล้ที่สุดเสมอ หรือเว้นที่ว่างรอบๆ ภาพเหล่านั้นให้มากขึ้นหากภาพเหล่านั้นมีขนาดเท่ากัน เมื่อพูดถึงการเขียนสไตล์ CSS คุณจะไม่ต้องเขียนการวัดพิกัด และมีโอกาสน้อยที่จะลืมหมายเลขพิกัดสำหรับรูปภาพที่คุณต้องการ นี่คือตัวอย่างของการวางรูปภาพต่างๆ ในสไปรท์เดียวได้สำเร็จ:

จากทฤษฎีสู่การปฏิบัติ! สร้างนกเคลื่อนไหวจาก Angry Birds โดยใช้สไปรต์

ดังนั้นเราจึงได้คุ้นเคยกับแนวคิดของสไปรท์ในการออกแบบเว็บ แต่ทฤษฎีที่ไม่มีการฝึกฝนก็ไร้ค่า ดังนั้นตอนนี้เราจะสร้างสไปรท์แรกของเราและเรียนรู้วิธีสร้างแอนิเมชั่นอย่างง่ายบนหน้า HTML ตัวอย่างของเราจะอิงจากตัวละครจากเกม Angry Birds ซึ่งเป็นนกสีแดงตลกๆ ขั้นแรก มาเตรียมภาพต่อเรียงในรูปแบบ .PNG ซึ่งมีแอนิเมชันนก 4 เฟส:

มาสร้างไดเร็กทอรี Angry_bird ที่ไหนสักแห่งบนดิสก์ - เราจะวางไฟล์ตัวอย่างของเราไว้ที่นั่น เราบันทึกสไปรท์ด้วยนกในไดเร็กทอรีนี้และเรียกไฟล์ Angry.png

ขั้นตอนต่อไปคือการสร้างไฟล์ในไดเร็กทอรีเดียวกันชื่อ index.html ซึ่งจะเป็นหน้าทดสอบพร้อมภาพเคลื่อนไหวของเรา ถัดไป เปิดไฟล์นี้ในตัวแก้ไขและวางโค้ดต่อไปนี้ที่นั่น:

ฉันขออธิบายเล็กน้อยว่าเราทำอะไรไปบ้างตอนนี้ ขั้นแรก เราตั้งค่าเอกสาร HTML ของเราเป็นการเข้ารหัส UTF-8 ซึ่งหมายความว่าเราต้องบันทึก index.html ของเราในการเข้ารหัสนั้น คุณยังสามารถตั้งค่าอื่นได้เช่น windows-1251 - สิ่งนี้ไม่สำคัญสำหรับงานของเรา ต่อไป เราเชื่อมต่อไฟล์ style.css เข้ากับเอกสาร (ไฟล์นั้นยังไม่อยู่ในไดเร็กทอรี Angry_bird ของเรา เราจะสร้างมันขึ้นมาในภายหลัง) เราได้จัดเตรียมลิงค์ไว้ด้วย สคริปต์ภายนอกและเชื่อมต่อกัน ไลบรารี jQuery- กับ โดยใช้ jQueryเราจะเปลี่ยนรูปภาพนกของเราแบบไดนามิกและเปลี่ยน "ระยะ" ของมันจากสไปรท์ นอกจากนี้เรายังได้เตรียมบล็อก JavaScript ภายใน ซึ่งเราจะวางโค้ดที่ทำให้นกเคลื่อนไหว และสุดท้าย เนื้อหาหลักของเอกสารประกอบด้วยไฮเปอร์ลิงก์เดียว ซึ่งภายในเป็นบล็อก DIV และ ID ของมันถูกตั้งค่าเป็น birdImage และคลาสเริ่มต้นคือ bird-sleeping ซึ่งหมายความว่านกของเราจะ "หลับ" เมื่อเปิดหน้า ซึ่งสอดคล้องกับภาพล่างซ้ายภายในสไปรท์ - โดยที่ดวงตาของมันปิดอยู่ ตอนนี้เป็นเวลาที่จะ "ตัด" สไปรท์ของเราเช่น เลือกภาพแต่ละภาพจากภาพนั้น

การตัดสไปรท์โดยใช้บริการ SpriteCow.Com

งาน "ตัด" สไปรท์นั้นต้องใช้แรงงานค่อนข้างมาก โดยต้องได้รับการดูแลไม่ให้ผิดพลาดกับพิกัดที่กำหนดแต่ละภาพในสไปรท์ โชคดีที่ทุกวันนี้มีบริการที่ช่วยขจัดปัญหายุ่งยากนี้ให้กับผู้ออกแบบและผู้ออกแบบโครงร่างได้อย่างสมบูรณ์ ฉันใช้บริการ http://spritecow.com สำหรับการหั่นและแนะนำให้คุณ สาระสำคัญของบริการนี้เรียบง่ายและสะดวกมาก - เราเลือกภาพนกแต่ละภาพด้วยเมาส์ และ SpriteCow ให้โค้ด CSS สำเร็จรูปพร้อมพิกัดแก่เรา สิ่งที่เราต้องทำก็แค่ตั้งค่า 4 สไตล์ให้กับนกแต่ละระยะ! เมื่อเข้าสู่ไซต์แล้วเราจะเห็นปุ่ม 2 ปุ่ม - "เปิดรูปภาพ" และ "แสดงตัวอย่าง" เราต้องการปุ่มแรก คลิกที่มัน:

ในกล่องโต้ตอบที่เปิดขึ้น ให้เลือกไฟล์สไปรท์ของเรา Angry.png หลังจากนั้นเราจะดูว่าสไปรท์ของเราถูกโหลดลงบนเว็บไซต์อย่างไร ต่อไปเราต้องกำหนดสีพื้นหลังโดยคลิกที่แถบเครื่องมือ "เลือกพื้นหลัง" แล้วชี้ไปที่พื้นที่สีขาวของสไปรต์ของเรา - สิ่งนี้จะทำให้เราสามารถตัดแต่ละเฟสของนกได้อย่างถูกต้อง:

เลือกภาพแรกและรับโค้ด CSS โดยอัตโนมัติ:

ตอนนี้ได้เวลาสร้างไฟล์ style.css ในไดเร็กทอรี Angry_bird ของเรา ที่นั่นเราจะแทรกโค้ด CSS ที่สร้างขึ้น 4 ส่วนตามลำดับ แต่แทนที่จะเป็นคลาส .sprite มาตรฐานที่ SpriteCow เสนอให้เรา เรามาเรียกสไตล์ของเราให้ชัดเจนยิ่งขึ้นกันดีกว่า นอกจากนี้ เนื่องจากเราจัดเก็บภาพต่อเรียงไว้ในรากของไดเร็กทอรีโดยตรง เราจะลบองค์ประกอบเส้นทางที่ไม่จำเป็น - imgs/ ออกจากคุณสมบัติพื้นหลัง ฉันได้รับมันเช่นนี้:

/* นก "ธรรมดา" ภาพซ้ายบนในสไปรท์ */ .bird-normal ( พื้นหลัง: url("angry.png") no-repeat -12px -16px; width: 97px; height: 94px; ) /* "Happy" bird รูปภาพด้านขวาบนในสไปรท์ */ .bird-happy ( พื้นหลัง: url("angry.png") no-repeat -118px -17px; width: 97px; height: 94px; ) /* "Sleeping" bird รูปภาพล่างซ้ายในสไปรท์ */ .bird-sleeping ( พื้นหลัง: url("angry.png") no-repeat -12px -120px; width: 97px; height: 94px; ) /* นก "Angry" ภาพล่างขวาในรูปแบบสไปรท์ */ .bird-angry ( พื้นหลัง: url("angry.png") no-repeat -118px -120px; width: 97px; height: 94px; )

ขั้นตอนสุดท้ายคือการเขียนโค้ด jQuery ที่สร้างภาพเคลื่อนไหว

ตอนนี้เราได้ตัดสไปรท์และวาง 4 สไตล์สำหรับแต่ละภาพในไฟล์ style.css ของเราได้สำเร็จแล้ว สิ่งที่เราต้องทำคือเขียนโค้ด jQuery ที่จะเพิ่มภาพเคลื่อนไหวเมื่อไฮเปอร์ลิงก์ของเราถูกโฮเวอร์เหนือและเมื่อลิงก์ ถูกคลิก อย่างที่เราจำได้ โดยค่าเริ่มต้นเรามีคลาส bird-sleeping เช่น นกสีแดงของเราจะ “หลับ” เมื่อเปิดเอกสาร :)

แอนิเมชั่นทั้งหมดจะขึ้นอยู่กับ 3 วิธีการ jQuery:

• hover - ตัวจัดการสำหรับการวางเคอร์เซอร์ไว้เหนือลิงก์ และสำหรับย้ายเคอร์เซอร์ออกจากลิงก์ เมื่อเราเลื่อนเคอร์เซอร์ นกจะ "ตื่น" - เช่น ชั้นเรียนจะกลายเป็นเรื่องธรรมดาของนก
• mousedown - ตัวจัดการสำหรับการคลิกปุ่มซ้ายของเมาส์บนลิงก์ ในกรณีนี้นกจะ "มีความสุข" - เช่น บล็อก DIV จะถูกกำหนดให้เป็นคลาสนกมีความสุข
• mouseup - ตัวจัดการปล่อยปุ่มเมาส์ซ้าย เมื่อปล่อยนกจะ "โกรธ" - เช่น บล็อก DIV ถูกกำหนดให้เป็นคลาสแบบนกโกรธ

ดังนั้นเราจึงวางโค้ดต่อไปนี้ลงในตำแหน่งที่เราเตรียมไว้ในบล็อก JavaScript ภายในที่วางอยู่บนหน้า:

$(document).ready(function() ( // นี่คือโค้ด jQuery ที่สร้างแอนิเมชั่น $("#birdImage").hover(function() ( $(this).removeClass("bird-sleeping"); $ (นี่).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird-normal"), function() ( $(นี่) ).removeClass("bird-normal"); $(this).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird-sleeping " "); )); $("#birdImage").mousedown(function() ( $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $ ( this).removeClass("bird-angry"); $(this).addClass("bird-happy"); mouseup(function() ( $(this).removeClass("bird-sleeping"); $ (นี่ ).removeClass("นก-ปกติ"); $(นี้).removeClass("นกมีความสุข"); $(นี้).addClass("นกโกรธ" ));

พร้อม! ทดสอบแอนิเมชั่น

แค่นั้นแหละ! นกของเราพร้อมแล้วและทำให้เพจมีชีวิตชีวาด้วยแอนิเมชั่น! :) คุณสามารถดูการสาธิต ดาวน์โหลดไฟล์เก็บถาวรพร้อมตัวอย่างที่ด้านล่างของบทความ