โซลูชัน CSS อัจฉริยะสำหรับความท้าทาย UI ทั่วไป

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

เงาที่สมจริงยิ่งขึ้นด้วย CSS

เงาช่วยถ่ายทอดความหมายและเพิ่มคุณค่าให้กับ UI อย่างไรก็ตาม เงาจำนวนมากที่เราเห็นบนเว็บในปัจจุบันไม่ได้ใช้ศักยภาพอย่างเต็มที่ มาเปลี่ยนกันเถอะ!

การดำดิ่งลึกลงไปในเงาของทุกสิ่งนั้นมาจาก Rob O'Leary บทความของเขาเกี่ยวกับ CSS Tricks สำรวจว่าแสงส่งผลต่อเงาอย่างไรและจะกำหนดแหล่งกำเนิดแสงได้อย่างไร ซึ่งเป็นรากฐานในการสร้างเอฟเฟกต์เงาที่แท้จริง เมื่อตั้งค่าฐานแล้ว คุณจะได้เรียนรู้วิธีใช้เงาเพื่อสร้างความลึก ยกระดับองค์ประกอบ และแทรกองค์ประกอบเหล่านั้น วิธีจัดเลเยอร์เงา และแน่นอน คุณสมบัติ CSS ใดที่จะใช้สำหรับกรณีการใช้งานใด ร็อบยังพิจารณาถึงการช่วยสำหรับการเข้าถึงและประสิทธิภาพที่เงานำมาด้วย ตลอดจนวิธีทำให้พวกมันเคลื่อนไหว

บทความที่ยอดเยี่ยมอีกเรื่องหนึ่งในหัวข้อนี้มาจาก Josh W Comeau เพื่อยุติ "กล่องสีเทาคลุมเครือที่ดูไม่เหมือนเงา" ในขณะที่ Josh อธิบายสถานะปัจจุบันของเงาส่วนใหญ่บนเว็บ เขาแสดงวิธีแปลงเงากล่องทั่วไปให้สวยงามเหมือนมีชีวิต . รายละเอียดเล็ก ๆ น้อย ๆ ที่ทำให้ UI สัมผัสได้มากขึ้น

เอฟเฟกต์การตัดกระดาษ CSS

หากคุณเคยต้องการสร้างเอฟเฟกต์การตัดกระดาษสำหรับส่วนหัว คุณอาจต้องลำบากสักหน่อย บางทีคุณอาจต้องตั้งค่า div แยกกันสองอันที่จะซ้อนทับกัน แน่นอนว่าการเว้นวรรคจะต้องกำหนดเป็นหน่วยสัมพัทธ์ ซึ่งอาจเป็นเรื่องยากเล็กน้อยที่จะข้ามผ่านหน้าจอ

เอฟเฟกต์การตัดกระดาษ CSS ของ Stephanie Eckles แก้ปัญหาได้ดีด้วยคุณสมบัติที่กำหนดเองของ CSS, CSS Grid, การแปลง CSS และฟังก์ชัน CSS ที่ล้าสมัย attr() สเตฟานีใช้ data span บน h1 พร้อมกับสแปนที่อยู่ภายใน attr() รับค่าของ data -attribute ซึ่งใช้สำหรับ content -property ใน :after -pseudo องค์ประกอบ ไฮไลท์ เงา และสีสามารถปรับได้ด้วย CSS Custom Properties ใช้ซ้ำได้และดูแลรักษาง่าย!

และหากคุณสนใจในความมหัศจรรย์ของสเตฟานีและผู้คนที่ยอดเยี่ยมอื่นๆ ที่รัก CSS ให้ดูที่ StyleStage ซึ่ง CSS สมัยใหม่ได้รับความสนใจอย่างคุ้มค่า

นอกจากนี้ ให้ดูผลงานของ Ahmad Shadeed เกี่ยวกับ Thinking About The Cut Out Effect ซึ่งมีรายละเอียดทั้งหมดในการตัดสินใจว่าเมื่อใดที่ SVG จะเหมาะสมกว่า และวิธีนำไปใช้ในสถานการณ์จริง บทความนี้ยังมีตัวอย่างโค้ดมากมายเพื่อเริ่มต้นใช้งาน!

