บทความ IT เจ๋งๆ
10 CSS Properties มีประโยชน์ ที่คุณควรรู้จักไว้
24-มี.ค.-23
คัมภีร์เทพ IT
ปัจจุบันมีการใช้ CSS Code บน Website และ Web Application เป็นจำนวนมาก เพราะมันช่วยทำให้ Website หรือ Web Application ของคุณสวยงามและโดดเด่น และสำหรับคนที่ต้องใช้งาน CSS นี่คือ 10 CSS Properties มีประโยชน์ ที่คุณควรรู้จักไว้
1. The property User-select
หากคุณต้องการป้องกันไม่ให้ User ทำการ Highlight หรือ Select Text บน Web Page ของคุณ CSS Property “User-select” สามารถช่วยคุณได้ Property จะกำหนดว่า จะสามารถ Select Text ของ Element ได้หรือไม่
Property นี้ มีประโยชน์มาก หากคุณไม่ต้องการให้ User ทำการ Copy Text จาก Website ของคุณ
นี่คือตัวอย่าง Code:
2. The property place-items
CSS Property “Place-items” ถือเป็น Shorthand ที่ดีสำหรับการจัดตำแหน่งหรือการจัดการในเรื่องชิดขอบของ Items มันช่วยทำให้ง่ายต่อการจัดแนวของ Items ทั้งแบบ Inline และ Block ภายใน Layout System เช่น Flexbox หรือ Grid
Property “Place-item” สามารถมีค่าต่าง ๆ ได้มากมาย รวมทั้ง Center, Start, Finish, Stretch และอื่น ๆ อีกมากมาย
คุณสามารถดูตัวอย่าง Code ได้จากด้านล่าง:
ผลลัพธ์:
3. The clip-path property
“Clip-path” Property นั้นมีประโยชน์และน่าสนใจมาก เพราะมันทำให้เราสามารถใช้ CSS ในการออกแบบรูปทรงที่ซับซ้อนประเภทต่าง ๆ ได้ (วงรี, รูปหลายเหลี่ยม, วงกลม, และรูปร่างอื่น ๆ อีกมากมาย)
Property นี้ จะช่วยให้คุณสามารถออกแบบรูปทรงที่ซับซ้อนได้ โดยการระบุว่าควรแสดงส่วนใดของ Element นอกจากนี้ Clip-path ยังสามารถมีได้หลายค่า รวมถึง Shape Function และ Clip Source ซึ่งคุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับ Property นี้ได้ใน MDN Documents
ลองดูที่ตัวอย่าง Code ด้านล่างนี้:
ขอแนะนำให้คุณใช้ Clip-Path-Maker หากคุณต้องการสร้างรูปทรงที่ซับซ้อนอย่างรวดเร็วด้วย Property Clip-path
Image Captured by the author from bennettfeely
สำหรับ Tool ตัวนี้ สามารถใช้ได้โดยไม่เสียค่าใช้จ่ายใด ๆ อีกทั้งยังช่วยให้คุณสร้างรูปทรงด้วยการ Drag & Drop Elements เมื่อคุณสร้างรูปทรงเสร็จแล้ว Tool จะสร้าง CSS Code ให้คุณ และคุณสามารถนำพวกมันไปใช้งานในการเขียน Code ของคุณได้
4. The CSS property object-fit
“Object-fit” Property จะช่วยให้คุณระบุหรือกำหนดในเรื่อง การปรับขนาด Content ของ Element ที่ถูกแทนที่ (IMG, Video ฯลฯ) เพื่อให้พอเหมาะกับ Container
Browsers หลักทั้งหมดตอนนี้ มีการรองรับ Property นี้อยู่แล้ว มีค่าที่เป็นไปได้ดังต่อไปนี้: fill, contain, cover, scale-down และ none คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับค่าเหล่านี้ได้ใน MDN Page
ลองดูตัวอย่าง Code ด้านล่าง:
ตัวอย่าง Code ด้านบน จะช่วยให้รูปภาพคงอัตราส่วนไว้ในขณะที่ระบุ Dimension ที่ต้องการ นั่นก็เหมือนกับการตัดภาพเพื่อให้แสดงผลอย่างพอเหมาะ
คุณสามารถดูตัวอย่าง Codepen ที่ด้านล่างนี้:
Iframe by the author from Codepen(External link)
5. The property mix-blend-mode
อีก CSS Property ที่น่าสนใจอีกตัวหนึ่งที่ไม่ค่อยมีใครพูดถึงก็คือ Mix-Blend-Mode และเป็นไปได้ว่ามี Web Developers จำนวนมาก ที่ยังไม่รู้จัก CSS Property ที่น่าทึ่งนี้
Property ใน CSS ที่มีประสิทธิภาพนี้ จะระบุและกำหนดว่า Content ของ Element ควรจะผสมผสานให้กลมกลืนกับ Content และ Background ของ Element หลักได้อย่างไร
พูดง่าย ๆ ก็คือ มันกำหนดในเรื่องการผสมผสานของ Element หนึ่งกับ Element อื่นที่อยู่เบื้องหลัง
ลองดูตัวอย่าง Code ที่ด้านล่างนี้:
คุณสามารถดูตัวอย่าง Codepen ที่ด้านล่างนี้ เพื่อทำความเข้าใจเพิ่มเติม:
Iframe by the author from Codepen(External link)
6. The property background-blend-mode
อีกหนึ่ง Blend Mode Property ใน CSS ที่น่าสนใจ ก็คือ Background-Blend-Mode ซึ่งจะช่วยให้คุณสามารถระบุและผสมผสานให้กลมกลืนกัน ระหว่าง Background Image และ Background Color ของ Element
Property นี้มาพร้อมกับค่าต่าง ๆ เช่น normal, multiply, screen และอื่น ๆ มันจะช่วยให้คุณสามารถกำหนด Blend Modes ต่าง ๆ ได้
ลองดูตัวอย่างด้านล่างนี้ เพื่อทำให้คุณเข้าใจมากขึ้น:
Normal Blend Mode:
ผลลัพธ์:
Image by the author
Overlay Blend Mode:
ผลลัพธ์:
Image by the author
7. The property resize
CSS Property “Resize” จะช่วยให้ User สามารถปรับขนาดของ Element บน Web Page ได้ด้วยการคลิกและลากที่มุมขวาของ Element ผลที่ได้คือ มันจะระบุว่า User สามารถปรับขนาด Element ได้หรือไม่และอย่างไร
Property สุดเจ๋งตัวนี้ มักใช้กับ Element ต่าง ๆ เช่น textarea ซึ่งจะทำให้ User สามารถขยาย Text Area เพื่อป้อนข้อความที่ยาว ๆ ได้อย่างราบรื่น นอกจากนั้นแยังสามารถใช้เพื่อปรับขนาดของ Element ใดก็ได้
สำหรับ Resize Property นี้ มีค่าที่เป็นไปได้ 4 ค่า:
- vertical: User สามารถปรับขนาดของ Element ในแนวตั้งได้
- horizontal: User สามารถปรับขนาดของ Element ในแนวนอนได้
- both: Element มีความสามารถในการปรับขนาดได้ทั้ง 2 วิธี
- none: Element ไม่สามารถถูกปรับขนาดได้
นี่คือตัวอย่าง Code สำหรับ Property นี้:
8. Backface-visibility
สำหรับ “Backface-visibility” Property ใน CSS จะระบุว่า ควรแสดงด้านหลังของ Element หรือไม่เมื่อมันถูกหันไปทาง User
เรามักจะใช้ Property นี้ เมื่อทำ Flip Cards ที่มี Hover Effects และมันมีค่าที่เป็นไปได้ 2 ค่า คือ มองเห็นได้ หรือ ซ่อนอยู่
ลองดูตัวอย่าง Code ด้านล่างนี้:
คุณสามารถดูตัวอย่าง Codepen ด้านล่างเพื่อทำความเข้าใจเพิ่มเติม:
Iframe by the author from Codepen(External link)
9. The smooth-scrolling property
หากคุณต้องการให้มี Scrolling Feature ดูเนียนตาบน Web Page ของคุณ เชื่อว่า Property “Scroll-behavior” ใน CSS จะสามารถทำสิ่งนี้ได้เป็นอย่างดี
สิ่งที่คุณต้องทำคือ ใช้ tag html เป็น Selector สำหรับ Property จากนั้นมันให้ค่าที่เหมาะสมออกมา
นี่คือตัวอย่าง Code:
คุณสามารถคลิกที่ Link Link ใน Codepen ด้านล่าง เพื่อดูว่า สามารถ Scroll ไปมาระหว่าง Sections ต่าง ๆ อย่างเนียนตาได้อย่างไร:
Iframe by the author from Codepen(External link)
10. The caret-color property
CSS อาจถูกใช้ เพื่อเปลี่ยนสีของ Curser ในการป้อนข้อความ คุณสามารถทำได้ด้วย Property “Caret-color”
นี่คือตัวอย่างของ Code:
ผลลัพธ์:
Iframe by the author from Codepen(External link)
ที่มา: https://tapajyoti-bose.medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด