ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programming - นี่มันเทคนิก CSS แบบไหนกัน (Google.co.th)-
หน้า: 1 [2]  ทั้งหมด   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: - นี่มันเทคนิก CSS แบบไหนกัน (Google.co.th)-  (อ่าน 5073 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
kenessar
ก๊วนเสียว
*

พลังน้ำใจ: 34
ออฟไลน์ ออฟไลน์

กระทู้: 340



ดูรายละเอียด เว็บไซต์
« ตอบ #20 เมื่อ: 10 กุมภาพันธ์ 2011, 23:04:14 »

มันทำยากครับ เว็บทั่วไปใช้แบบธรรมดาก็พอแล้ว แต่สำหรับเว็บที่ต้องการความเร็วเป็นพิเศษ อย่างพี่จีจี หรือ เว็บเบราเซอร์เกมส์ อันนี้มันจะใช้ Sprite แบบนี้แหละครับ โหลดครั้งเดียว
เวลาเขียนโปรแกรมเกมส์ ปกติแล้วเขาก็ใช้ Sprite เหมือนกันครับ กะพิกเซลต้องแม่น คือ ต้องวัดมาอย่างดี
บันทึกการเข้า
Hikkie
ก๊วนเสียว
*

พลังน้ำใจ: 16
ออฟไลน์ ออฟไลน์

กระทู้: 325



ดูรายละเอียด
« ตอบ #21 เมื่อ: 10 กุมภาพันธ์ 2011, 23:20:47 »

เทคนิคนี้ชื่อ css sprite ครับ

ช่วยลด header ที่เกิดขึ้นได้ ผลลัพท์คือเว็บเร็วขึ้น แต่ถ้าเว็บเราเบาอยู่แล้วก็ไม่ต้องซีเรียสอะไรมากทำแบบปกติของเราไปก็ได้

คือทุก ๆ รูปที่เปิดเว็บใหม่ครั้งแรกขึ้นมา มันจะต้องร้องขอไปที่ server ใหม่ทุกครั้ง มีรูป 10 ไฟล์ ก็ไปร้องขอที่ server 10 ครั้ง

ถ้าเราใช้เทคนิค css sprite มันก็อาจร้องขอไฟล์รูปไฟล์เดียวที่ใหญ่หน่อย แต่เป็นการร้องขอแค่ครั้งเดียวจบใช้ทั้งเว็บ เว็บเราก็จะเร็วขึ้น

แต่มีข้อจำกัดไม่สามารถทำกับการ repeat รูปซ้ำ ๆ ได้ครับ

ดูตัวอย่าง yahoo ครับจะเห็นภาพชัด

http://shopping.yahoo.com/
http://l.yimg.com/a/i/us/sh/gr...rite_primary_colors_043009.png

บันทึกการเข้า
solitary99
คนรักเสียว
*

พลังน้ำใจ: 4
ออฟไลน์ ออฟไลน์

กระทู้: 184



ดูรายละเอียด เว็บไซต์
« ตอบ #22 เมื่อ: 11 กุมภาพันธ์ 2011, 00:28:20 »

เขียน css ไม่ยากครับ  ยากตอนระบุตำแหน่งภาพ คือถ้าเราทำรูปเอง เรารู้ขนาดรูปมันจะง่ายครับ หรือไม่ก็เอารูปไปวัดขนาดใน Photoshop ก่อน มันก็แค่การไล่ตำแหน่ง position ไปเร่ือย ๆ  ตัวอย่าง

.sprite {background:url(../images/mySprite.png);} <<รูปที่ใช้
.monster {height:128px;} <<ความสูงของปุ่ม


.doctor   {width:103px; background-position:-2px -2px;}   ปุ่มแรกความยาว 103 px

.octopus {width:89px; background-position:-106px -2px;} ปุ่มสองความยาว 89px ไม่ต้องจนใจ ให้เอาขนาดภาพปุ่มแรก 103px+2px+1px (คือ stock ของรูปถ้ามี) จะเท่ากับตำแน่งของปุ่มที่สอง คือ 106px  ในแนวแกน x

.wolf {width:115px; background-position:-196px -2px;} เหมือนเดิม ปุ่มสามความยาว 115px ไม่ต้องจนใจ ให้เอาขนาดปุ่มที่สอง 89px + 106px +1px (คือ stock ของรูปถ้ามี) จะเท่ากับตำแน่งของปุ่มที่สาม คือ 196px ในแนวแกน x

.star {width:126px; background-position:-312px -2px;}  เหมือนเดิม ปุ่มสี่ความยาว 126px ไม่ต้องจนใจ ให้เอาขนาดปุ่มที่สาม 115px + 196px +1px (คือ stock ของรูปถ้ามี) จะเท่ากับตำแน่งของปุ่มที่สาม คือ 312px ในแนวแกน x

.dog {width:128px; background-position:-439px -2px;}


ทีนี้ในไฟลื html ก้เรียกใช้กันได้ตามใจชอบ

<img src="images/transparent.gif" class="sprite monster doctor" alt="Doctor Image" />
<img src="images/transparent.gif" class="sprite monster octopus" alt="Octopus Image" />

<img src="images/transparent.gif" class="sprite monster wolf" alt="Wolf Image" />
<img src="images/transparent.gif" class="sprite monster star" alt="Star Image" />

ไปดูเต็ม ๆ กันได้ที่  http://cssglobe.com/post/3028/...ng-easy-and-useful-css-sprites
บันทึกการเข้า

หน้า: 1 [2]  ทั้งหมด   ขึ้นบน
พิมพ์