Softonic

ตัวสร้าง CSS การ์ด

ขั้นตอน 1 / 2

ชื่อการ์ด

นี่คือตัวอย่างการ์ดของคุณ

ถัดไป

การ์ดคือคอนเทนเนอร์ที่อยู่เบื้องหลังไทล์สินค้า ตัวอย่างบทความ โปรไฟล์ และวิดเจ็ตแดชบอร์ด ตัวสร้างนี้จัดสไตล์ให้คอนเทนเนอร์นั้น: เลือกสีพื้นหลังและสีเส้นขอบ รัศมีมุม ระยะขอบด้านใน และเงานุ่ม แล้วดูผลลัพธ์ได้ทันทีบนหน้าเว็บ ตัวอย่างแสดงเนื้อหาชั่วคราว ให้แทนที่ด้วยหัวข้อ ข้อความ และการทำงานของคุณเอง ผลลัพธ์คือคลาส CSS เดียวที่พร้อมใช้งาน

วิธีจัดสไตล์คอนเทนเนอร์การ์ด

  1. 1

    เลือกสี

    กำหนดสีพื้นหลังและสีเส้นขอบของการ์ด

  2. 2

    กำหนดรูปทรง

    เลือกรัศมีมุมและระยะขอบด้านในที่เข้ากับเลย์เอาต์ของคุณ

  3. 3

    เพิ่มเงา

    ปรับความฟุ้งและความทึบของเงานุ่มใต้การ์ด

  4. 4

    ดูตัวอย่างและคัดลอก

    ตรวจสอบตัวอย่างแบบเรียลไทม์ แล้วคัดลอก CSS ของคลาส .card ที่สร้างไว้ไปยังสไตล์ชีตของคุณ

CSS ที่สร้างมีอะไรบ้าง

เครื่องมือสร้างคลาสเดียวชื่อ .card:

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
  • background คือสีที่คุณเลือก
  • border เป็นเส้นทึบ 1 px ในสีที่เลือกเสมอ
  • border-radius และ padding คือค่าที่คุณเลือกในหน่วย px
  • box-shadow ใช้การเลื่อนลงคงที่ 4 px ตามค่าความฟุ้งและความทึบที่คุณตั้ง

ตัวอย่างคือเนื้อหาชั่วคราว

ตัวอย่างแสดงหัวข้อและย่อหน้าเพื่อให้คุณประเมินสัดส่วนได้ เครื่องมือไม่ได้สร้าง HTML: ให้นำคลาสไปใช้กับคอนเทนเนอร์ของคุณเอง แล้วใส่หัวข้อ ข้อความ รูปภาพ หรือปุ่มการทำงานลงไป หากการ์ดจะวางบนพื้นหลังสีของหน้าเว็บ ให้ตรวจสอบความต่างของเส้นขอบที่ตำแหน่งนั้น ไม่ใช่เพียงในตัวอย่าง

ขีดจำกัดที่สมเหตุสมผล

ค่าที่ต่ำกว่าศูนย์จะถูกจำกัดไว้ที่ศูนย์ และความทึบของเงานั้นอยู่ระหว่าง 0 ถึง 1 ค่าระยะขอบหรือความฟุ้งที่มากเกินไปอาจให้ผลลัพธ์ที่ไม่คาดคิด จึงควรรักษาค่าควบคุมให้อยู่ในช่วงที่คุณใช้ในเลย์เอาต์จริง

นำไปรวมกับมาร์กอัปของคุณ

ตัวอย่างอย่างง่ายสำหรับหน้าเว็บของคุณ:

<div class="card">
  <h3>ชื่อผลิตภัณฑ์</h3>
  <p>คำอธิบายสั้น ๆ</p>
</div>

สไตล์ของคอนเทนเนอร์ไม่ได้จำกัดสิ่งที่อยู่ข้างใน: จัดการเพียงพื้นหลัง เส้นขอบ ระยะห่าง และเงาเท่านั้น

คำถามที่พบบ่อย

ไม่ เครื่องมือส่งออกเฉพาะคลาส CSS .card ให้นำมาร์กอัปมาสร้างเอง เช่น div หรือ article ที่ครอบหัวข้อ ข้อความ และการทำงานของคุณ

เส้นขอบที่สร้างเป็นเส้นทึบ 1 px เสมอ หากต้องการความหนาหรือรูปแบบอื่น ให้แก้บรรทัด border ใน CSS

การเลื่อนแนวตั้งคงที่ 4 px ทำให้เงาดูนุ่มและอ่านง่าย คุณควบคุมความนุ่ม (ความฟุ้ง) และความเข้ม (ความทึบ) ได้เอง

ไม่ ข้อความในตัวอย่างใช้สำหรับแสดงผลเท่านั้น CSS ที่คัดลอกไม่มีเนื้อหา มีเพียงสไตล์ของคอนเทนเนอร์

เครื่องมือที่เกี่ยวข้อง

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตัวตรวจสอบความถูกต้องของ JSON

ตรวจสอบไวยากรณ์ JSON และตรวจจับเครื่องหมายจุลภาคต่อท้าย เครื่องหมายอัญประกาศที่ผิด คีย์ซ้ำ และโครงสร้างที่ผิดรูปแบบ พร้อมระบุตำแหน่งข้อผิดพลาดอย่างแม่นยำ

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

เครื่องมือนี้มีให้บริการในภาษาอื่น