home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

วิธีออกแบบการ์ด UI ที่เรียบง่ายและสวยงามสำหรับเว็บไซต์ของคุณ

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

การ์ด UI เป็นองค์ประกอบ UI ที่ทำหน้าที่เป็นอาหารเรียกน้ำย่อยบนเว็บไซต์ การ์ด UI ทั่วไปประกอบด้วยข้อความ ภาพถ่าย ไอคอน และองค์ประกอบแบบโต้ตอบหนึ่งหรือหลายองค์ประกอบ (เช่น ปุ่มหรือลิงก์)

การ์ด UI จะเรียบง่ายหรือซับซ้อนก็ได้ตามที่คุณต้องการ

วันนี้ เรากำลังออกแบบ UI Card แบบเรียบง่าย การ์ดใบนี้:

วิธีออกแบบการ์ด UI ที่เรียบง่ายและสวยงามสำหรับเว็บไซต์ของคุณ

การ์ด UI นี้มีภาพพื้นหลังของแนวนอน องค์ประกอบข้อความสองรายการ (ชื่อและคำอธิบาย) และอินเทอร์เฟซที่คลิกได้ขนาดใหญ่หนึ่งรายการ:การ์ดทั้งหมดเป็นลิงก์

คุณสามารถพบกับ ฟรี . มากมาย ภาพทิวทัศน์ที่สวยงามที่ Unsplash.com

ขั้นตอนที่ 1:HTML

เพิ่ม HTML นี้ในเอกสารของคุณ (ภายใน <body> องค์ประกอบ):

<a class="card-link" href="#">
  <div class="card">
    <div class="card-overlay"></div>
    <img class="card-thumbnail" src="/images/the-north-sea-denmark.png" alt="Landscape photography of the Northern Sea of Denmark" />
    <div class="card-text-container">
      <div class="card-text-wrapper">
        <h3 class="card-title">The North Sea of Denmark</h3>
        <p class="card-description">
          Explore the beautiful & dynamic North Sea of Denmark — where every day
          is a new experience.
        </p>
      </div>
    </div>
  </div>
</a>

ส่วนสำคัญของมาร์กอัป HTML ด้านบนคือเรากำลังรวมการ์ดทั้งหมดไว้ในองค์ประกอบสมอ เราทำสิ่งนี้สำหรับการ์ดเฉพาะนี้เนื่องจากเราต้องการให้อินเทอร์เฟซผู้ใช้ทั้งหมดเป็นลิงก์ขนาดใหญ่ที่คลิกได้

หากต้องการสร้างลิงก์ Anchor ไปยังโพสต์บล็อกที่ถูกต้อง บทความ (เนื้อหาใดก็ตามที่คุณต้องการลิงก์ไป) เพียงแทนที่แอตทริบิวต์ตัวยึดตำแหน่ง (href="#" ) ด้วยกระสุนจริง เช่น href="/northern-sea-of-denmark" .

ขั้นตอนที่ 2:CSS

ขั้นแรก ฉันจะจัดเตรียม CSS ที่ใช้สำหรับตัวอย่างการ์ด UI จากนั้นฉันจะอธิบายส่วนที่สำคัญที่สุดของโค้ดด้านล่าง:

.card {
  position: relative;
  height: 350px;
  max-width: 400px;
}

.card-thumbnail {
  height: 100%;
  max-width: 100%;
  display: block;
  object-fit: cover;
}

.card-text-container {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 10%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-text-wrapper {
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 300px;
  color: white;
}
.card-title {
  font-size: 1.45rem;
  margin-bottom: 0;
}
.card-description {
  font-size: 1.15rem;
  line-height: 1.4;
  margin-top: 0.5rem;
}

.card-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  z-index: 1;
}

