Softonic

CSS Kart Oluşturucu

Adım 1 / 2 CSS kart oluşturucu

Kart içeriği

Kartınızın içeriğini girin, ardından görünümünü ayarlayın.

Kart içeriği

https:// veya http:// ile başlayan tam bir URL kullanın.

Kart stili

İleri: önizleme ve kod

Bir ürün, makale veya pano için boş bir stil dosyasından başlamadan kart oluşturun. Başlık ve metin girin, isterseniz bağlantı ekleyin; renkleri, kenarlığı, köşeleri, iç boşluğu, gölgeyi ve üzerine gelme efektini ayarlayın. Canlı önizleme, anlamsal HTML ve oluşturulan kart sınıfına uygulanan CSS olarak dışa aktarabileceğiniz kartın kendisini gösterir.

CSS kartı nasıl oluşturulur?

  1. 1

    Kart içeriğini yazın

    Başlık ve metin girin. Bağlantı eklemek için bağlantı metnini ve tam bir http veya https URL'sini girin. Bağlantı istemiyorsanız iki isteğe bağlı alanı da boş bırakın.

  2. 2

    Kartı biçimlendirin

    Arka plan, metin ve kenarlık renklerini; kenarlık kalınlığını, köşe yuvarlaklığını, iç boşluğu, gölge bulanıklığını ve opaklığını seçin. Gerekirse üzerine gelince yükselme miktarını ayarlayın.

  3. 3

    Önizlemeyi inceleyin

    Masaüstü ve mobil genişlikleri karşılaştırın. Görüntülenen metin-arka plan kontrast oranını kontrol edin ve bağlantıyı klavyeyle deneyin.

  4. 4

    Kodu alın

    HTML ve CSS kodunu kopyalayın veya indirin, ardından ikisini de projenize ekleyin. CSS, oluşturulan kart sınıfını hedefler.

Ne elde edersiniz?

Oluşturucu bir HTML kartı ve ayrı bir .css-card-generator-card stil dosyası sağlar. HTML, başlığınızı ve paragrafınızı; bağlantı eklerseniz bir bağlantı öğesini içerir. CSS arka planı, metni, kenarlığı, köşe yuvarlaklığını, iç boşluğu, gölgeyi ve isteğe bağlı üzerine gelme hareketini kapsar. Bağlantı için görünür bir klavye odak stili sunar ve azaltılmış hareket tercih eden ziyaretçiler için hareketi azaltır. İki parçayı da kopyalayın veya indirin: HTML tek başına seçtiğiniz tasarımı taşımaz.

Önizleme, bu HTML ve CSS kodunu masaüstü ve mobil genişlikte gösterir. Çevreleyen stiller ve kullanılabilir alan farklı olabileceği için kartı son sayfanızda da test edin.

Örnek

Bir ürün kartı oluşturduğunuzu düşünün. Başlık olarak Doğa yürüyüşü sırt çantası, metin olarak Günlük yürüyüşler için kompakt, 20 litrelik bir çanta. girin. İsteğe bağlı bağlantıya Ayrıntıları gör ve https://example.com/backpack yazın. Beyaz arka plan (#ffffff), koyu metin (#1f2937), açık renkli kenarlık (#e5e7eb), 12 px köşe yuvarlaklığı ve 24 px iç boşluk seçin. Her iki genişlikte önizledikten sonra dışa aktarılan HTML ve CSS kodunu sayfanızda birlikte kullanın. Eylem, girdiğiniz adrese giden bir bağlantıdır; form düğmesi değildir.

Kontrast ve hareket

Kontrast değeri, seçilen metin ve kart arka planı renklerini karşılaştırır. Okunabilirliği artırmak için yararlı bir işarettir: WCAG 2.2 kontrast kılavuzu, çoğu normal metin için en az 4,5:1 oranı belirtir. Tek bir renk çiftinin sonucu, kartın veya sayfanın tamamının erişilebilir olduğunu doğrulamaz. Bağlantıyı, odak göstergesini ve sitenizden gelen renkleri gerçek arka planları üzerinde kontrol edin. Oluşturulan odak stili klavye kullanıcılarının bağlantıyı görmesine yardımcı olur; azaltılmış hareket kuralı ziyaretçinin hareket tercihini dikkate alır.

İçerik ve bağlantılar

İsteğe bağlı bağlantı için tam bir http:// veya https:// adresi kullanın. Diğer URL şemaları kabul edilmez. Başlık, metin ve bağlantı bilgileri tarayıcınızda işlenir. İki adımlı akışta sonuca geçebilmeniz için bu bilgiler sekmenin oturum depolamasında tutulur. Tarayıcı oturum depolamasını engellerse içerik sonraki adıma taşınamaz. Kopyaladığınız veya indirdiğiniz kod elbette bu içeriği içerebilir.

Sık Sorulan Sorular

Evet. Kart içeriği için anlamsal HTML, tasarımı için ayrı CSS dışa aktarır. İkisini de projenize ekleyin.

Evet. İsteğe bağlı bağlantı alanlarını boş bırakın. Bağlantı eklerseniz bağlantı metni ve tam bir http veya https URL’si gerekir.

Evet. Arka plan, kenarlık rengi, köşe yuvarlaklığı, iç boşluk ve gölge ayarlarının yanında bunların da kontrolleri bulunur.

Hayır. Yalnızca seçilen metin ve arka plan renklerini karşılaştırır. Erişilebilirlik son sayfaya, bağlantıya, odak durumlarına, içeriğe ve diğer tasarım kararlarına da bağlıdır.

Başlık, metin ve isteğe bağlı bağlantı tarayıcınızda kalır; iki adımlı akış sırasında geçerli sekmenin oturum depolamasında tutulur. Depolama engellenirse araç bunları sonuç adımına taşıyamaz.

İlgili Araçlar

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Rastgele adres oluşturucu

Arayüz maketleri ve testler için üç basitleştirilmiş biçimde 1–20 adres benzeri kayıt oluşturun.

CSS Fiyat Tablosu Oluşturucu

HTML + CSS ile tek bir fiyat kartı oluşturun: paket adı, fiyat ve marka vurgu rengi. Kodu açılış sayfanıza kopyalayın.

Araç diğer dillerde mevcuttur