คนเขียนเว็บทั่วไปมักมีความรู้พื้นฐานด้าน CSS โดยเฉพาะการตั้งค่าคุณสมบัติของสไตล์ต่างๆ กันบ้าง แต่รู้ไหมว่า CSS มีประโยชน์มากกว่าเปลี่ยนสีเปลี่ยนไซส์ข้อความอีกมากมายมหาศาล ไม่ว่าจะเป็นการสร้างแอนิเมชั่น, ทำมุมมองเปอร์สเปกทีฟ, หรือแม้แต่วาดเวกเตอร์ด้วยโค้ด CSS อย่างเดียว นั่นคือ CSS เป็นทูลที่ทำให้เว็บดูสวยและตอบสนองได้หวือหวามากขึ้นนั่นเอง
ดังนั้น ทาง TechNotification.com จึงได้รวบรวมเว็บเด็ดๆ ที่สอนเขียน CSS ที่ช่วยยกระดับทักษะการทำเว็บสู่ความเป็นมืออาชีพด้านการดีไซน์ไว้ดังนี้
1. Coding Artist
สอนขั้นตอนพื้นฐานในการสร้างกราฟิกแบบเวกเตอร์ด้วย CSS ตั้งแต่ความรู้ CSS พื้นฐานไปจนถึงการใช้ความคิดสร้างสรรค์ต่างๆ เนรมิตให้ได้ความตื่นตาตื่นใจ โดยสอนทีละขั้นพร้อมให้การบ้านและแบบทดสอบในแต่ละบท เมื่อเรียนจบคอร์สแล้วก็จะได้ใบประกาศรับรอง พร้อมทั้งมีช่องคอมเมนต์ให้สอบถามข้อสงสัยกับผู้สอนโดยตรงได้อย่างรวดเร็ว
2. Spheres
เกี่ยวกับวิธีวาดวงกลม ซึ่งเป็นรูปทรงพื้นฐานของการวาดรูปร่างต่างๆ ไม่ว่าจะเป็นดวงตา, ก้อนหิน, ลูกโลก เป็นต้น ซึ่งการตั้งค่าวงกลมนั้นมีอะไรมากกว่าการเซ็ตแค่ border-radius หรือการเพิ่มเงา เว็บนี้จะสอนตั้งแต่การไล่สีแบบ Radial Gradients ไปจนถึงการขึ้นรูปร่างแบบสามมิติให้ได้พื้นผิวที่เป็นเงาสะท้อน หรือเป็นแบบโลหะ เพื่อให้ได้ภาพดวงตาที่เคลื่อนไหวเหมือนจริง, ฟองอากาศในน้ำ, หรือลูกเทนนิสที่สมจริง
3. SVG animations with CSS
ลองดูตัวอย่างเว็บ polygon.com/a/xbox-one-review ดู จะเห็นว่าการใช้ SVG (Scalable Vector Graphics) วาดวัตถุต่างๆ ให้เห็นต่อหน้านั้นดูน่าตื่นตาตื่นใจแค่ไหน ซึ่งเราสามารถฝัง SVG ไว้ในโค้ด CSS เพื่อสร้างแอนิเมชั่นที่ซับซ้อนยิ่งขึ้นได้
4. What The Flexbox?!–Flexbox Course (WTF1)
ฟังก์ชั่น CSS Flexbox อาจจะดูยากไปสักนิด ไม่ว่าจะเป็นการทำ Wrapping, Centering, หรือการมองแถว (Row) และคอลัมน์ แต่ผู้สอนของเว็บนี้ Wes Bos ได้ทำวิดีโอสอนที่สนุกสนานสำหรับการเรียน Flexbox ตั้งแต่ขั้นพื้นฐาน ไปจนถึงความท้าทายในโลกแห่งความเป็นจริง เช่น การฝึกทำเลย์เอาต์สำหรับแอพบนอุปกรณ์พกพา
5. CSS grid tutorial
ระบบการตั้งค่าเลย์เอาต์บน CSS ทำให้สามารถออกแบบมุมมองแบบสองมิติได้อย่างยืดหยุ่น ด้วยหลักสูตรที่แบ่งเป็น 25 ตอนที่จะสอนตั้งแต่ขั้นพื้นฐานอย่างค่อยเป็นค่อยไปจนกระทั่งไปถึงขั้นสูงที่เต็มไปด้วยคำสั่งแปลกใหม่มากมาย จนสามารถสร้างเว็บไซต์ที่ตอบสนองได้อย่างตื่นตาตื่นใจ
ที่มา : Technotification
