Softonic

CSS Kart Oluşturucu

Adım 1 / 2

Kart başlığı

Bu, kartınızın bir önizlemesidir.

Sonraki

Kart; ürün kutucuklarının, blog önizlemelerinin, profillerin ve panel widget’larının arkasındaki kapsayıcıdır. Bu oluşturucu o kapsayıcıyı stillendirir: arka plan ve kenarlık rengini, köşe yarıçapını, iç boşluğu ve yumuşak bir gölgeyi seçin, ardından sonucu sayfada görün. Önizleme, yer tutucu içerik gösterir; bunu kendi başlığınız, metniniz ve eylemlerinizle değiştirin. Çıktı, kullanıma hazır tek bir CSS sınıfıdır.

Kart kapsayıcısı nasıl stillendirilir?

  1. 1

    Renkleri seçin

    Kartın arka plan rengini ve kenarlık rengini belirleyin.

  2. 2

    Şekli ayarlayın

    Düzeninize uygun köşe yarıçapını ve iç boşluğu seçin.

  3. 3

    Gölgeyi ekleyin

    Kartın altındaki yumuşak gölgenin bulanıklığını ve opaklığını ayarlayın.

  4. 4

    Önizleyin ve kopyalayın

    Canlı önizlemeyi inceleyin ve üretilen .card CSS'ini stil sayfanıza kopyalayın.

Üretilen CSS neleri içerir?

Araç, .card adında tek bir sınıf üretir:

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
  • background seçtiğiniz arka plan rengidir
  • border her zaman seçtiğiniz renkte 1 px düz bir kenarlıktır
  • border-radius ve padding seçtiğiniz piksel değerleridir
  • box-shadow, bulanıklık ve opaklık değerlerinizle sabit 4 px aşağı kaydırmayı kullanır

Önizleme bir yer tutucudur

Önizleme, oranları değerlendirebilmeniz için bir başlık ve bir paragraf gösterir. Araç HTML üretmez: sınıfı kendi kapsayıcınıza uygulayın ve içine başlığınızı, metninizi, görselinizi veya eylem düğmelerinizi ekleyin. Kart renkli bir sayfa arka planında duracaksa kenarlık kontrastını orada da kontrol edin, yalnızca önizlemede değil.

Mantıklı sınırlar

Sıfırın altındaki değerler sıfıra sabitlenir ve gölge opaklığı 0 ile 1 arasında kalır. Çok büyük boşluk veya bulanıklık değerleri beklenmedik sonuçlar doğurabilir; bu yüzden denetimleri gerçek bir düzende kullanacağınız aralıklarda tutun.

Kendi işaretlemenizle birleştirme

Sayfanız için en küçük örnek:

<div class="card">
  <h3>Ürün adı</h3>
  <p>Kısa açıklama</p>
</div>

Kapsayıcı stili içindekileri sınırlamaz: yalnızca arka plan, kenarlık, boşluk ve gölgeyi yönetir.

Sık Sorulan Sorular

Hayır. Yalnızca .card CSS sınıfını üretir. İşaretlemeyi kendiniz kurun; örneğin başlığınızı, metninizi ve eylemlerinizi saran bir div veya article.

Üretilen kenarlık her zaman 1 px düzdür. Farklı kalınlık veya stil gerekiyorsa CSS içindeki border satırını düzenleyin.

Sabit 4 px dikey kaydırma, gölgeyi ince ve okunaklı tutar. Yumuşaklığını (bulanıklık) ve gücünü (opaklık) siz kontrol edersiniz.

Hayır. Önizleme metni yalnızca görüntüleme içindir. Kopyalanan CSS hiçbir içerik içermez, yalnızca kapsayıcı stillerini içerir.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

Araç diğer dillerde mevcuttur