แผนที่ย่อสำหรับเว็บ

เราเคยเห็นมาก่อนแล้ว: แถบแนวนอนเล็กๆ ที่มักจะอยู่ที่ด้านบนของหน้า ขณะที่ผู้ใช้เลื่อนลง แถบแนวนอนจะเต็ม ดังนั้นผู้ใช้จึงรู้ว่าเหลือเวลาอีกเท่าใดในการเลื่อน

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

แผนที่ย่อของ Rauno สำหรับเว็บ (ปัจจุบันใช้งานได้ใน Firefox เท่านั้น) ทำให้การสร้างการแสดงแผนที่ย่อของทั้งหน้าเป็นเรื่องเล็กน้อย ในขณะที่ยังช่วยให้ผู้อ่านปักหมุดส่วนของหน้าและนำทางไปมาระหว่างกันได้ เพื่อให้บรรลุสิ่งนี้ Rauno ใช้ element() เพื่อแสดงภาพสดจากองค์ประกอบ HTML ที่กำหนดเอง (ซึ่งปัจจุบันมีเฉพาะใน Firefox)

รัศมีเส้นขอบแบบมีเงื่อนไขใน CSS

เมื่อออกแบบการ์ด คุณอาจต้องการให้ border-radius มีค่าค่อนข้างมากเมื่อมีพื้นที่เพียงพอที่จะแสดงร่วมกับการ์ดอื่นๆ แต่ เมื่อไม่มีที่ว่าง และบางทีอาจไม่มีระยะขอบบนการ์ด — เนื่องจากอาจเป็นกรณีบนหน้าจอขนาดเล็ก — คุณอาจต้องการลด border-radius เป็น 0 คุณจะบรรลุสิ่งนั้นได้อย่างไร?

Ahmad Shadeed ได้ตรวจสอบปัญหานี้อย่างละเอียดในบทความของเขาเรื่อง Conditional Border Radius In CSS แนวคิดนี้ซึ่งเดิมแนะนำโดย Heydon Pickering และ Naman Goel คือการใช้ตัวเลขที่มากพอที่จะทำให้เกิดสถานะใดสถานะหนึ่ง ในหน้าจอขนาดเล็ก หากความแตกต่างระหว่าง 100vw และ 100% คือ 0 รัศมีก็จะเป็น 0 ด้วย แต่ถ้าส่วนต่างมากกว่า ก็จะใช้ค่าที่มากกว่า คุณสามารถดู CodePen ได้เช่นกัน

CSS Grainy Gradients

จะทำอย่างไรถ้าคุณต้องการเพิ่มนอยส์เพื่อ เพิ่ม เท็กซ์เจอร์ให้กับรูปภาพ แน่นอน คุณสามารถส่งออกรูปภาพเป็น PNG, WebP หรือ AVIF ได้ แต่ในอุดมคติแล้ว เราต้องการเพิ่ม “สัญญาณรบกวน” ที่ด้านบนของ SVG เพื่อให้เราสามารถปิดและปิดสัญญาณรบกวนได้ตลอดเวลาหากต้องการ

ในบทความ CSS-Tricks เกี่ยวกับการไล่ระดับสีแบบเกรน Jimmy Chion อธิบายว่าเราจะสร้างสัญญาณรบกวนที่มีสีสันเพื่อเพิ่มพื้นผิวให้กับการไล่ระดับสีด้วย CSS และ SVG ได้อย่างไร ตามที่จิมมี่อธิบาย แนวคิดคือการใช้ตัวกรอง SVG เพื่อสร้างเสียงรบกวน จากนั้นจึงใช้เสียงนั้นเป็นพื้นหลัง จากนั้นเราจัดเลเยอร์ไว้ใต้การไล่ระดับสี ปรับแต่งความสว่างและคอนทราสต์ และ — voila — คุณมีการไล่ระดับสีที่ค่อยๆ หายไป

