" />

มาจัดการ Graphic บางอย่างด้วย CSS กันดีกว่า

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

เข้าเรื่องกันครับ บทความนี้จะมาแนะนำ เรื่องเกี่ยวกับ การใช้ประโยชน์จาก Pseudo-Elements เพื่อที่จะทำ ให้เกิดการแสดงผลที่เป็น Graphic ด้วย CSS อย่างที่ได้เกริ่นมาในหัวข้อ

Pseudo-Elements ที่เราจะกล่าวถึงในบทความนี้คือ :before :after ซึ่งเป็นคำสั่งที่มีการทำงานในรูปแบบ Generated Content โดยสามารถสร้างเนื้อหาขึ้นมาแสดงโดยไม่สร้าง tag html แต่ในบทความนี้ผมได้ใช้ Pseudo-Elements สถาปนาตัวเองเป็นเสมือนกล่อง กล่องหนึ่ง ที่ไม่มีเนื้อหา เป็นกล่องที่รองรับการแสดงผลบางอย่าง “จงอย” ที่แหลมออกมานั่นเอง

เคยไหมครับที่เราต้องวุ่นวายกับการจัดการจัดแจงรูปภาพให้กับ กล่องข้อความ graphic สวยๆ ที่เป็นขอบมน หรือ กล่องคำพูดเหมือนในหนังสือการ์ตูน (หรือที่นิยมเรียกกันว่า Quote Bubble)

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

และยังจะมีผลต่อเนื่องไปยังเรื่องของ Retina display หากใครเลยได้ลองเล่น ลองทำเว็บให้กับ iphone ผลต่างของการแสดงผลระหว่าง Original iPhone ถึง iPhone 3Gs กับ iPhone4 ในเรื่องของการแสดงผลของ Ratidisplay นั้นแตกต่างกัน ใน iPhone4 นั้นความละเอียดของจอภาพจะชัดเจนกว่าแต่ถ้าหากเราใช้ graphic ที่เราทำมาสำหรับ Original iPhone ถึง iPhone3Gs โดยเฉพาะนั้น จะทำให้การแสดงผลของ iPhone4 นั้นแตกเบลอไปครับ เพราะฉะนั้นการจัดการรูปร่างของรูปภาพบางอย่างด้วย CSS นั้นจะช่วยเราได้มากเลยทีเดียวครับ เพราะจะเกิดจากการคำนวณการแสดงผลในแบบ vector graphic ทำให้คมชัดได้ตลอดเวลา และสามารถลดปัญหาดังกล่าวให้เราได้

ตัวอย่างการจัดการ Graphic บางอย่างด้วย CSS

ลักษณะที่ 1

example1

ลักษณะที่ 2

example2

ลักษณะที่ 3

example3

จากบทความและตัวอย่างข้างต้น เห็นได้ว่า Pseudo-Elements นั้นช่วยลดการสิ้นเปลือง tag เปล่าในการเขียน HTML Structure เพื่อผลทางการเข้าถึงข้อมูลที่ดีกว่า และการจัดการรูปร่างของรูปภาพบางอย่างด้วย CSS นั้นช่วยลดภาพที่ต้่องตัดซ้ำซ้อน และกระบวนการทำงาน ในการ Mantain ต่อๆ ไป แทนที่จะต้องมานั่งทำรูปภาพใหม่ ก็จะกลับกลายเป็นว่าปรับแค่ CSS อย่างเดียวก็จบกระบวนการ ลดทั้งเวลา และ ทัพยากรณ์ ได้มาเลยดีเดียวใช่ไหมครับ ที่เหลือก็จะได้มีเวลาในการคิด หรือ ทำอย่างอื่นกันต่อครับ

เทคนิคนี้ แสดงผลได้ดีกับ Modern browser นะครับ ลองเปิดใจใช้อะไรใหม่ๆ จะได้เกิดการพัฒนา

Back to Top

5 Responses to มาจัดการ Graphic บางอย่างด้วย CSS กันดีกว่า

  1. aon

    ไม่เข้าใจเท่าไรครับ ว่ามันตัดแบบนั้นได้ไง

    Reply

    • Samart Ya-hyaman

      เป็นลักษณะของการใช้ property {border-color: transparent; } ส่วนที่เป็น transparent นั้นก็จะไม่มีการแสดงผลนั้นเอง เป็นแค่การจองพื้นที่ใว้ เลยทำให้เกิดเป็นมุม ตั้งฉาก หรือ สามเหลี่ยม เกิดขึ้นมาครับ
      ไม่แน่ใจว่าตอบตรงคำถามหรือเปล่า

      Reply

  2. lee

    ลองเทสดูแล้วครับ เห็นเป้น 3 เหลี่ยม ด้วย
    ขอบคุณมากเลยครับ

    Reply

  3. finzaa

    CSS ก้าวไกล คนไทย ก้าวสู่เวทีโลก

    Reply

  4. รับทำเว็บ

    เืทคนิคนี้น่าจะทำให้ผมไปใช้ blog ผมได้แหะ

    Reply

Leave a Reply

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

Connect with Facebook

Back to Top