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 ที่คัดลอกไม่มีเนื้อหา มีเพียงสไตล์ของคอนเทนเนอร์

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

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

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

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

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

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

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

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

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

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

เครื่องมือตรวจสอบหมายเลขโทรศัพท์

ตรวจสอบโครงสร้างหมายเลขตามประเทศ พร้อมดูภูมิภาค ประเภท และรูปแบบ E.164 ระหว่างประเทศ ในประเทศ และ RFC 3966

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