แก้ปัญหาได้แล้ว! คุณยังสามารถสำรวจสนามเด็กเล่น Grainy Gradient ที่จิมมี่ได้ตั้งค่าไว้

การไล่สีพื้นหลังแบบหลายบรรทัด

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

ใช่อย่างที่ Matthias Ott แสดง วิธีแก้ปัญหาของ Matthias ค่อนข้างจะแฮ็ก แต่มันนำไปสู่ผลลัพธ์ที่ต้องการด้วยองค์ประกอบหลอกที่เพิ่มที่ด้านบนของข้อความ ความคิดที่น่าสนใจที่จะคนจรจัดด้วย

ฟอร์มฟิลด์โฟกัสแบบไม่มีโครงร่าง

ใครว่าฟอร์มต้องน่าเบื่อ? Hakim El Hattab ได้สร้างการสาธิตที่พิสูจน์ว่าแม้บางอย่างง่ายๆ เช่น แบบฟอร์มขอชื่อ อีเมล และรหัสผ่านก็เป็นโอกาสที่จะคิดนอกกรอบและกระตุ้นความสุข

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

การเปลี่ยน CSS Gradients

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

ตามที่ Keith J. Grant ได้ค้นพบ เราสามารถบรรลุการเปลี่ยนแปลงด้วย วิธีแก้ปัญหาที่ชาญฉลาด เราใช้องค์ประกอบหลอกและการแปลงความทึบสำหรับสิ่งนั้น ขั้นแรก เราใช้การไล่ระดับสีกับองค์ประกอบ จากนั้นวางตำแหน่งองค์ประกอบหลอกเพื่อเติมองค์ประกอบ จากนั้นจึงใช้การไล่ระดับสีที่สองกับองค์ประกอบนั้น และเรา "เปลี่ยน" ระหว่างการไล่ระดับสีสองครั้งโดยเปลี่ยนความทึบขององค์ประกอบหลอก คุณสามารถตรวจสอบตัวอย่างการทำงานทั้งหมดบน CodePen

ปรับปรุงประสิทธิภาพของภาพด้วย image-set()

คุณเคยได้ยิน image-set() แล้วหรือยัง? คุณสามารถคิดว่ามันเป็นพื้นหลัง CSS ที่เทียบเท่ากับแอตทริบิวต์ HTML srcset สำหรับแท็ก img เบราว์เซอร์ที่ใช้ Chromium และ Safari ได้รับการสนับสนุนมาหลายปีแล้ว Firefox ได้ติดตามเมื่อไม่นานนี้ Ollie Williams พิจารณาสิ่งที่เราทำได้และสิ่งที่เราทำไม่ได้ในวันนี้

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

กรณีการใช้งานที่มีแนวโน้มสูงอีกกรณีหนึ่งยังคงขาดการสนับสนุนเบราว์เซอร์ แต่น่าเสียดาย: แนวคิดในการใช้รูปแบบภาพใหม่ เช่น AVIF, WebP หรือ HEIF ในขณะที่เพิ่มทางเลือกสำรองสำหรับเบราว์เซอร์รุ่นเก่า หากคุณต้องการบรรลุสิ่งที่ต้องการในวันนี้และไม่ต้องการ background-image ให้ตั้งค่า <picture> องค์ประกอบอาจเป็นทางเลือกที่คุ้มค่าในการพิจารณาตามที่ Ollie แนะนำ การอ่านที่ยอดเยี่ยมเพื่อช่วยปรับปรุงประสิทธิภาพของภาพ

เอฟเฟกต์ป๊อปเอาต์ของ Clip-Path

ด้วย clip-path: path() ที่เบราว์เซอร์หลักๆ รองรับ ก็ถึงเวลาสร้างสรรค์ Mikael Ainalem แสดงกรณีการใช้งานที่สวยงามสำหรับคุณลักษณะที่ค่อนข้างใหม่: เอฟเฟกต์ป๊อปเอาต์ที่เนียนเหมือนเนย

