ตัวสร้าง CSS สไตล์ Neubrutalism
ออกแบบการ์ด neo-brutalist ออนไลน์ฟรี ขอบหนา เงาแข็งแบบ offset คู่สีจัดจ้าน พรีวิวสด พร้อมคัดลอก HTML และ CSS block ที่ใช้ได้ทันที ไม่ต้องอัปโหลด
Loading tool...
ตัวสร้าง CSS สไตล์ Neubrutalism คืออะไร?
ตัวสร้าง Neubrutalism ออกแบบการ์ด neo-brutalist ได้โดยตรงในเบราว์เซอร์: ขอบทึบหนา เงาแข็ง offset ไม่เบลอ และคู่สีพาสเตลจัดกับหมึกเข้ม ปรับรูปทรงและสีกับพรีวิวสด แล้วคัดลอก HTML snippet พร้อม CSS block ที่วางในโปรเจกต์ใดก็ได้
ประโยชน์หลัก
- ลุค brutalist แท้จริงโดยไม่ต้องลองค่าเงาเอง
- คู่สีพื้นหลังจัดและหมึกเข้มที่คัดมาให้แล้ว
- พรีวิวสดตรงกับ CSS ที่ export เสมอ
- HTML ธรรมดาหนึ่ง CSS class ไม่มี dependency
- เป็นส่วนตัวและทันที - ทุกอย่างทำงานในเบราว์เซอร์
กรณีการใช้งาน
- •ตกแต่งการ์ด hero และกล่อง callout บน landing page
- •สร้าง section สนุก ๆ สำหรับ portfolio และหน้า event
- •โปรโตไทป์ UI kit และดีไซน์ทดลองสไตล์ brutalist
- •สร้าง CSS เริ่มต้นสำหรับ product card สไตล์ย้อนยุค
วิธีสร้างการ์ดสไตล์ Neubrutalist
- เลือกสี: เลือกสีพื้นหลังจัดจ้าน สีหมึกสำหรับขอบและเงา และสีข้อความ
- ปรับรูปทรง: ตั้งความหนาขอบ ระยะเงาแข็ง และมุมโค้งตามใจชอบ
- ดูพรีวิวสด: การ์ดพรีวิวจะแสดงผลตรงกับ HTML และ CSS ที่ export ทุกประการ
- คัดลอกโค้ด: คัดลอก HTML พร้อม style block หรือดาวน์โหลดไปวางในโปรเจกต์ของคุณ
คุณสมบัติหลัก
- ขอบทึบหนาตั้งแต่ 2px ถึง 8px
- เงาแข็งแบบ offset ไม่เบลอ ตั้งแต่ 4px ถึง 12px
- คู่สีพื้นหลังพาสเตลจัดกับหมึกเข้ม
- มุมโค้งจากเหลี่ยม 0 ถึงนุ่ม 12px
- พรีวิวสดตรงกับ CSS ที่ export เสมอ
- คัดลอก HTML พร้อม style block ที่ครบในตัว
คำถามที่พบบ่อย
neubrutalism ในงานเว็บดีไซน์คืออะไร?
neubrutalism คือเทรนด์ลุคดิบคอนทราสต์สูง: ขอบทึบหนา เงาแข็ง offset ไม่เบลอ สีทึบจัดจ้าน และตัวอักษรใหญ่หนา เป็นการฟื้น brutalism ยุคเว็บทศวรรษ 90 แบบทันสมัย
เงาแข็งใน CSS สร้างอย่างไร?
ใช้ box-shadow ที่ offset x กับ y เท่ากัน blur เป็นศูนย์ และ spread เป็นศูนย์ เช่น box-shadow: 8px 8px 0 0 ด้วยสีหมึก ตัวสร้างจะคำนวณค่าจากระยะที่คุณเลือก
เอาการ์ดที่ได้ไปใช้กับเว็บไหนก็ได้หรือไม่?
ได้ ผลลัพธ์เป็น HTML ธรรมดาบวก CSS class เดียว วางลง static site, React, Vue หรือ block HTML ของ CMS ได้เลยโดยไม่ต้องพึ่ง dependency
คู่สีแบบไหนดู brutalist ที่สุด?
พื้นหลังพาสเตลจัดจ้านคู่กับหมึกเกือบดำ เช่น เหลืองคู่ดำ หรือน้ำเงินคู่กรมท่าเข้ม เก็บข้อความให้คอนทราสต์สูง และใช้สีเดียวกันทั้งขอบกับเงาเพื่อลุคคลาสสิก