F0NTCAMP02 | เบซิกเบสิก CSS

[eThics]

กลัวสำลักน้ำตายคาสระว่ายน้ำเพราะไอ้บ้าตั๊กจริงๆ  




โบว์  
บอกแล้วไงว่าเค้กกวางคราวนี้มันไม่ได้เรื่อง
คราวหน้ามันต้องปรับปรุงใหม่ มาก มาก  

[iannnnn]

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

หลักการคือสร้างก้อนอะไรสักก้อนที่ระบุความกว้าง/ความสูงไว้
แล้วก็ใช้ background (ที่ขนาดใหญ่เกินพื้นที่ที่ว่า)
โดยกำหนด position ในการแสดงผล มันก็จะถูกคัดมาแสดงแค่บางส่วนของภาพ
เราเรียกมันว่า Sprite ยังไงดูได้จาก http://delicious.com/iannnnn/sprite

เทคนิคนี้จะช่วยตอบคำถามเรื่องเว็บกากนั่น(พูดด้วยความริษยา)ให้บุ๋มกะกวางที่ถามมาจ้ะ



ดูตัวอย่างได้ที่นี่
เอาเมาส์ลองชี้ๆ ตรงโลโก้ตัวนี้แหละจ้ะ มันจะเปลี่ยนรูปได้

อันนี้โค้ด HTML

โค้ด เลือกทั้งหมด ขยายเนื้อหา

<a href="#">
<span class="test"></span>
</a>


ส่วนอันนี้ CSS

โค้ด เลือกทั้งหมด ขยายเนื้อหา


a span.test {
display:block;
width:90px;
height:40px;
background: #aaa url('http://www.f0nt.com/forum/Themes/iannnnn11/images/logo.png') no-repeat 0 0;
}
a:hover span.test {
background: #aaa url('http://www.f0nt.com/forum/Themes/iannnnn11/images/logo.png') no-repeat -85px 0;
}


เห็นไหมว่าหลักการคือ
- กำหนดความกว้างความยาวของ span (หรือก้อน div ก็แล้วแต่ถนัด) เอาไว้
- ใช้ background image ที่ใหญ่กว่าขอบเขตที่กำหนดเป็นพื้นที่ของปุ่ม
- ใช้การกำหนดพิกัดของภาพที่นำมาแสดง ทั้ง a ธรรมดา และ a:hover



ส่วนอันนี้คือภาพที่เอามาหั่นเป็น Sprite ของกูเกิ้ลเขา -->  

เดี๋ยวเอาไปแปะในจู๋ CSS เด็ดๆ ด้วยล่ะ

[โบว์]

กลัวสำลักน้ำตายคาสระว่ายน้ำเพราะไอ้บ้าตั๊กจริงๆ  




โบว์  
บอกแล้วไงว่าเค้กกวางคราวนี้มันไม่ได้เรื่อง
คราวหน้ามันต้องปรับปรุงใหม่ มาก มาก  

เออ ลืมไป ไม่ได้เรื่องจริงๆ คราวหน้าปรับปรุงด้วยนะกวาง  
ปล. แอนโพสต์สาระตัดหน้า

[ออยอิชี่]

CSSยังตามมาหลอกหลอน 

เออ ลืมไป ไม่ได้เรื่องจริงๆ คราวหน้าปรับปรุงด้วยนะกวาง 
ปล. แอนโพสต์สาระตัดหน้า

ใช่ๆ 
คราวหน้า ช็อคโก้บอล บ้างก็ดีน้ากวาง 

[バンク...แบงค์กุ]

plugin ของ firefox จ้าโหลดได้เลย
แก้ css แบบ realtime สามารถดู tag class ต่างๆได้

จิ้มโลด http://chrispederick.com/work/web-developer/

[iannnnn]

อทช เสริมของหมาย่าง มี 2 ตัวที่แนะนำ คือตัวที่แบงค์บอก
กับอีกตัวชื่อ Firebug ที่เจ๋งเหมือนกัน (เจ๋งกว่าด้วยแหละ)
แต่ตูใช้แล้วไม่ถนัดจริงๆ เลย

[Ah!]

อ้าว
ก็สอนที่นี่ก็ได้นี่

[iannnnn]

ทีสกลเหรอครับ
ออกค่าเดินทาง+ที่พัก+อาหาร(เยอะ)ให้ก็ไปจริงๆ นะ

[โบว์]

พี่อ๋า มาเมื่อไหร่ ว่ามาเลยค่ะ จะเปิดบ้านจัดมีตติ้งให้พี่เลย 

[eThics]

ถ้าพี่อ๋ามา
จะทำหมูกรอบให้พี่อ๋า 2 เส้นเลยนะ 

[Ah!]

 

[โบว์]

ถ้าพี่อ๋ามา
จะทำหมูกรอบให้พี่อ๋า 2 เส้นเลยนะ 

แต่ขอโทษนะคะ ลุงอ๋าก็ได้เส้นเดียวอยู่ดี
อีกเส้นเป็นค่าเช่าสถานที่ค่ะ 

[Ah!]

ให้มันได้ถึงเส้นเห๊อะวะครับ

[ณัฏฐ์]

หน้าพี่อรเหวอมาก

[iannnnn]

ปิดท้ายด้วยบรรยากาศหลังงานเลิกนะครับ
บรรดาผู้เข้าอบรม (แน้ ใช้คำเป็นทางการมาก) ทยอยกลับบ้านกันหมดแล้ว
เหลือแต่แก๊งบ้านใกล้และบ้านไกลแต่ไม่รีบกลับ ยังคงอยู่ที่..


เอ้อ...



ที่ครัว...













ดูหน้าโบว์สิ ไม่รู้กำลังด่าบักณัฏอยู่รึเปล่า