เครื่องมือสร้างรูปร่าง CSS Blob อินทรีย์
ออกแบบรัศมีเส้นขอบ CSS ด้วยสายตา: แถบเลื่อนมุมอิสระสี่ตัวในหน่วย px หรือเปอร์เซ็นต์ ทางลัดสำหรับลิงก์ทุกมุมสำหรับแวดวงและเม็ดยาทันที รวมถึงโหมด Blob แบบออร์แกนิกที่มีรูปร่างแบบสุ่ม
ผลลัพธ์
หน้านี้เปิดตัวสร้างรัศมีเส้นขอบโดยตรงในโหมดหยดโดยโหลดรูปร่างออร์แกนิกแล้ว: ไม่มีมุมสี่เหลี่ยม ไม่มีวงกลมที่สมบูรณ์แบบ มีเพียงโครงร่างที่ไม่ปกติแบบนุ่มนวลที่สร้างจาก CSS เพียงอย่างเดียว กด Randomize เมื่อใดก็ได้เพื่อรูปแบบใหม่
เคล็ดลับเบื้องหลังทุก CSS Blob คือไวยากรณ์เครื่องหมายทับแปดค่า: border-radius ยอมรับสองชุดสี่เปอร์เซ็นต์โดยคั่นด้วยเครื่องหมายทับ ชุดแรกโค้งรัศมีแนวนอนและชุดที่สองเป็นรัศมีแนวตั้ง ความไม่ตรงกันของทั้งสองชุดคือสิ่งที่ทำให้ความสมมาตรของสี่เหลี่ยมมุมมนธรรมดาแตกออกเป็นโครงร่างออร์แกนิก
Blobs เช่นนี้เติมเต็มพื้นที่ว่างด้านหลังภาพฮีโร่ อวตาร และภาพประกอบบนแลนดิ้งเพจสมัยใหม่จำนวนนับไม่ถ้วน เนื่องจากไม่จำเป็นต้องมีไลบรารีหรือการส่งออก SVG เนื่องจากเป็น CSS สี่บรรทัด คัดลอกรูปร่างปัจจุบัน หรือสุ่มไปเรื่อยๆ จนกว่าจะรู้สึกว่าเหมาะกับเค้าโครงของคุณ