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)

  1. iake

    โห…ระดับเทพจริงๆ นี่แค่ตอนสอง

    ตอนสามจะขนาดไหนนี่

    Reply

  2. โดม

    อิอิ เริ่มเข้าเรื่องแล้ว

    Reply

  3. pangpond

    ถูกต้องครับ

    ก่อนหน้านี้ผมเองก็ออกจะแอนตี้ div ด้วยซ้ำ

    แต่พอรู้ประโยชน์ ก็ทำให้อยากรู้จัก เธอ ("div") มาขึ้นครับ

    Reply

  4. เหน่ง

    ไม่ใช่ว่าไม่เข้าใจคับ แต่เหมือนบทความต่างๆดูตามหัวข้อมันสื่อให้คล้อยตามอย่างเช่น ‘เปลี่ยนใจมาใช้ div แทน table ตอนที่ 1’ และอีกหลายๆข้อ คนที่ไม่มีความรู้อย่างผมหรือมีใหม่ทางด้าน css ที่ผ่านมาดูอาจคิดแบบนั้นได้ อาจจะมีคนที่เข้าใจผิดเลยเถิดไปกว่าผม จึงอยากให้ตั้งให้รัดกุมกว่านี้ แล้วไอที่ว่า

    ‘วันนี้คุณอาจจะยังไม่เข้าใจครับ คุณอาจจะมองว่าพวกผมโง่ หรือ หัวรั้นก็ไม่เป็นไรครับ ‘อันนี้ค่อนข้างเข้าใจผมผิดไปหน่อยและอย่าใช้อารมฮะ(อย่าบอกว่าไม่ช่าย อย่าเกรียน) ถ้าที่เขียนไปทำให้ใครต้องเข้าใจผิดต้องขอโทดด้วยจิงๆคับ

    ผมคิดว่าทุกคนมีความเท่าเทียมกันไม่มีใครเหนือกว่าใคร

    Reply

  5. โดม

    Cool down man…

    Reply

  6. javasci

    โอวใจเย็นๆครับทุกคน เราต่างก็มีเจตนาดีกันทั้งนั้น ผมว่าการแสดงความคิดเห็นเป็นเรื่องที่ดีนะครับ จะได้เป็นชุมชนที่มีความแข้มแข็งไงครับ ช่วยๆกัน

    Reply

  7. czarft

    ผ่านมากิน ขนมครก นายรดิส หน่อย

    Reply

Leave a Reply

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

Connect with Facebook

Back to Top