background

Tag: background

ทำความเข้าใจ css sprites และ background-position

ThaiCSS ขอแนะนำนักเขียนใหม่ Kulachat Kena หนุ่มขอนแก่นคนนี้จะมาขอจับจองบอกเล่าเรื่องราวง่ายๆ สบายๆ ที่เราอาจจะลืมหรือมองข้ามไป รวมไปถึงเกร็ดเล็กเกร็ดน้อย แบบเบาๆ

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

ในบทความแรกนี้พูดถึเรื่องการใช้ Substring Maching Attribute Selectors แบบ Subfix เข้ามาใช้ในการกำหนดให้ Class อะไรก็ตามที่มีค่าลงท้ายเท่ากับ icon แสดงผลออกมาเป็นรูป icon ตามที่ต้องการ
โดยใช้ background-position แยกตำแหน่งการแสดงผล เซิญแซบครับ

การใช้งาน Layering Multiple Background Images

สวัสดีพี่น้องชาว ThaiCSS ผู้รักสนุกทุกท่านครับหลังจากหายหัวหนีไปปั่นจักรยานอยู่พักใหญ่ วันนี้ได้ฤกษ์ปล่อยบทความที่ตั้งใจจะเขียนซักทีถือว่าเป็นบทความก่อนลาไปอุปสมบทแล้วกันนะครับ วันนี้ผมจะมาแนะนำการใช้งาน “Layering Multiple Background Images” หรือการใช้งาน Background แบบหลายเลเยอร์นั่นเอง

Layering Multiple Background Images นั้นเป็นความสามารถที่ถูกเพิ่มเข้ามาใน CSS3 โดยความสามารถนี้จะทำให้เว็บดีไซน์เนอร์ทำงานกับ Background ได้ยืดหยุ่นมากขึ้น สำหรับการใช้งานนั้นเพียงใช้เครื่องหมาย comma-separated(,) หรือเครื่องหมายจุลภาค คั่นระหว่างแต่ละ Background ที่ต้องการเรียกใช้โดยคำสั่งที่อยู่แรกจะเป็นตำแหน่งเลเยอร์บนสุด และเรียงลำดับลงไปเรื่อยๆ

ทำแผนที่แบบง่ายๆ ด้วย CSS3 Transitions

ดวงอาทิตย์ตกดิน ข้างซ้ายมีตึก Cyber World กำลังก่อสร้าง

วันนี้ผมเปิดคอมพิวเตอร์ขึ้นมา แล้วตามด้วยบราวเซอร์อย่าง Firefox หลังจากนั้น  Firefox ได้ทำการแจ้งเตือนอัพเดทเป็นเวอร์ชั่น 7 (Beta) ผมเลยนึกขึ้นได้ว่า ผมมีตัวอย่างการทดลองเขียน CSS3 สไตล์ง่อยๆ อยู่อันหนึ่งซึ่งเขียนไว้เมื่อวันที่ 16 พฤศจิกายน 2553

ก็ย้อนจากวันนี้ไปประมาณ 9 เดือน ซึ่งตอนนั้นผมเขียน และทดลองเล่นดู ปรากฎว่า มีบราวเซอร์รองรับแค่ 2 ตัว คือ Chrome และ Safari ซึ่งเป็น Webkit ทั้งคู่ จึงพับเก็บเอาไว้ก่อนไม่ได้เขียนอธิบายลงเว็บ

CSS3 Background และ IE9 ร้อนๆ

ตัวอย่าง css3 background

IE9 พี่ท่านมาแล้ว ถึงแม้ยังขาดตก บกพร่อง ก็ยังดีกว่าไม่มา ใครที่อยากจะลองของแปลก เชิญอัพเดทจาก IE8 ไปเป็น IE9 ได้ที่ www.beautyoftheweb.com เลยครับ ส่วนผม อัพเดทไปเรียบร้อยแล้ว เพื่อที่จะเอามาลองเล่นของ ซึ่งถือว่าไม่ได้เลวร้ายไปจากที่คาดการณ์กันเท่าไหร่นัก ส่วนที่เลวร้ายกว่านั้นในความรู้สึกของผมคือ ความเหินห่างจากบราวเซอร์โลโก้ ตัว อี สีฟ้าๆ น้ำเงินๆ ตัวนี้มานานหลายปีนั่นเองที่ทำให้เกิดความไม่อยากใช้งาน แม้กระทั่ง แทบไม่ได้ใช้เข้า ThaiCSS จนเกิดอาการคนใช้ IE เข้า ThaiCSS ไม่ได้มาเป็นเดือนๆ เพราะผมแยก Theme เอาไว้แล้วลืมอัพโหลดไฟล์ template เข้าไปยัง Theme ของ IE 1 ไฟล์ จึงเกิดอาการ หน้าขาวเกิดขึ้น ขออภัยมา ณ ที่นี้ด้วยขอรับ

กลับมาที่เรื่องราว CSS ของเรากันต่อ อย่างที่ผมได้เกริ่นไปในบทความก่อนหน้าว่าผมจะเริ่มเข้าสู่โหมด CSS3 Modules หลังจากที่เมาอยู่กับ CSS3 Selectors มานานสองนาน วันนี้ผมขอยกตัวอย่างเรื่องของ CSS Background Module Level 3 กันพอหอมปากหอมคอ แต่น่าจะได้นำไปใช้ประโยชน์ได้หลากหลายหนทาง

CSS Background เล่นกับแบ็คกราวน์

หลายๆ คน คงคันไม้คันมือเต็มที กับการเน้นสีสันของ DIV การใส่พื้นหลัง ไม่ว่าจะเป็น สี หรือ รูปภาพ ซึ่ง CSS2 มีออปชั่นให้เล่นกันมันมือ

สำหรับคนที่ยังสงสัยว่า เอาทั้งแบ็คกราวน์ ที่เป็นรูปภาพ ทั้งสี ใส่เข้าไปด้วยกันนั้น ได้ด้วยหรือ วันนี้ ผมมีคำตอบครับ

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

มาดูกันก่อนว่า Property หลักๆ ของรูปภาพพื้นหลังมีอะไรกันมั่ง

Back to Top

Social media & sharing icons powered by UltimatelySocial