Mikael ใช้ clip-path: path() เพื่อกำหนดรูปถ่ายของบุคคลนอกเหนือจากพื้นหลังรูปวงกลม เมื่อคุณวางเมาส์เหนือมัน บุคคลนั้นดูเหมือนจะลุกขึ้นจากด้านในของวงกลม สร้างความประทับใจ 3 มิติที่ยอดเยี่ยม เหมาะสำหรับหน้า "เกี่ยวกับเรา"

ปุ่ม 3D แปลกตา

รายละเอียดเป็นเรื่อง การออกแบบปุ่มที่สวยงามดูเหมือนจะไม่ใช่เรื่องยากอะไรมาก: การเติมช่องว่างเล็กๆ น้อยๆ ตรงนี้ สีขี้ขลาด ข้อความที่เข้าถึงได้ และสถานะของปุ่มบางปุ่ม Josh Comeau ได้พยายามอย่างเต็มที่ในการออกแบบปุ่ม 3D ที่แปลกตาอย่างแท้จริง ซึ่งคุณอาจต้องการคลิกมากกว่าหนึ่งครั้ง

แนวคิดนี้เรียบง่าย: เราสร้างสองชั้นและชดเชยชั้นเบื้องหน้าเล็กน้อยในตอนแรก เมื่อโฮเวอร์ เราเลื่อนเลเยอร์ด้านหน้าลง จากนั้น เราปรับเค้าร่างโฟกัสด้วย outline-offset หรือใช้ :focus:not(:focus-visible) เพื่อซ่อนเค้าร่างเมื่อปุ่มถูกโฟกัสและผู้ใช้กำลังใช้อุปกรณ์ตัวชี้

จากนั้นเราจะเลื่อนปุ่มขึ้นสองสามพิกเซลเมื่อวางเมาส์ ทำให้การแปลงเป็นภาพเคลื่อนไหวเล็กน้อย ปรับเส้นโค้งเบซิเยร์สำหรับแอนิเมชั่น และเพิ่มความเบลอเล็กน้อย เพื่อให้ได้เงาที่นุ่มนวลและเป็นธรรมชาติมากขึ้น และใช่แล้ว — เรามีปุ่ม 3D แปลกตาที่ เข้าถึงได้ ใช้งานได้ทั้งบนมือถือและบนเดสก์ท็อป และยินดีที่จะแตะและคลิก แน่นอน คุณสามารถดูข้อมูลโค้ดแบบเต็มได้ในบล็อกของ Josh

แผนภูมิ CSS

บางทีคุณอาจต้องออกแบบแผนภูมิคอลัมน์ แผนภูมิแท่ง หรือแม้แต่แผนภูมิคอลัมน์แบบหลายชุดข้อมูลหรือคอลัมน์แบบเรียงซ้อน คุณจะเริ่มต้นที่ไหน บางทีด้วย Charts.css ซึ่งเป็น เฟรมเวิร์กการแสดงข้อมูล CSS ที่ใช้คลาสยูทิลิตี้ CSS เพื่อจัดรูปแบบองค์ประกอบ HTML เป็นแผนภูมิ

สร้างโดย Lana Gordiievski และ Rami Yushuvaev กรอบงานรองรับแผนภูมิหลายประเภท ไม่มีการพึ่งพา และมีน้ำหนักเบามาก นอกจากนี้ยังมีเอกสารประกอบอย่างละเอียดเกี่ยวกับส่วนประกอบและประเภทแผนภูมิในตัว รวมทั้งมีซอร์สโค้ดอยู่บน GitHub (ได้รับอนุญาตภายใต้ MIT) และถ้าคุณต้องการแนวทางที่สร้างสรรค์มากกว่านี้เล็กน้อย Preethi จะอธิบายวิธีสร้าง CSS Charts ด้วยรูปทรงที่น่าสนใจบน CSS-Tricks ด้วยเช่นกัน

รีเซ็ต CSS ใหม่

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

