- Katılım
- 19 Ocak 2024
- Mesajlar
- 160
- Tepkime puanı
- 11
- Puanları
- 18
- Ödüller
- 6
CSS ile Kart Tasarımları: Modern ve Etkileyici Görünümler
Kart tasarımları, modern web sitelerinde bilgiyi düzenli ve estetik bir şekilde sunmanın popüler bir yöntemidir. CSS kullanarak, basit kartlardan etkileşimli ve animasyonlu kartlara kadar birçok farklı tasarım oluşturabilirsiniz. İşte örnekler ve açıklamalarla CSS kart tasarımları.
Temel Kart Tasarımı
Basit ve düzenli bir kart tasarımı için:
CSS:
.card {
width: 300px;
padding: 20px;
margin: 20px auto;
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
font-family: Arial, sans-serif;
}
.card h2 {
margin: 10px 0;
color: #333;
}
.card p {
color: #555;
font-size: 14px;
}HTML Yapısı:
HTML:
<div class="card">
<h2>Kart Başlığı</h2>
<p>Bu, basit bir kart tasarımıdır. Kartlarda kısa açıklamalar sunabilirsiniz.</p>
</div>Hover ile Etkileşimli Kart Tasarımı
Kartların üzerine gelindiğinde efekt uygulamak için:
CSS:
.card-hover {
width: 300px;
padding: 20px;
margin: 20px auto;
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.card-hover:hover {
transform: scale(1.05);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}HTML Yapısı:
HTML:
<div class="card-hover">
<h2>Etkileşimli Kart</h2>
<p>Kart üzerine gelindiğinde büyüyen ve gölge efekti veren bir tasarım.</p>
</div>Resimli Kart Tasarımı
Bir kartın üst kısmına resim eklemek için:
CSS:
.card-image {
width: 300px;
margin: 20px auto;
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card-image img {
width: 100%;
height: auto;
}
.card-image .content {
padding: 15px;
text-align: center;
}HTML Yapısı:
HTML:
<div class="card-image">
<img src="https://via.placeholder.com/300x200" alt="Resim">
<div class="content">
<h2>Resimli Kart</h2>
<p>Bu kart, üst kısmında resim bulunan bir tasarımdır.</p>
</div>
</div>Animasyonlu Kart Tasarımı
Kartların üzerine gelindiğinde dönen veya animasyon yapan bir tasarım:
CSS:
.card-animated {
width: 300px;
height: 200px;
margin: 20px auto;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 10px;
transition: transform 0.6s;
transform-style: preserve-3d;
position: relative;
}
.card-animated:hover {
transform: rotateY(180deg);
}
.card-animated .front, .card-animated .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.card-animated .back {
background-color: #f44336;
transform: rotateY(180deg);
}HTML Yapısı:
HTML:
<div class="card-animated">
<div class="front">Ön Yüz</div>
<div class="back">Arka Yüz</div>
</div>Grid ile Kart Yerleşimi
Birden fazla kartı bir grid düzeninde düzenlemek için:
CSS:
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
}HTML Yapısı:
HTML:
<div class="card-grid">
<div class="card">Kart 1</div>
<div class="card">Kart 2</div>
<div class="card">Kart 3</div>
</div>Sonuç
Kart tasarımları, web sitelerinde bilgiyi şık ve düzenli bir şekilde sunmak için idealdir. Resimler, hover efektleri ve animasyonlarla kartlarınızı kullanıcılar için daha ilgi çekici hale getirebilirsiniz. Tasarımlarınızı CSS Grid veya Flexbox kullanarak düzenli bir şekilde yerleştirebilirsiniz.
