CSS Modules

CSS3 Pseudo-elements

ซุปเปอร์มาริโอ้ และผองเพื่อน

Pseudo-elements ถูกสร้างขึ้นมาเพื่อเข้าถึงภาษาโครงสร้าง (xhtml, html, xml ฯลฯ) ที่ CSS Selectors อื่นๆ เข้าไม่ถึง ซึ่งใช้ในรูปแบบ การหลอกว่ามี element นั้นๆ อยู่ ซึ่งก่อนหน้านี้ “แบงค์” ได้เขียนอธิบายเรื่อง “เรียนรู้การใช้งาน CSS Generated Content” เอาไว้ โดยรูปแบบของ Selectors นั้นใช้ CSS2 และเน้นไปที่ :before และ :after ซึ่งทำงานได้เหมือนกัน

Pseudo-elements

  1. ::first-line คือ แถวแรก
  2. ::first-letter คือ ตัวแรก
  3. ::before คือ ก่อน (x)
  4. ::after คือ หลัง (x)

ประโยชน์หลักและโดดเด่นของ Selectors ชุดนี้คือการจัดการหน้าเอกสารในรูปแบบ นิตยสารออนไลน์ หรือ จัดหน้าให้คล้ายหรือเหมือนกับสื่อสิ่งพิมพ์ หรือจัดหน้าให้กับ Printer

สร้างคอลัมน์บนเว็บไซต์ด้วย CSS Multi-column Layout Module ตอนที่ 1

ภาพตัวอย่าง การเขียน css multi column พื้นสีเทา ตัวหนังสือสีขาว

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

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

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

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

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

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

CSS Collapsing margins การยุบรวมกันของ margins ใน CSS

แมงมุมขยุ้มหยากไย่

แรกเริ่มเดิมทีนั้น ผมตั้งใจเขียนบทความเรื่อง CSS Basic box model แต่บังเอิญดันไปติดเรื่องความยากในการอธิบายในเรื่องของ Margins ซึ่งอาจจะทำให้บทความยาวไปถึง เบตง ได้ จึงตัดตอนเอาเรื่อง margins ออกมาก่อน แล้วค่อยเขียนเรื่อง box model คงทำให้หนุ่มสาวทั้งหลายเข้าใจง่ายยิ่งขึ้น

อะไรเอ่ย ที่ทำให้เราเกิดการ “งุนงง” ในชีวิตเป็นอย่างมาก เมื่อการเขียน CSS สั่งงาน HTML แล้วมันไม่ทำตาม เฉกเช่นเดียวกับการใส่ margin ให้กับ element ที่เราต้องการแต่ดันไม่แสดงผล

เราไม่ได้เขียน CSS ผิดแต่ประการใด ไม่เลย เราไม่ได้เขียนผิด แต่เป็นแค่เพียงเราไม่เข้าใจ กฎ บางข้อของ CSS เท่านั้นเอง ถ้าใครเข้าใจแล้วก็ ข้ามไปเลยนะขอรับ

หรืออาจเป็นเพราะเราเสพดราม่า มากจนเกินไป (ผมก็ติด)

หนุ่มสาวเอย จงมาเสพ margins ให้กระจ่างโดยพลัน

การยุบรวมกันของ Margins มันคืออะไรวะ มันยุบรวมกัน หรือมันรวมตัวกันได้ด้วยหรือ การรวมกันมันเหมือนที่ พธม. หรือ นปช. รวมกันไหม โอ้ว ช่างหลายหลากคำถามเหลือเกิน

เรียนรู้การใช้งาน CSS Generated Content

สวัสดีชาว ThaiCSS ทั้งขาประจำและขาจร บทความนี้เป็นบทความแรก แหวก ชิมิ๊ ของผมหลังจากที่ติดตามเว็บนี้มากว่า 5 ปี ในบทความนี้ผมจะพูดถึงเรื่องการ Generated Content ด้วย Properties “Content” นะครับ โดย Properties นี้ผมมองว่าค่อนข้างมีประโยชน์มาก แต่ยังไม่ค่อยถูกนำมาใช้งาน ผมขอยกตัวอย่างมาให้ดูว่าเราสามารถนำไปใช้งานยังไงได้บ้าง

คุณสมมัติต่างๆ มีดังนี้

  1. <string>หมายถึง การกำหนด Text ที่เราต้องการแสดง
  2. <uri>หมายถึง การเรียกรูปหรือไฟล์ที่เราต้องการให้แสดงผลออกมาโดยอัตโนมัติ
  3. <counter>หมายถึง การแสดงจำนวนที่เรานับโดยการระบุชื่อเนื้อหาให้ตรงกับที่เราตั้งค่าไว้จาก counter-reset* และเราสามารถกำหนดสไตล์แบบ List-Style ได้ด้วย
  4. open-quote and close-quoteหมายถึง การเปิดและปิดเครื่องหมายคำพูดในกรณีที่เราต้องการใช้งานในลักษณะของ Quote
  5. no-open-quote and no-close-quoteหมายถึง การสั่งยังไม่ให้ปิด Quote แต่ให้จำค่าไว้และอ้างอิงการปิดหรือเปิด Quote ก่อนหน้านี้
  6. attr(X)หมายถึง การดึงเนื้อหาจาก Attribute ที่เรากำหนดมาแสดงผลโดยอัตโนมัติ

ทำความเข้าใจ CSS3 Transitions

ภาพตัวอย่างการเขียน css3 transition

ไม่ได้ว่างมาก หรือไม่ได้ คึกเกินปกติ แต่เป็นความตั้งใจใหม่ ที่จะให้ thaicss.com มีบทความใหม่ ทุกๆ 7 วัน หรือ 1 เดือนอย่างน้อยก็ให้ได้ 4 บทความ วันนี้จึงมีบทความใหม่เพิ่มขึ้นมา เหมือนดั่งไม่เคยปรากฎมาาก่อน เพราะก่อนหน้านี้ เป็นๆ หายๆ ตลอดเวลา บางคราสองเดือนยังไม่มีสักบทความ เอาเป็นว่ามาเริ่มนับกันใหม่แล้วกันขอรับ

สำหรับวันนี้ เรายังอยู่ในเรื่องของ CSS เหมือนเดิม ขอพูดถึงเรื่อง การ Transitions ของ CSS3 ครับ

ในความหมายของ CSS การ Transitions คือ การเปลี่ยนค่า ใดๆ จาก A ไป B โดยระหว่างที่เปลี่ยนค่านั้น เราสามารถเห็นค่าความเปลี่ยนแปลงไปด้วย

ก่อนหน้านี้ ใน CSS เมื่อเกิดการเปลี่ยนแปลงเกิดขึ้น เราไม่สามารถมองเห็นการ ถ่ายโอนค่า เช่น ถ้าเราเรา สั่ง :hover แล้วให้เปลี่ยนพื้นหลังจากสี ดำ เป็นสีขาว การเปลี่ยนค่านั้นจะเปลี่ยนไปทันที โดยที่เราไม่เห็นว่า สีดำมันค่อยๆ จางลงจนกลายเป็นสีขาว
จนกระทั่ง CSS3 เข้ามาและมี Transitions Module เราจึงสามารถทำให้การเปลี่ยนค่านั้นยืดเวลาออกไป จากดำค่อยๆ เป็นเทา จาง จาง จาง และขาวไปในที่สุด โดยเราสามารถกำหนดการ transition ให้กับ property ของ CSS ก็ได้ โดยไม่เกินเลยเงื่อนไขที่ ภาษากำหนดไว้

Back to Top