Accessibility Links

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

 

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

โดย Radiz เมื่อ 2007-08-21 10:34:57 ดูทั้งหมด 700 ครั้ง

และก้าวข้ามขีดจำกัดของ 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

Tags:

  1. css
  2. outside
  3. grid design
เนื้อหาที่เกี่ยวข้อง
  1. การสร้าง Graph โดยใช้ XHTML CSS
  2. ทำ Rollover Navigation Menu ด้วย CSS อย่างง่าย
  3. Accessibility หน้าทีเ่ราไม่ใช่หน้าที่ใคร | วิธีง่าย ๆ ในการทำ Web Accessibility
  4. เปรียบเทียบ Selectors ของ CSS2 และ CSS3
  5. CSS Layout ในรูปแบบต่างๆ
หรือกำลังสนใจ
  1. เกิดอาการเซงจับ

Unknown Version Unknown

© Since 2006 ThaiCSS หมู่ที่ 2 บ้านหลุบหวาย ตำบลบ้านตาด อำเภอเมือง จังหวัดอุดรธานี 41000 Contact : Contact ThaiCSS