Tag: background

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

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

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

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

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

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

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

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

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

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

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

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

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