วิธี-mask-รูปเป็นวงกลมด้วย-CSS

CSS วิธีทำ Mask แสดงกรอบรูปเป็นวงกลม

CSS วิธีทำ Mask แสดงกรอบรูปเป็นวงกลม



CSS วิธีทำ Mask แสดงกรอบรูปเป็นวงกลม


แนะนำวิธีทำรูปโปรไฟล์ หรือรูป Avatar บนเว็บไซต์ให้มีกรอบรูปวงกลมคล้าย ๆ การ mask โดยอาศัยความสามารถของ CSS ( Cascading Style Sheets ) ที่สำคัญเขียนโค๊ดแค่บรรทัดเดียว สามารถเรียกใช้งาน class บน img element หรือ div ได้เลย ลองไปดูกันครับว่า มีวิธีเขียนยังไงบ้าง


ส่วนของ CSS

ใช้เพียงคำสั่งเดียวครับ คือ border-radius ตั้งชื่อ class และกำหนดขนาดความมนของขอบรูปเป็นเปอร์เซ็น ลองมาดูตัวอย่างกันครับ เริ่มต้นลองทดสอบ ให้กำหนด border-radius:20%


กำหนด border-radius เท่ากับ 20%

ผลลัพธ์ที่ได้เมื่อเรียกใช้งานใน html แบบนี้

วิธี-mask-รูปเป็นวงกลมด้วย-CSS



กำหนด border-radius เท่ากับ 50%

วิธี-mask-รูปเป็นวงกลมด้วย-CSS


เป็นเทคนิค css ง่าย ๆ และเขียนโค๊ดสั้นมาก ลองเอาไปปรับใช้กับงานพัฒนาเว็บไซต์ดูครับ หวังว่าจะเป็นประโยชน์

กระทู้ใกล้เคียง

การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น... การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น การทำ CSS Transition ทำเว็บไซต์ให้มีลูกเล่น การทำ CSS Transition และการทำ CSS Animation เป็นการเพิ่มลู...
สอน Laravel 5 : ใช้งาน Controller ร่วมกับ Router... สอน Laravel : ใช้งาน Controller ร่วมกับ Router โดยทั่วไปแล้ว Controller คือหัวใจหลักของการทำงานใน PHP MVC Framework เป็นส่วนที่ทำหน้าที่เชื่อมโยง ...
PHP Codeigniter เน้นใช้งาน : ตอน 2 รับส่งค่าระหว่า... PHP Codeigniter เน้นใช้งาน : ตอน 2 รับส่งค่าระหว่าง views และ controllers จากบทความที่แล้วเราได้ทำความเข้าใจเบื้องต้น ตั้งแต่การดาวน์โหลดไฟล์ จนถึง...
PHP Codeigniter เน้นใช้งาน : ตอน 1 ดาวน์โหลดและติด... PHP Codeigniter : ตอน 1 ดาวน์โหลดและติดตั้ง codeinginter PHP Codeigniter เป็น MVC framework ที่ได้รับความนิยมและใช้ในงานพัฒนาเว็บไซต์กันอย่างแพร่หล...