ด้วยการรีเซ็ต CSS สมัยใหม่ Andy Bell ได้ลดการรีเซ็ต CSS ให้เหลือน้อยที่สุดโดยเพิ่มกฎการกำหนดขนาดกล่อง ลบระยะขอบเริ่มต้น ตั้งค่าเริ่มต้นหลักและค่าเริ่มต้นของเนื้อหา นอกจากนี้ แอนดี้ยังลบแอนิเมชัน ทรานซิชัน และการเลื่อนแบบเรียบทั้งหมดสำหรับผู้ที่ไม่ต้องการดู และยังเพิ่มคุณสมบัติที่ทันสมัย ​​เช่น ลักษณะ scroll-behavior และ text-decoration-skip-ink ตามค่าเริ่มต้น

การรีเซ็ต CSS ใหม่โดย Elad Shechter ใช้แนวทางเชิงรุกมากขึ้นเล็กน้อย Elad ลบสไตล์เริ่มต้นทั้งหมดที่เราได้รับจากองค์ประกอบ HTML เฉพาะ ยกเว้น display property ทั้งสองวิธีมีค่าควรแก่การพิจารณา!

รางเลื่อนแถบเลื่อนที่เสถียรด้วย CSS

อ่า เลย์เอาต์ที่ดีเปลี่ยนไป! ตามที่ Bramus Van Damme อธิบาย เหตุผลหนึ่งที่ไม่ชัดเจนกว่าเล็กน้อยสำหรับการเปลี่ยนเลย์เอาต์นั้นมาจาก แถบเลื่อนประเภทต่างๆ บนเว็บ ขณะที่วางแถบเลื่อนซ้อนทับบน iOS/macOS ไว้ เหนือ เนื้อหา (และไม่แสดงโดยค่าเริ่มต้น) แถบเลื่อนอื่นๆ จะอยู่ใน "รางเลื่อนแถบเลื่อน" กล่าวคือ ช่องว่างระหว่างขอบขอบด้านในกับขอบช่องว่างภายในด้านนอก

เมื่อเนื้อหาของกล่องมีขนาดใหญ่เกินไป เบราว์เซอร์จะแสดงแถบเลื่อนตามค่าเริ่มต้น ในกรณีหลังจะทำให้เกิดการเปลี่ยนเลย์เอาต์ โชคดีที่ปัญหานี้อาจจะหมดไปในไม่ช้า พบกับคุณสมบัติใหม่ scrollbar-gutter : โดยการตั้งค่าเป็น stable เราสามารถให้เบราว์เซอร์แสดงรางน้ำของแถบเลื่อนเสมอ แม้ว่ากล่องจะไม่ล้น

และเพื่อให้สิ่งต่าง ๆ สมมาตร เราสามารถใช้ scrollbar-gutter: stable both-edges ฟีเจอร์นี้ยังไม่พร้อมใช้งาน แต่กำลังจะมาใน Chromium เร็วๆ นี้ พร้อมเอ็นจิ้นการเรนเดอร์อื่นๆ ที่หวังว่าจะตามมาในเร็วๆ นี้

สิ่งมหัศจรรย์ที่ CSS สามารถเคลื่อนไหวได้

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

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

แหล่งเรียนรู้

การเรียนรู้ไม่เคยหยุดนิ่งใช่ไหม? ด้านล่างนี้เราได้รวบรวมที่มีประโยชน์ — และสนุก! — แหล่งข้อมูลที่สมบูรณ์แบบเพื่อ ยกระดับทักษะ CSS ของคุณไปอีกระดับ และหากคุณเป็นผู้เชี่ยวชาญ CSS อยู่แล้ว ก็ยังมีความท้าทายในการทดสอบความรู้ของคุณ สนุก!

CSS Vocab และ Cheatsheets

คุณอาจเคยไปที่นั่นมาก่อน เมื่อคุณทำงานตาม กำหนดเวลาที่คับคั่ง คุณจำเป็นต้องค้นหาบางอย่างอย่างรวดเร็ว สำหรับ CSS คุณจะไม่มีวันผิดพลาดกับ CSS Tricks Almanac และคุณยังสามารถค้นหาคำศัพท์ CSS ที่รวบรวมโดย Ville V. Vanninen จากประเทศฟินแลนด์ได้อีกด้วย

เรียนรู้ Flexbox The Fun Way

กบ ซอมบี้ และหอคอย มีอะไรที่เหมือนกัน? พวกเขาเป็นเพื่อนที่ดีที่สุดของคุณเมื่อเรียน Flexbox เพราะตามจริงแล้ว: Flexbox มีประสิทธิภาพมากเมื่อคุณเข้าใจ แต่การไปถึงที่นั่นอาจเป็นเรื่องยากทีเดียว มาทำให้การเรียนรู้สนุกขึ้นหน่อย

ในเกม Flexbox Froggy คุณช่วยกบตัวน้อยและเพื่อนๆ ของมัน หาลิลลี่แพดของพวกมันได้ โดยคุณเดาเอาเองว่าเขียน CSS เกมประกอบด้วย 24 ระดับที่นำคุณจากพื้นฐานของการวางตำแหน่ง Flexbox ไปจนถึงความท้าทายขั้นสูง

หากซอมบี้อยู่ในซอยของคุณมากขึ้น Flexbox Zombies ก็เหมาะสำหรับคุณ แต่ละส่วนของเกมจะคลี่คลายส่วนหนึ่งของเนื้อเรื่อง แนะนำแนวคิด Flexbox ใหม่และนำเสนอ "ความท้าทายใน การเอาชีวิตรอดจากซอมบี้" ที่เรียกว่า "ความท้าทายในการเอาชีวิตรอด" ที่ช่วยให้คุณเสริมทักษะใหม่ ๆ ของคุณ

สุดท้ายแต่ไม่ท้ายสุด คุณอาจต้องการดู Flexbox Defense แรงบันดาลใจจากเกมป้องกันหอคอย งานของคุณคือ หยุดศัตรูที่เข้ามา จากการผ่านแนวป้องกันของคุณ - โดยการวางตำแหน่งหอคอยของคุณด้วย CSS แน่นอน ทั้งสามเกมทำงานในเบราว์เซอร์ของคุณ มีความสุข flexbox'ing!

CSS Grid, CSS Selectors และการแข่งขันอื่น ๆ

คุณต้องการยกระดับทักษะ CSS ของคุณไปอีกระดับหรือไม่? เกมเล็ก ๆ สามเกมนี้ช่วยให้คุณทำอย่างนั้นได้อย่างแท้จริง ใน Grid Garden คุณจะกลายเป็นเจ้าของ สวนแครอท อย่างภาคภูมิใจ 28 ระดับกำลังรอคุณอยู่ซึ่งคุณต้องดูแลพืชผลของคุณด้วยความช่วยเหลือของกริด CSS

หากคุณรู้สึกว่าทักษะในการเลือก CSS ของคุณอาจต้องได้รับการขัดเกลา CSS Diner นั้นเหมาะสำหรับคุณ จาน แอปเปิ้ล ของดอง — ในแต่ละความท้าทายทั้ง 32 ข้อ คุณจะต้องใช้ตัวเลือก CSS ที่แตกต่างกันเพื่อเลือกรายการที่เฉพาะเจาะจงบนโต๊ะ

และหากคุณพร้อมสำหรับการแข่งขัน อย่าลืมดู CSSBattle ด้วย ใน เกมกอล์ฟ CSS คุณจะใช้ทักษะ CSS ของคุณเพื่อจำลองเป้าหมายด้วยสายตาด้วยโค้ดที่เล็กที่สุดเท่าที่จะเป็นไปได้เพื่อไปที่ด้านบนสุดของกระดานผู้นำ ความท้าทายแต่ละอย่างทุ่มเทให้กับหัวข้อเฉพาะ เช่น visibility display transition หรือ z-index

ห่อ

คุณเคยเจอทรัพยากรหรือเทคนิค CSS เมื่อเร็ว ๆ นี้ซึ่งเปลี่ยนวิธีที่คุณเผชิญกับความท้าทายโดยเฉพาะหรือไม่? แจ้งให้เราทราบในความคิดเห็นด้านล่าง! เราชอบที่จะได้ยินเกี่ยวกับเรื่องนี้