บทความ IT เจ๋งๆ
5 CSS Tricks เพื่อช่วยปรับปรุงการออกแบบ Web ให้ดีขึ้น
27-มี.ค.-24
คัมภีร์เทพ IT
CSS (Cascading Style Sheets) เป็นเครื่องมือทรงพลังที่จะช่วยให้ Developers สามารถออกแบบ Web Pages ที่สวยงามได้ ในบทความนี้ เรามาดู 5 CSS Tricks เพื่อช่วยปรับปรุงการออกแบบ Web ของคุณ ซึ่งจะช่วยยกระดับทักษะการออกแบบ Website ให้ดีขึ้น
1. รับค่า HTML Attribute โดยใช้ CSS
CSS attr() Function ช่วยให้ Developers ดึงค่าของ HTML Attributes ภายใน Stylesheets ได้ ในตัวอย่างด้านล่างนี้ จะใช้ attr() Function เพื่อแสดง Text Content ของ ::after Pseudo-Class ของ span HTML Element โดยใช้ data-value Attribute
CSS Property นี้จะช่วยให้ JS เปลี่ยนค่าได้อย่างง่ายดายโดยไม่ต้องจัดการ Text Content ของ HTML Elements โดยตรง
คุณสามารถดูตัวอย่างการใช้งานได้จาก CodePen ด้านล่างนี้
2. Resize โดยใช้ CSS
ใน CSS resize Property จะช่วยให้ Users สามารถปรับความกว้างและความสูงของ Element แบบ Dynamic ด้วยการควบคุมที่ปรับขนาดได้ เช่น textarea HTML Element คุณสามารถเปิดใช้งานการปรับขนาดใน แนวนอน แนวตั้ง หรือทั้ง 2 อย่างได้
คุณสามารถตรวจสอบ CodePen ด้านล่างนี้ เพื่อดูการใช้งานอย่างรวดเร็ว
3. Increment โดยใช้ CSS
CSS counter Feature จะสร้างและแสดงค่าที่เป็นตัวเลขโดยอัตโนมัติ ซึ่งจะช่วยลดการจัดเตรียมของ Developer เพื่อที่จะทำสิ่งนั้น คุณต้องมี 3 CSS Properties ซึ่งประกอบด้วย counter-reset, counter-increase และ counter() Functions
- counter-reset: ใช้เพื่อสร้างตัว Counter ใหม่ หรือ Reset ตัว Counter ปัจจุบัน โดยค่า Default จะถูกกำหนดให้เป็น 0
หากคุณต้องการกำหนดค่าตัวเลขเริ่มต้นสำหรับตัว Counter คุณสามารถทำได้ดังนี้
- counter-increment: ใช้เพื่อเพิ่มค่าตัว Counter ปัจจุบัน โดยค่า Default จะเพิ่มขึ้นทีละ 1
หากคุณต้องการเพิ่มตัว Counter ปัจจุบันตามจำนวนที่ต้องการ คุณสามารถทำได้ดังนี้
- counter(): Fetch ค่าปัจจุบันของตัว Counter
CodePen นี้แสดงวิธีการเพิ่ม h1 elements ลงใน div โดยอัตโนมัติตามที่แสดงด้านล่างนี้ และ CSS จะเพิ่มตัวเลขด้านหน้า h1 Tag แต่ละ Tag โดยอัตโนมัติ ซึ่งมันจะช่วยลดการป้อนข้อมูลด้วยตนเองของ Developer หรือการใช้ JS และนี่ก็เป็น Code ที่ Clean กว่ามาก
คุณสามารถตรวจสอบ CodePen เพื่อดูตัวอย่างได้ ที่ด้านล่างนี้
4. ลบ Background ของรูปภาพโดยใช้ CSS
เพื่อทำสิ่งนี้ เราสามารถใช้ mix-blend-mode CSS Property ได้ เมื่อใช้ Property นี้ จะทำให้เราสามารถกำหนดวิธีที่ Content ของ Element ควรผสมผสานกับ Parent และ Background ได้ ซึ่งในกรณีนี้คือ img Element
จากรูปด้านล่างนี้ คุณจะเห็นได้ว่า มีการใช้ 2 ภาพ ภาพหนึ่งมีสีสัน ส่วนอีกภาพหนึ่งเป็นสีดำ และทั้ง 2 ภาพมี Background สีขาว เราจะทำการลบ Background ของรูปภาพโดยใช้ CSS โดยที่ไม่ต้องใช้ Software แก้ไขรูปภาพใด ๆ
หากต้องการลบ Background สีขาวออกจากรูปภาพที่เป็นสี คุณสามารถใช้ mix-blend-mode CSS Property กับค่า multiply ได้ สีจากทั้ง 2 Layers จะผสมผสานกันโดยการคูณค่าของมัน ซึ่งจะส่งผลให้ เราได้รูปภาพที่มีลักษณะเข้มขึ้นและกลมกลืนมากขึ้น สิ่งนี้มีประโยชน์ในกรณีที่คุณลบ Background สีขาวออกจากภาพที่เป็นสี เนื่องจากส่วนสีขาวจะโปร่งใสโดยแสดง Background ที่อยู่ด้านล่าง แม้ว่าจะทำให้รูปภาพมืดลงเล็กน้อยก็ตาม
หากต้องการลบ Background สีขาวออกจากรูปภาพที่เป็นสีดำ คุณสามารถใช้ mix-blend-mode CSS Property กับค่า color-burn ได้ มันจะใช้ Effect การทำให้มืดลงด้วยการผสมสีของ Element เข้ากับ Background ของมัน วิธีนี้จะช่วยเพิ่มบริเวณที่เข้มขึ้น ซึ่งจะทำให้เกิดเหมือนรอยไหม้หรือเงา คุณสามารถใช้งานได้ลักษณะนี้
หลังจากใช้ CSS ผลลัพธ์สุดท้ายจะเป็นดังนี้
คุณสามารถตรวจสอบ CodePen ที่อยู่ด้านล่างนี้ได้
5. เพิ่มเงาให้กับ PNG เฉพาะที่จำเป็นเท่านั้น
ในการเพิ่มเงาให้กับ Element เรามักจะใช้ box-shadow CSS Property ซึ่ง Property นี้จะทำการเพิ่มเงาไปที่รอบ ๆ ขอบของ Element หากเราเพิ่ม box-shadow Property ให้กับรูปภาพ PNG ที่มี Background โปร่งใส มันจะยังคงแสดง Background รอบ ๆ รูปภาพที่มีลักษณะเป็นสี่เหลี่ยมจัตุรัส
อย่างไรก็ตาม หากเราใช้ filter CSS property กับ drop-shadow() CSS Function แทนการใช้ box-shadow เราจะสามารถเพิ่มเงาให้กับเฉพาะส่วนที่เป็นรูปภาพจริงใน PNG เท่านั้น โดยที่ไม่รวม Background โปร่งใส
และผลลัพธ์สุดท้าย จะเป็นลักษณะนี้
คุณสามารถตรวจสอบ CodePen ด้านล่างนี้ได้
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด