Kad CSS Moden
Kini, sangat penting untuk membuat kad di laman web untuk memaparkan pelbagai data di laman web. Sebagai contoh, pada halaman utama laman web TutorialsPoint, anda akan menemui kursus berbeza yang dibentangkan dalam format kad, dan apabila anda mengklik pada kad, ia akan mengubah hala anda ke halaman khusus untuk kursus tersebut.
Selain itu, jika anda melawat mana-mana kedai e-dagang seperti Amazon atau Flipkart, mereka memaparkan produk dalam format kad. Faedah utama mencipta kad ialah kita boleh memaparkan maklumat ringkas tentang produk pada imej dan memberikan maklumat penuh pada halaman produk.
Dalam tutorial ini, kita akan belajar membuat kad yang berbeza menggunakan HTML dan CSS sahaja.
Contoh 1 (Kad CSS Asas)
Dalam contoh di bawah, kami mencipta elemen div 'kad' yang mengandungi imej tunggal dan elemen div 'kad-kandungan' Elemen div 'kad-kandungan' mengandungi maklumat teks.
Dalam CSS, kami menetapkan dimensi tetap untuk elemen kad Selain itu, kami telah memberikan gaya seperti warna latar belakang, jejari jidar dan jidar, dsb. Selain itu, kami menggunakan kesan bayangan kotak pada kad apabila pengguna menuding ke atas. kad.
Selain itu, kami menetapkan dimensi untuk imej dan menetapkan jejari sempadan untuk sudut atas Selain itu, kami menetapkan saiz fon kandungan teks Dalam output, pengguna boleh memerhati kad yang terhasil
<html>
<head>
<style>
.card {
display: flex;
flex-direction: column;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease-in-out;
width: 18rem;
background-color: #fff;
}
.card:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);}
.card>img {
border-radius: 5px 5px 0 0;
height: 150px;
width: 100%;
object-fit: contain;
}
.card-content { padding: 20px;}
.card h3 { font-size: 1.4rem; margin-top: 0;}
.card p { font-size: 1rem; margin-bottom: 10px;
}
.card a {
padding: 10px 20px;
background-color: #222;
border-radius: 10px;
color: white;
text-align: center;
display: inline-block;
text-decoration: none;
transition: background-color 0.4s ease-in-out;
}
.card a:hover { background-color: #4b4a4a;}
</style>
</head>
<body>
<h2 id="Creating-the-i-basic-cards-i-using-the-CSS"> Creating the <i> basic cards </i> using the CSS </h2>
<div class = "card">
<img src = "https://www.tutorialspoint.com/static/images/logo.png?v2" alt = "Logo">
<div class = "card-content">
<h3 id="Python"> Python </h3>
<p> Python course by Shubham Vora </p>
<a href = "#"> Join now </a>
</div>
</div>
</body>
</html>
ialah:
Contoh 2Kami telah mencipta kad yang serupa dengan contoh pertama dalam contoh di bawah. Di sini, kami menetapkan imej latar belakang untuk elemen div "imej kad". Pada masa yang sama, kami menetapkan gambar dengan mendapatkan gambar rawak dari laman web "Picsum". Dalam kad ini, kami belum menambah teg utama "Sertai Sekarang" seperti yang kami lakukan dalam contoh pertama.
<html>
<head>
<style>
.card {
display: flex;
flex-direction: column;
width: 20rem;
background-color: white;
border-radius: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.card-image {
height: 200px;
background-image: url("https://picsum.photos/300/200");
background-size: cover;
border-radius: 10px 10px 0 0;
}
.card-content { padding: 20px;}
.card-title {
font-size: 1.5rem;
font-weight: bold;
margin: 0 0 10px 0;
}
.card-text { font-size: 1rem; margin: 0; }
</style>
</head>
<body>
<h2 id="Creating-the-i-basic-cards-i-using-the-CSS"> Creating the <i> basic cards </i> using the CSS. </h2>
<div class = "card">
<div class = "card-image"> </div>
<div class = "card-content">
<h2 id="Random-Image"> Random Image</h2>
<p class = "card-text"> This is an random image description. </p>
</div>
</div>
</body>
</html>
Dalam contoh di bawah, kami telah menambahkan kesan tuding pada kad untuk memaparkan maklumat tambahan.
Di sini, kami mencipta bekas kad terlebih dahulu untuk mencipta kad biasa dan menggayakannya menggunakan CSS dengan 'kedudukan: relatif.' Kami menambahkan elemen div 'kad-pertama' dan 'kad-kedua' di dalam bekas kad '. elemen div kad-pertama' mengandungi maklumat pada kad dan elemen div 'kad-kedua' mengandungi maklumat untuk ditunjukkan apabila pengguna menuding di atas kad.
Selain itu, kami menetapkan dimensi untuk elemen div 'card-first' CSS Selain itu, kami menetapkan dimensi untuk elemen div 'card-second' dalam CSS dan menggunakan sifat CSS 'transform: translate(100%)' untuk disembunyikan. bahagian kedua. Apabila pengguna menuding pada elemen kad, kami menggunakan sifat CSS 'transform: translateX(-100%)' untuk menunjukkan bahagian kedua kad.
<html>
<head>
<style>
.card {
position: relative;
width: 300px;
height: 200px;
background-color: rgb(64, 64, 247);
color: white;
border-radius: 10px;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.card-first {
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
font-size: 1.7rem;
transition: transform 0.5s ease-in-out;
}
.card-second {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
transform: translateX(100%);
transition: transform 0.5s ease-in-out;
}
.card:hover .card-first { transform: translateX(-100%);}
.card:hover .card-second { transform: translateX(0%); }
</style>
</head>
<body>
<h2 id="Creating-the-i-hover-effect-on-the-card-i-to-show-additional-information"> Creating the <i> hover effect on the card </i> to show additional information. </h2>
<div class = "card">
<div class = "card-first">
<h3 id="Samsung-s"> Samsung s22 </h3>
<p> 1,01,000 INR </p>
</div>
<div class = "card-second">
<p> 6.4 inch display </p>
<p> 8 GB RAM </p>
<p> 128 GB Storage </p>
<p> 64 MP Camera </p>
</div>
</div>
</body>
</html>
Dalam contoh di bawah, kami telah mencipta elemen div bernama 'ibu bapa'. Selepas itu, kami menambah berbilang elemen kad yang mengandungi imej dan penerangan kad.
Dalam CSS, kami menggunakan fungsi clamp() untuk menetapkan lebar kad. Fungsi clamp() menerima tiga parameter. Yang pertama ialah nilai minimum, yang kedua ialah nilai peratusan, dan yang ketiga ialah nilai maksimum. Dalam contoh kami, jika 20% daripada saiz skrin adalah antara 300 dan 500 piksel, lebar kad ialah 20%. Jika tidak, ia akan menjadi 300 piksel atau 500 piksel.
Selain itu, kami menetapkan bekas "ibu bapa" kepada flexbox untuk memaparkan semua kad dengan betul.
<html>
<head>
<style>
.parent {
padding: 30px 5%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
position: relative;
margin: 20px;
width: clamp(230px, 20%, 500px);
height: 250px;
background-color: green;
color: white;
border-radius: 10px;
transition: all 0.3s ease;
}
.card img {
width: 100%;
height: 150px;
border-radius: 10px 10px 0 0;
object-fit: cover;
}
.card-text {
padding: 20px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
transition: all 0.3s ease;
}
.card-text h3 { font-size: 24px; margin-bottom: 10px;}
.card-text p { font-size: 16px; margin-bottom: 0;}
</style>
</head>
<body>
<h3 id="Creating-the-i-card-with-clamp-function-i-to-manage-card-dimensions-according-to-the-screen-dimensions"> Creating the <i> card with clamp() function </i> to manage card dimensions according to the screen dimensions </h3>
<div class = "parent">
<div class = "card">
<img src = "https://picsum.photos/300/200" alt = "Random image">
<div class = "card-text">
<h2 id="Card"> Card 1 </h2>
<p> This is a card description. </p>
</div>
</div>
<div class = "card">
<img src = "https://picsum.photos/300/200" alt = "Random image">
<div class = "card-text">
<h2 id="Card"> Card 2 </h2>
<p> This is a card description. </p>
</div>
</div>
</div>
</body>
</html>
Atas ialah kandungan terperinci Kad CSS Moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1359
52
Menambah bayang -bayang kotak ke blok dan elemen WordPress
Mar 09, 2025 pm 12:53 PM
CSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
CSS Scrollbars Custom Custom: Pameran
Mar 10, 2025 am 11:37 AM
Dalam artikel ini kita akan menyelam ke dunia scrollbars. Saya tahu, ia tidak terdengar terlalu glamor, tetapi percayalah, halaman yang direka dengan baik
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
Mari kita gunakan (x, x, x, x) untuk bercakap mengenai kekhususan
Mar 24, 2025 am 10:37 AM
Saya hanya berbual dengan Eric Meyer pada hari yang lain dan saya teringat cerita Eric Meyer dari tahun -tahun pembentukan saya. Saya menulis catatan blog mengenai kekhususan CSS, dan
