Membina Kad Responsif, Sama Tinggi dengan CSS Moden (Magic of Flexbox & No Media Queries)

Jadual kandungan

Pengenalan

Apakah matlamat kami?

Membina Struktur Menggunakan HTML5 Semantik

Menambah Gaya Menggunakan CSS Moden
- Menetapkan semula CSS
- Merekabentuk Reka Letak Kad dengan Flexbox
- Menggayakan imej Kad
- Menggayakan kandungan Kad
- Menggayakan Butang Kad
- Menambahkan Peralihan Tuding
- Menggunakan Pembolehubah CSS

Kesimpulan

pengenalan

Sebagai pembangun web, kami sering menghadapi keperluan untuk mencipta komponen kad. sama ada untuk pameran produk/projek, profil pengguna atau catatan blog, kad ada di mana-mana sahaja.

Pada masa lalu, mencipta reka letak responsif adalah satu cabaran. Penciptaan reka bentuk ini telah menjadi jauh lebih mudah dan lebih intuitif disebabkan oleh kemunculan teknik CSS moden, khususnya CSS Flexbox.

Flexbox memudahkan proses mencipta reka letak responsif. Kita boleh menyusun, menjajarkan dan ruang item dalam bekas dengan mudah tanpa menggunakan pertanyaan media yang kompleks. Ini bermakna kita boleh membina reka letak yang menyesuaikan dengan cantik kepada saiz dan orientasi skrin yang berbeza tanpa menyatakan titik putus yang tepat.

Apakah matlamat kita?

Matlamatnya adalah untuk mencipta kad responsif dengan ketinggian yang sama tanpa bergantung pada titik putus dengan menggunakan CSS Flexbox. Kami akan memastikan setiap kad mengekalkan ketinggian yang sama tanpa mengira panjang kandungan, menyesuaikan dengan lancar pada saiz skrin yang berbeza.

sifat CSS utama untuk reka letak:

• paparan: lentur
• selaraskan-item
• mewajarkan-kandungan
• flex-grow

Sekarang mari kita terokai keajaiban CSS flexbox dengan membina kad!

Membina Struktur Menggunakan HTML5 Semantik

<main class="card-container">
<!--   First card -->
  <article class="card">
    <img src="https://placehold.co/320x240" width="320" height="240" alt="Replace placeholder image here" class="card-image" loading="lazy">
    <h2 class="card-title">Title one</h2>
    <p class="card-description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.</p>
    <button class="card-button" aria-label="Read more about Title one">Read More</button>
  </article>
  <!--   Second card -->
  <article class="card">
    <img src="https://placehold.co/320x240" width="320" height="240"  alt="Replace placeholder image here" class="card-image" loading="lazy">
    <h2 class="card-title">Title two</h2>
    <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.</p>
    <button class="card-button" aria-label="Read more about Title two">Read More</button>
  </article>
  <!--   Third card -->
  <article class="card">
    <img src="https://placehold.co/320x240" width="320" height="240"  alt="Replace placeholder image here" class="card-image" loading="lazy">
    <h2 class="card-title">Title three</h2>
    <p class="card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!</p>
    <button class="card-button" aria-label="Read more about Title three">Read More</button>
  </article>
</main>

Menambah Gaya Menggunakan CSS Moden

Menetapkan semula CSS

/* Basic CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Badan

/* Ensure that our layout is centred horizontally and vertically on the page */
body {
    display: flex; /* using CSS flexbox to vertically and horizontally centre all cards */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

Merekabentuk Reka Letak Kad dengan Flexbox

/* Cards */
.card-container {
    display: flex; /* using CSS flexbox to display each card at the centre */
    justify-content: center;
    align-items: stretch; /* use stretch for equal height of all cards */
    gap: 1.5625rem; /* add space between each card */
    flex-wrap: wrap;
    padding: 1rem; 
    max-width: 100%; /* Prevent container from exceeding viewport width */
}

.card {
    display: flex;
    flex-direction: column;
    width: 20rem;
    background-color: #fff;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
    text-align: center;
    text-wrap: balance; /* ensures content is evenly distributed across multiple lines for better readability. */
    overflow: hidden;
}

Menggayakan kandungan dalaman kad

Menggayakan imej Kad

.card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 0.85rem;
}

Menggayakan kandungan Kad

.card-title {
    font-size: 1.25rem;
    padding: 1rem;
    color: #3ca69f;
}

.card-description {
    flex-grow: 1; /* allow the content to take available space, thus maintaining equal height no matter the length of the content */
    padding: 0 1rem 1rem;
    font-size: 0.975rem;
    line-height: 1.5;
}

Menggayakan Butang Kad

/* Cards button */
.card-button {
    align-self: center; /* placing the button at the center */
    margin: 1rem 0 3rem;
    padding: 0.625rem 1rem;
    font-size: 1rem;
    color: #ffffff;
    background-color: #3ca69f;
    border: none;
    border-radius: 0.3125rem;
    cursor: pointer;
}

Menambahkan Peralihan Tuding

.card {
    transition: 0.5s ease all;
}

.card-button {
    transition: 0.5s ease all;
}

/* cards hover effect */
.card:hover {
    background-color: #276662;
    color: #ffffff;
}

.card:hover > .card-button {
    background-color: #ffffff;
    color: #276662;
    font-weight: 700;
}

.card:hover > .card-title {
    color: #ffffff;
}

Menggunakan Pembolehubah CSS

/* Declare variables */
:root {
    --primary-color: #3ca69f;
    --secondary-color: #276662;
    --text-color: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --border-radius: 0.3125rem;
    --spacing: 1rem;
    --transition-duration: 0.5s;
}

Kesimpulan

Menyatukan semuanya

KEATAS

Atas ialah kandungan terperinci Membina Kad Responsif, Sama Tinggi dengan CSS Moden (Magic of Flexbox & No Media Queries). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!