วิธีการทำงานของ CSS:

  • .card :เพื่อให้การ์ด UI ตอบสนอง จะได้รับความกว้างสูงสุด 400px ทำให้ความกว้างของการ์ดเป็นไดนามิก มันจะไม่ขยายขนาดให้กว้างกว่า 400px อย่างไรก็ตาม มันจะลดขนาดลงโดยอัตโนมัติ (แคบลง) หากความกว้างของหน้าจอน้อยกว่า 400px ความสูงของการ์ด ได้รับการแก้ไขแล้ว (height: 350px ) และจะไม่เปลี่ยนแปลงโดยไม่คำนึงถึงขนาดหน้าจอ
  • .card-thumbnail :เพื่อหลีกเลี่ยงไม่ให้ภาพพื้นหลังสูญเสียอัตราส่วนกว้างยาว (ยืด) เมื่ออัตราส่วนกว้างยาวของการ์ดเปลี่ยนแปลง เราใช้ object-fit: cover . ลองลบออกแล้วดูว่าเกิดอะไรขึ้น (ไม่ดี)
  • .card-text-container :เพื่อให้แน่ใจว่าตำแหน่งและระยะห่างขององค์ประกอบข้อความ (ช่องว่างสีขาว) ยังคงสอดคล้องกัน ไม่ว่าจะดูการ์ด UI บนอุปกรณ์ใด เราใช้ bottom: 10% . เนื่องจากความสูงของการ์ดตั้งค่าไว้ที่ 350 พิกเซล ทำให้ง่ายต่อการรักษาระยะห่างขององค์ประกอบข้อความจากด้านล่างสุดของการ์ดให้ใกล้เคียงกัน 100% z-index: 1; ทำให้องค์ประกอบข้อความอยู่ด้านบนของโอเวอร์เลย์
  • .card-text-wrapper :คลาสนี้ควบคุมความกว้างสูงสุดขององค์ประกอบข้อความทั้งสอง (ชื่อและคำอธิบาย) เนื่องจากเราไม่ต้องการให้เกินความกว้างของการ์ด เราจึงตั้งค่าเป็น 300px ซึ่งน้อยกว่าความกว้างสูงสุดของการ์ด 25% (400px ). นอกจากนี้เรายังให้ช่องว่างด้านซ้ายและขวาเล็กน้อย (1rem ) ดังนั้นจึงมีช่องว่างเล็กน้อยระหว่างองค์ประกอบข้อความและเส้นขอบของหน้าจอ (สำคัญสำหรับอุปกรณ์ขนาดเล็ก)
  • .card-overlay :เนื่องจากข้อความสีขาวบนพื้นหลังสีอ่อนใช้ไม่ได้ เราจึงต้องการคอนทราสต์สีเข้ม อย่างไรก็ตาม คุณไม่ต้องการให้ภาพทั้งภาพมืดเกินไป (แล้วประเด็นคืออะไร) ดังนั้นเราจึงใช้ linear-gradient เพื่อสร้างภาพซ้อนทับจากสว่างไปมืด โดยมีความมืดเล็กน้อยในครึ่งบนของภาพ (โดยที่ไม่มีข้อความ) แต่มีความมืดเพียงพอที่ครึ่งล่างเพื่อทำให้ข้อความปรากฏขึ้น

เคล็ดลับและแนวคิด

ในการ์ด UI แบบนี้ ซึ่งการถ่ายภาพเป็นส่วนสำคัญของเรื่องราว ไม่ควรทำให้การ์ดแน่นจนเกินไป (เช่น พิจารณาขนาดของข้อความของคุณ) นี่คือความคิดของฉันในขณะที่ฉันจัดรูปแบบด้วย CSS คุณควรพิจารณาบริบทเฉพาะของการ์ดที่คุณกำลังออกแบบอยู่เสมอ

ใช้สไตล์จากบทช่วยสอนนี้เป็นแนวทาง แต่ไม่ใช่กฎเกณฑ์ที่เข้มงวดในการออกแบบการ์ด UI ด้านล่างนี้คือแนวทางสากล/วัตถุประสงค์บางประการเกี่ยวกับการออกแบบการ์ด UI:

  • การเว้นวรรคเป็นสิ่งสำคัญ: การขาดพื้นที่สีขาวทำให้การออกแบบของคุณดูแออัดและอึดอัด UI ของคุณต้อง หายใจ เช่นเดียวกับที่คุณทำ ใช้การเว้นวรรค (padding, margins, line height) ให้มากที่สุดเท่าที่จะทำได้ (โดยไม่ละเมิดกฎความใกล้เคียง)
  • ตัวพิมพ์: ไม่ว่าคุณจะจัดรูปแบบองค์ประกอบข้อความอย่างไร (การเลือกแบบอักษร ขนาดแบบอักษร ความสูงของบรรทัด ฯลฯ) ตรวจสอบให้แน่ใจว่าข้อความนั้นอ่านง่ายบนขนาดหน้าจอใดก็ได้ แทนที่จะเพิ่มขนาดแบบอักษร (และใช้พื้นที่มากขึ้น) ให้ลองเพิ่มความคมชัดของสีระหว่างข้อความและพื้นหลัง เช่นเดียวกับที่เราทำกับ .card-overlay คลาส.
  • อินเทอร์เฟซที่คลิกได้ง่าย: หากองค์ประกอบบนการ์ดของคุณควรจะถูกคลิก ให้ทำให้มันใหญ่พอที่จะให้ทุกคนสามารถคลิกหรือกดด้วยเมาส์หรือนิ้วหัวแม่มือได้อย่างง่ายดาย

นอกเหนือจากนั้นไม่มีกฎของการออกแบบ UI Card มีเพียงบริบทเท่านั้น