สวัสดีครับชาวคณะ ห่างหายไปนานโขเลยครับ สำหรับผมจากบทความล่าสุดที่ผ่านมา ค่อนข้างจะแรมปีอยู่แล้ว ก็เขียนก็อารัมภบทกันมาอยู่เรื่อยๆ แต่ก็ไม่คลอดสักที เนื่องด้วยว่า คำถามในหัวผมมันเยอะเกินไป ว่าทำไปแล้ว “ผู้อ่านจะได้อะไร เข้่าใจในสิ่งที่ทำไปหรือเปล่า ได้เห็นความแตกต่างกับสิ่งที่ผมพยายามจะนำเสนอหรือเปล่า เห็นประโยชน์จากสิ่งๆ นั้นหรือเปล่า” เยอะเลยใช่ไหมครับ
เข้าเรื่องกันครับ บทความนี้จะมาแนะนำ เรื่องเกี่ยวกับ การใช้ประโยชน์จาก Pseudo-Elements เพื่อที่จะทำ
Permalink
แรกเริ่มเดิมทีนั้น ผมตั้งใจเขียนบทความเรื่อง CSS Basic box model แต่บังเอิญดันไปติดเรื่องความยากในการอธิบายในเรื่องของ Margins ซึ่งอาจจะทำให้บทความยาวไปถึง เบตง ได้ จึงตัดตอนเอาเรื่อง margins ออกมาก่อน แล้วค่อยเขียนเรื่อง box model คงทำให้หนุ่มสาวทั้งหลายเข้าใจง่ายยิ่งขึ้น
อะไรเอ่ย ที่ทำให้เราเกิดการ “งุนงง ” ในชีวิตเป็นอย่างมาก เมื่อการเขียน CSS สั่งงาน HTML แล้วมันไม่ทำตาม เฉกเช่นเดียวกับการใส่ margin ให้กับ element ที่เราต้องการแต่ดันไม่แสดงผล
เราไม่ได้เขียน CSS ผิดแต่ประการใด ไม่เลย เราไม่ได้เขียนผิด แต่เป็นแค่เพียงเราไม่เข้าใจ กฎ บางข้อของ CSS เท่านั้นเอง ถ้าใครเข้าใจแล้วก็ ข้ามไปเลยนะขอรับ
หรืออาจเป็นเพราะเราเสพดราม่า มากจนเกินไป (ผมก็ติด)
หนุ่มสาวเอย จงมาเสพ margins ให้กระจ่างโดยพลัน
การยุบรวมกันของ Margins มันคืออะไรวะ มันยุบรวมกัน หรือมันรวมตัวกันได้ด้วยหรือ การรวมกันมันเหมือนที่ พธม. หรือ นปช. รวมกันไหม โอ้ว ช่างหลายหลากคำถามเหลือเกิน
Permalink
สวัสดีชาว ThaiCSS ทั้งขาประจำและขาจร บทความนี้เป็นบทความแรก แหวก ชิมิ๊ ของผมหลังจากที่ติดตามเว็บนี้มากว่า 5 ปี ในบทความนี้ผมจะพูดถึงเรื่องการ Generated Content ด้วย Properties “Content ” นะครับ โดย Properties นี้ผมมองว่าค่อนข้างมีประโยชน์มาก แต่ยังไม่ค่อยถูกนำมาใช้งาน ผมขอยกตัวอย่างมาให้ดูว่าเราสามารถนำไปใช้งานยังไงได้บ้าง
คุณสมมัติต่างๆ มีดังนี้
<string> หมายถึง การกำหนด Text ที่เราต้องการแสดง<uri> หมายถึง การเรียกรูปหรือไฟล์ที่เราต้องการให้แสดงผลออกมาโดยอัตโนมัติ<counter> หมายถึง การแสดงจำนวนที่เรานับโดยการระบุชื่อเนื้อหาให้ตรงกับที่เราตั้งค่าไว้จาก counter-reset* และเราสามารถกำหนดสไตล์แบบ List-Style ได้ด้วยopen-quote and close-quote หมายถึง การเปิดและปิดเครื่องหมายคำพูดในกรณีที่เราต้องการใช้งานในลักษณะของ Quoteno-open-quote and no-close-quote หมายถึง การสั่งยังไม่ให้ปิด Quote แต่ให้จำค่าไว้และอ้างอิงการปิดหรือเปิด Quote ก่อนหน้านี้attr(X) หมายถึง การดึงเนื้อหาจาก Attribute ที่เรากำหนดมาแสดงผลโดยอัตโนมัติ
Permalink
ไม่ได้ว่างมาก หรือไม่ได้ คึกเกินปกติ แต่เป็นความตั้งใจใหม่ ที่จะให้ thaicss.com มีบทความใหม่ ทุกๆ 7 วัน หรือ 1 เดือนอย่างน้อยก็ให้ได้ 4 บทความ วันนี้จึงมีบทความใหม่เพิ่มขึ้นมา เหมือนดั่งไม่เคยปรากฎมาาก่อน เพราะก่อนหน้านี้ เป็นๆ หายๆ ตลอดเวลา บางคราสองเดือนยังไม่มีสักบทความ เอาเป็นว่ามาเริ่มนับกันใหม่แล้วกันขอรับ
สำหรับวันนี้ เรายังอยู่ในเรื่องของ CSS เหมือนเดิม ขอพูดถึงเรื่อง การ Transitions ของ CSS3 ครับ
ในความหมายของ CSS การ Transitions คือ การเปลี่ยนค่า ใดๆ จาก A ไป B โดยระหว่างที่เปลี่ยนค่านั้น เราสามารถเห็นค่าความเปลี่ยนแปลงไปด้วย
ก่อนหน้านี้ ใน CSS เมื่อเกิดการเปลี่ยนแปลงเกิดขึ้น เราไม่สามารถมองเห็นการ ถ่ายโอนค่า เช่น ถ้าเราเรา สั่ง :hover แล้วให้เปลี่ยนพื้นหลังจากสี ดำ เป็นสีขาว การเปลี่ยนค่านั้นจะเปลี่ยนไปทันที โดยที่เราไม่เห็นว่า สีดำมันค่อยๆ จางลงจนกลายเป็นสีขาว
Permalink
บทความเปิดศักราชใหม่ จาก thaicss.com เรามาว่ากันในเรื่องง่ายๆ แต่ใช้ได้ใช้ดี โดยไม่ต้องพึ่งพา ไดเกียว แต่ประการใด นั่นก็คือการทำเงา ให้กับ Element ใดๆ ที่เราต้องการ
CSS3 Box Shadow เป็น Property ที่บรรจุเอาไว้ใน CSS Backgrounds and Border Module Level 3 ถือเป็น Miscellaneous Effects ของ Module นี้ โดยใน Miscellaneous Effects มี 2 ตัว ตัวแรกคือ box-shadow ที่กำลังจะพูดถึง และตัวที่สองคือ box-decoration-break เอาไว้พูดถึงในโอกาสหน้า (ถ้ายังมีอยู่)
box-shadow สามารถใส่ค่าการทำ drop-shadow ได้มากกว่า 1 สี โดยการใช้ คอมม่า ในการแบ่งการสั่งงาน
หลักการสั่งงานของคำสั่งมีดังนี้
div {
box-shadow: 5px 5px 10px 10px rgba(50,50,50,.4);
}หรือ
* {box-shadow: 5px 5px 15px 5px rgba(50, 50, 50, .5) inset;}
เลขค่าแรก คือการสั่งงาน เงา แนวนอน เลขบวกคือ ด้านขวา เลขลบ คือด้านซ้าย
เลขตัวที่สอง คือการสั่งงาน แนวตั้ง เลขบวกคือ ด้านล่าง เลขลบ คือด้านบน
เลขตัวที่สาม คือการสั่ง ค่าการเบลอ ว่าจะเบลอประมาณไหน เริ่มจากค่า โรงงานคือ ศูนย์ และเป็นค่าบวก
เลขตัวที่สี่ คือการสั่งขอบเขตการขยายตัวของการเบลอ (a spread distance) ใช้เป็นค่า บวกเท่านั้น
สีของเงา สามารถใส่ได้ตามหลักการของ W3C ซึ่ง อ้างอิงจาก CSS Colors Module Level 3
inset คือคำสั่งให้ เงาเด้งกลับเข้าไปในกล่อง ซึ่งคล้ายๆ การสั่ง inner shadow ของ Adobe Photoshop
Permalink
ไม่ว่าจะช้า หรือเร็ว สุดท้ายแล้ว CSS Designer ส่วนใหญ่ก็คงต้องเดินไปถึงจุดนั้นอยู่ดี จุดนั้นในที่นี้ ผมหมายถึงเรื่องของ CSS3 และการทำ Animation ตามท้องเรื่อง เว้นเสียแต่ว่า “ไม่มีความจำเป็นใดใด ” ที่ต้องทำ เอาเป็นว่านำเสนอไว้เผื่อเกิดความจำเป็นก็แล้วกันนะครับ แม้ว่ามันจะ ขาดๆ เกินๆ บ้าๆ บวมๆ ก็ตาม
ในบทความนี้ ผมขอพูดถึงเรื่อง พื้นๆ เพื่อเริ่มสร้างความเข้าใจกันไปก่อนนะครับ
คำสั่งพื้นฐานของ Animation ใน CSS3 มีดังนี้
animation-name คือ การตั้งชื่อให้กับรูปแบบการแสดงการเคลื่อนไหว
animation-duration คือ ระยะเวลาของการเคลื่อนไหว จาก ต้นทาง ไป ปลายทาง
animation-timing-function คือ รูปแบบการเล่นใน 1 รอบของการเคลื่อนไหวของ keyframe
animation-iteration-count คือ การทำซ้ำ เช่น จะให้ทำกี่รอบ หรือ infinite คือ วนไม่หยุด
animation-direction คือ การสั่งทิศทางการเล่น เช่น จาก 1 ถึง 10 หรือจะให้เล่นถอยหลัง จาก 10 มา 1
animation-delay คือ จะให้เริ่มทำทันที หรือ ดีเลย์ ตามเวลาที่กำหนด เช่น ถ้าเรากดปุ่มแล้วต้องการให้ animation ที่เราสั่งงานเริ่มเล่นเมื่อเวลาผ่านไปหลังจากกดปุ่ม 2 วินาที เราสามารถกำหนดได้ใน animation-delay โดยค่าเริ่มต้นคือ 0 ซึ่งเป็นการสั่งให้เล่นทันที
animation คือ shorthand property หรือการเขียนแบบย่อ โดยการใส่ค่าควรเรียงลำดับจาก <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>
Permalink
การเริ่มต้นอย่างถูกวิธีและมีแนวทาง ถือเป็นก้าวสำคัญที่สามารถส่งผลให้การเรียนรู้ ศึกษาเรื่องราวใดๆ ก็ตามเป็นไปอย่างมีแบบแผนและพัฒนาก้าวหน้าได้อย่างรวดเร็ว ไม่ต้องไปเสียเวลาทดลองหรือซุ่มเสี่ยงในสิ่งที่ยังไม่รู้ว่าถูก หรือผิด เพียงแค่เอาเวลาที่เหลือนั้นไปพัฒนา ต่อยอดสิ่งที่มีอยู่นั้นให้ดียิ่งขึ้นไป
แต่ถ้าหากว่า สิ่งที่มันมีอยู่นั้น มันอยู่ตรงไหนกัน “คำถามนี้ ถือเป็นปัญหาหลัก” ในแวดวงการทำงานในส่วนของ CSS และ HTML ของเมืองไทยเรามาหลายปี หรือจะบอกได้ว่าตั้งแต่เริ่มมีคำว่า Tableless หรือ CSS ไหลเข้ามาในหัวของนักพัฒนาเว็บชาวไทยโน่นเลยก็ว่าได้
เพราะมันเพิ่งเริ่ม เพิ่งเกิด จึงไม่มี หรือมีน้อย ส่วนที่มีน้อยนั้นก็ใช่ว่าจะเปี่ยมไปด้วยคุณภาพ หรือที่มีอยู่ดันเปี่ยมไปด้วยความด้อยคุณภาพ จึงทำให้ส่วนงานที่กล่าวมานั้น ยังไม่มีแนวทางหรือต้นแบบในการเรียนรู้ ปฏิบัติอย่างชัดเจน
Permalink
ก่อนหน้านี้ผมได้เขียนบทความ เรื่อง “แนวคิดการตั้งชื่อ Class และ ID ใน HTML เพื่อ Web 4.0 ” เอาไว้ ซึ่งเวลาก็นานพอสมควร ส่วนใหญ่บทความที่ผมเขียน มันมักจะไม่จบในตอน ซึ่งจะมีการแนะนำให้รออ่านในตอนต่อไป แล้วตอนต่อไป มันก็ไม่ยอมเขียนสักที บทความนี้ก็เช่นกันครับ เป็นบทความตอนต่อ ที่ต้องใช้เวลาร่วม 1 ปี จนสามารถเกิดขึ้นได้
ถึงแม้ว่า ผ่านมา 1 ปีแล้ว ผมก็ยังเชื่อว่า เนื้อหานั้นก็ยังไม่สายเกินไปอยู่ดี เพราะส่วนใหญ่ ไทซีเอสเอส มักจะเขียนบทความในฝัน กว่าที่พวกผมจะตื่นจากฝันมาเขียนบทความนอกฝันก็หลายปี แต่ตั้งแต่นี้ไป พวกผมคงเขียนบทความที่อ่านกันแล้วเข้าใจง่ายยิ่งขึ้นให้เหมาะสมกับประเทศที่กำลังพัฒนา และจะกำลังพัฒนาต่อไปไม่มีที่สิ้นสุดอย่างเมืองไทยของเรา
Permalink
วันนี้ ผมคิดอะไรออกบางอย่าง เป็นกรณีเส้นขนบังภูเขาไฟ ชนิดที่เรียกได้ว่า ผมน่าจะคิดพบตั้งนานแล้ว ได้แต่นั่ง งงๆ ในความโง่ของตัวเอง เลยเอามาเขียนไว้ตรงนี้อีกที
เหตุการณ์ที่ว่านี้คือ การสั่ง element ใดใด ที่เป็น child element ยกเว้น child ตัวที่ 1
เช่นว่า เราแบ่งเนื้อหาออกเป็น คอลัมน์ แล้วเราต้องการขีดเส้นกั้นเอาไว้ แต่ ถ้าเราสั่ง border เช่น border-left เข้าไปตรงๆ นั้น มันจะทำให้ เกิด เส้นขอบขึ้นที่ ด้านซ้ายสุดของกล่องข้อมูลด้วย เราจำเป็นต้องหาทางลบเส้นขอบมันออกไป โดยที่ยังคงความเป็น semantic ของ html เอาไว้ให้ได้มากที่สุด
เมื่อครั้งเก่าก่อน เราอาจจะเขียน class ขึ้นมา 1 class ซื่อว่า .none-border {border: none;} แล้วเอาไปใส่ ใน element ตัวแรกที่เกิดเส้นขอบขึ้น เพื่อลบเส้นขอบออกไปแทน แต่เกิดคำถามขึ้นว่า ทำไม เราต้องไปเพิ่ม ค่าให้กับ Attribute class นั้น โดยที่ชื่อ class ไม่ได้แสดงออกถึงการสื่อสารด้าน เนื้อหา ข่าวสารในความเป็น Semantic web ของภาษาเลย
ซึ่งหน้าที่เหล่านี้ โดยความรับผิดชอบแล้ว มันอยู่ที่ภาษา CSS ไม่ใช่ HTML
มาดูกันว่า เราจะลบเส้นขอบด้านซ้ายของ คอลัมน์แรกออกไปได้ยังไง โดยที่ไม่ใส่ class เพื่อสั่งลบเส้นขอบออกไป
Permalink
IE9 พี่ท่านมาแล้ว ถึงแม้ยังขาดตก บกพร่อง ก็ยังดีกว่าไม่มา ใครที่อยากจะลองของแปลก เชิญอัพเดทจาก IE8 ไปเป็น IE9 ได้ที่ www.beautyoftheweb.com เลยครับ ส่วนผม อัพเดทไปเรียบร้อยแล้ว เพื่อที่จะเอามาลองเล่นของ ซึ่งถือว่าไม่ได้เลวร้ายไปจากที่คาดการณ์กันเท่าไหร่นัก ส่วนที่เลวร้ายกว่านั้นในความรู้สึกของผมคือ ความเหินห่างจากบราวเซอร์โลโก้ ตัว อี สีฟ้าๆ น้ำเงินๆ ตัวนี้มานานหลายปีนั่นเองที่ทำให้เกิดความไม่อยากใช้งาน แม้กระทั่ง แทบไม่ได้ใช้เข้า ThaiCSS จนเกิดอาการคนใช้ IE เข้า ThaiCSS ไม่ได้มาเป็นเดือนๆ เพราะผมแยก Theme เอาไว้แล้วลืมอัพโหลดไฟล์ template เข้าไปยัง Theme ของ IE 1 ไฟล์ จึงเกิดอาการ หน้าขาวเกิดขึ้น ขออภัยมา ณ ที่นี้ด้วยขอรับ
กลับมาที่เรื่องราว CSS ของเรากันต่อ อย่างที่ผมได้เกริ่นไปในบทความก่อนหน้าว่าผมจะเริ่มเข้าสู่โหมด CSS3 Modules หลังจากที่เมาอยู่กับ CSS3 Selectors มานานสองนาน วันนี้ผมขอยกตัวอย่างเรื่องของ CSS Background Module Level 3 กันพอหอมปากหอมคอ แต่น่าจะได้นำไปใช้ประโยชน์ได้หลากหลายหนทาง
Permalink
