CSS เด็ดๆ

[X11]

แล้วก็กลับไปใช้ table  เย้...  \/

[NooKSTYLE]

\/ ...เย้

[Rabbitinblack]

ทำเว็บเสร็จ เจ้านายใช้ ie 6 ตรวจงาน มันก็เบี้ยวๆพังๆ ตอนนี้ต้องกลับมาแก้ css ใหม่ ให้มันไม่พังในทุกบราวเซอร์ 

โดนประจำเหมือนกัน

[หนุ่ม]

\/

[iannnnn]

ของเจ๋งจาก Smashing จ้ะ

http://css-tricks.com/date-display-with-sprites/

โอยตายๆๆ
พี่แกใช้เทคนิค sprite (หันภาพแล้วจัดวางเอาเป็น bg)
มาทำให้ css แสดงแถบวันที่แบบโคตรจ๊าบได้ยังงี้เลย
คิดไม่ถึง!

(หรือถ้าจะทำตัวหนังสือเอียงจริงๆ ก็ดูนี่ http://snook.ca/archives/html_and_css/css-text-rotation)

[หนุ่ม]

  จ๊าบเป้งสุดๆ

[iannnnn]

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

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

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

[ณัฏฐ์]

จะบังด้านขวายังไงครับ?
เพราะตอนนี้ชี้ที่ด้านขวามันก็ยังเลื่อนอยู่(ถึงจะมองไม่เห็น)

[iannnnn]

บังด้านขวาหมายความว่าไงครับ อะไรเลื่อนๆ

[icez]

ลองเอาเมาส์ชี้ตรงที่ว่างด้านหลังรูปดูอะครับ

[iannnnn]

อุ๊ย

ขออภัย ตอนนั้นรีบโพสต์แทรกในจู๋นู้นไปหน่อย
ถ้างั้นเอาเป็นว่าให้เราใส่ไอ้เจ้าปุ่มพวกนี้ ลงในก้อนอะไรสักก้อน (อาจจะเป็น div หรือ li ก็ได้)
ซึ่งก้อนที่ว่าเนี่ยมันกำหนดความกว้างไว้เรียบร้อยแล้วครับ

หรือ

ตรงแท็ก a ให้ใส่ class อะไรสักอย่างลงไป
แล้วกำหนดให้มันมีความกว้างเท่ากับกรอบที่เราต้องการก็ได้

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

a.class12345 {
display:block;
width:90px;
}

[iannnnn]

เอาเป็นว่าใครที่พลาดงาน ฟค2 ไป
สามารถอ่านบรรยายสรุปได้ที่นี่จ้ะ

http://www.f0nt.com/forum/index.php/topic,16402.msg1314919.html#msg1314919

เครดิตหนูอร จดเก่งโคตรๆ

[iannnnn]

เบิ้ลหน่อย

http://www.webdesignerdepot.com/2009/08/5-css3-design-enhancements-that-you-can-use-today/
มาอีกละ ยั่วใจกันด้วยห้าเทคนิคเมพโคตรของ CSS3 แต่คุณสามารถทดลองใช้ได้แล้ววันนี้!!!
(หมายถึงคนที่ไม่ได้ใช้ IE นะ)

[Layiji]

เอียงได้ drop shadow ได้ จบเลยครับ 

[iannnnn]

ยังไม่จบครับ กว่า IE9 จะมาถึงผู้ใช้ตามครัวเรือน
ก็ล่อไปอีก 8 ปีครับ