CSS: 20 Tips & Tricks ที่ คุณอาจไม่เคยรู้มาก่อน
PND777
April 18, 2021
อัพเดท 20 CSS เจ๋ง ๆ ที่คุณอาจจะไม่รู้จัก เราจะแนะนำ CSS ตัวใหม่ ๆ ที่จะช่วยยกระดับการทำเว็บของเราให้สวยขึ้น ลดการเขียนโค้ดซ้ำซ้อน
Menu
Menu
Menu
อัพเดท 20 CSS เจ๋ง ๆ ที่คุณอาจจะไม่รู้จัก เราจะแนะนำ CSS ตัวใหม่ ๆ ที่จะช่วยยกระดับการทำเว็บของเราให้สวยขึ้น ลดการเขียนโค้ดซ้ำซ้อน
เบื่อมั้ยกับการจัด CSS รูปภาพทุกหน้าจอให้มีขนาดกว้าง สูงที่เท่ากัน Aspect ratio ตัวใหม่ที่จะช่วยแก้ปัญหาขนาดของรูปภาพให้มีขนาดเท่ากัน
ในปัจจุบัน เทคโนโลยี ทำเว็บไซต์ ได้พัฒนาไปไกลมาก ทุกวันนี้มีเรื่องที่เราจะต้องเรียนรู้หลายมุมมอง ซึ่งในเว็บนี้รวบรวมมาให้ครบ มาดูกันว่าจะต้องเรียนอะไรบ้าง
วันนี้ใน Github มีคนปล่อยของดี เป็นชุดโค้ด CSS ที่เราต้องใช้บ่อย ๆ เหมาะมากกับ Frontend Developer / Designer หรือคนทำเว็บทุกคนควรมีเก็บไว้เป็นอย่างยิ่ง เช่น โค้ด CSS จัดกลางแนวตั้งแนวนอน, โค้ดทำตัวหนังสือจม, โค้ดวาดสามเหลี่ยม, โค้ด Clearfix แบบไม่รก, โค้ดเงาขาวเวลาเลื่อนอ่าน ฯลฯ
ปัจจุบัน Content ที่เป็นวีดิโอมีมากขึ้นเรื่อย ๆ เพราะอินเตอร์เน็ตเราเร็วกันแล้ว สามารถเสพย์เนื้อหา Video ได้สะดวกขึ้นกว่าเดิมเยอะมาก ๆ แน่นอนว่าคนทำเว็บไซต์อย่างเราก็ควรจะต้องรู้วิธีการใส่วีดิโอลงในเว็บไซต์ รวมถึงวิธีทำให้วีดิโอของเราย่อขยายอัตโนมัติตามหน้าจอ
เมื่อไม่นานมานี้แอดมินได้มีโอกาสทำโปรเจคนึงที่ใช้ React and Redux เลยได้หาเรื่องให้ตัวเองลองศึกษา React ตั้งแต่เริ่มต้น และพบว่าจริง ๆ แล้วคอนเซปต์มันเข้าใจไม่ยาก เลยมาเล่าให้ฟังกันในบทความนี้
บทความนี้จะมาแนะนำวิธี การทำ HTTPS ให้เว็บไซต์เรา แบบง่าย ใช้เวลาแปปเดียว แถมยังไม่เสียเงินสักบาท ด้วยการใช้บริการของ Cloudflare ครับ
หากพูดถึง CSS Framework ที่มีคนใช้เยอะที่สุดในโลก ก็หนีไม่พ้น Twitter Bootstrap แน่นอนครับ วันนี้จะมาดูวิธีการใช้งานตั้งแต่เริ่มต้น รวมถึงเรื่องสำคัญต่าง ๆ เช่น กริด และ Component ต่าง ๆ ใน Bootstrap 4 กัน
เชื่อว่าหลาย ๆ คนคงรู้จัก Bootstrap / Foundation กันอยู่แล้ว โดยเฉพาะ Bootstrap นี่กลายเป็นเครื่องมือติดตัวที่คนทำเว็บไซต์ส่วนใหญ่เลือกใช้ และส่งผลให้เว็บไซต์ออกมาหน้าตาเหมือนกันหมด
RSCSS หรือ Reasonable System for CSS Stylesheet Structure เป็นระบบ CSS ที่คิดค้นขึ้นโดยบริษัท RS จากการนำความรู้ด้านดนตรี ทำนองเพลงมาใช้ควบคู่ไปกับการเขียนโค้ด
เปิดเผยวิธีและเทคนิคทั้งหมดที่ใช้จากประสบการณ์ที่ได้มากจากการทำ Startup และใช้ ReactJS มากว่า 2 ปี มาสร้าง Prototype โดยใช้เวลาตั้งแต่เริ่มทำ Wireframe ถึงจบงานรวมแล้ว 14 ชม.
Google Fonts เป็นบริการโฮสต์ฟ้อนต์ฟรีของ Google ที่เราสามารถเลือกฟ้อนต์สวย ๆ ของเค้ามาใช้ในเว็บไซต์ได้เลย ไม่ต้อง Download ฟ้อนต์มา Convert และ เขียน CSS3 @font-face ให้เสียเวลา