CSS กับการคิดนอกกรอบ (สี่เหลี่ยม ตอนที่ 2)

CSS ทำให้สิ่งที่ผมกล่าวมาในตอนที่ 1 นั้นเปลี่ยนไป และแน่ใจได้เลยว่า ถ้าได้ลองใช้ดูแล้วจะได้รู้ว่า ความฝันที่พวกเรานั้นเคยวาดไว้ มันจะเป็นจริงขึ้นมาเสียทีแล้ว เราจะต้องเริ่มทำความเข้าใจ มันจากอะไร Designer หลาย ๆ คนที่เริ่มทำงานกับ CSS นั้นจะรู้ได้เลยว่า ลักษณะโครงสร้างของ CSS นั้น แตกต่างไปจาก Table และก้าวข้ามขีดจำกัดของ Grid Design ได้สบาย ๆ เลย และมันสามารถลดสิ่งที่ไม่จำเป็นต้องใช้ออกไปจากงานของเราได้มากขึ้น และ ทำให้เราจัดการงานของเราได้ดีขึ้น ตอบสนองความต้องการจากไอเดียได้มากขึ้นกว่าเดิม (มองในแง่มุมของ Designer นะครับ)

CSS Visual Model เป็นได้ทั้ง lines และ boxes ซึ่งใช่มันเป็นส่วนหนึ่งของ Grid แต่เราสามารถทำอะไรกับ boxes ได้มากขึ้นไม่ว่าจะด้านในด้านนอกของ boxes หรือ เราอาจจะอยากให้มันไม่ทำหน้าที่เป็นเหมือน boxes ด้วยก็ได้ เราสามารถกำหนดคุณลักษณะให้กับมันได้อย่างอิสระตามที่เราอยากจะให้มันเป็น

Box Model

เราสามารถกำหนดตำแหน่งให้ภาพอยู่ที่ไหนก็ได้ ตัวหนังสืออยู่ที่ไหนก็ได้ด้วย properties ที่ชื่อว่า position หรือ float ช่องว่างระหว่างตัวอักษร ระยะห่างระหว่างบรรทัด ขนาดตัวอักษรเล็กใหญ่แตกต่างกัน และคุณประโยชน์อีกมากมายซึ่ง ผม พร เพื่อนและ ThaiCSS คงทราบกันดี หรือผู้ที่เพิ่งเคยเข้ามาเยี่ยมชมก็ให้ลองไปอ่านดูในส่วนของ CSS,XHTML Online หรือ บทความ: สาเหตุและความกลัวเกี่ยวกับ Cascading Style Sheets (CSS) ดูว่ามีการพูดถึงไว้อย่างไรบ้าง CSS จะช่วยให้เราทำงานกับการ Design Website ได้มากขึ้นเพราะมีความยืดหยุ่นมาก ขึ้นอยู่กับแล้วล่ะว่าทีนี้เราจะนำเสนอกล่องเหล่านั้นสู่สายตาคนภายนอกอย่างไร ตัวอย่างการ Design แบบนอกกรอบโดยใช้ CSS

CSS Zen Garden: Blood Lust

CSS Zen Garden: Blood Lust

รูปภาพแสดง การจัดวาง Layout ของ CSS Zen Garden: Blood Lust

รูปภาพแสดง การจัดวาง Layout ของ CSS Zen Garden: Blood Lust

จากภาพข้างบนจะสังเกตได้ว่า ตัวอย่างนี้ CSS ทำให้ tag XHTML นั้นแสดงผลออกมาไม่ทิ้งการออกแบบ แบบ Grid Design มากเท่าไรนัก แต่ตัวอย่างต่อไปจะเป็นตัวอย่างที่ พอเราเข้าใจและฝึกฝนมาก ๆ แล้วเราสามารถทำให้ CSS นั้นทำให้ Layout ของเราแสดงผลได้แทบจะเป็นไปตามความต้องการของไอเดียเราได้ทั้งหมดเลย

Kutztown University: Communication Design Department

Kutztown University: Communication Design Department

รูปภาพแสดง การจัดวาง Layout ของ Kutztown University: Communication Design Department

เรียบเรียงเนื้อหา และ ภาพประกอบจาก: Molly E. Holzschlag (GEO working group W3C)

คงเห็นกันแล้วนะครับว่า คุณประโยชน์ของ CSS นั้นเป็นอย่างไร ต่อไปนี้ผมคิดว่าเทคโนโลยีคงไม่กลับหวนไปสนับสนุน Grid Design แบบเดิม ๆ เหมือนเมื่อก่อนอีกแล้วคงจะพัฒนาไปในส่วนนี้ไปเรื่อย ๆ สำหรับเราเหล่า Designer ก็จะได้พบกับการเปิดสู่โลกใบใหม่ในการออกแบบที่เรียกว่า Modern Layout มันอาจจะยากบ้างในการปรับตัวของผู้ที่ชำนาญเคยชินกับการออกแบบ แบบ Grid Design มานาน แต่ผมคิดว่าคงไม่ยากเกินไปที่จะลองศึกษาและได้ฝึกฝนครับ ลองเปลี่ยนออกมานอกกรอบสี่เหลี่ยมแบบเดิม ๆ ดู จะได้รู้ว่าขนมครกน่ะอร่อยนะ จริง ๆ

Back to Top

7 Responses to CSS กับการคิดนอกกรอบ (สี่เหลี่ยม ตอนที่ 2)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top