CSS Özellik Referansı
67 CSS özelliğinin ne işe yaradığı, sözdizimi, sık kullanılan değerleri ve pratikte karşılaşılan tuzakları. Her sayfa, o özelliği gerçekten kullanan efektlerden canlı örnekler gösterir — kuralın ne yaptığını okumakla kalmaz, çalışırken görürsün.
Örnekler 10.238 efektlik katalogdan gerçek zamanlı olarak alınır.
Görsel ve efekt22
background9048Bir elemanın arka planını tek satırda tanımlar: renk, görsel, gradyan, konum, boyut ve tekrar davranışı.border-radius8359Köşeleri yuvarlatır. Her köşeye ayrı, hatta yatay ve dikey yarıçapa ayrı değer verilebilir.box-shadow4848Elemanın kutusuna gölge ekler. Virgülle birden çok gölge verilebilir; içe doğru gölge için `inset` kullanılır.content3116`::before` ve `::after` sözde elemanlarının içeriğini üretir. Boş bile olsa yazılmadan sözde eleman oluşmaz.opacity2902Elemanı ve tüm içeriğini saydamlaştırır. 0 tamamen görünmez, 1 tamamen görünürdür.filter2187Elemana görsel filtre uygular: bulanıklık, parlaklık, renk tonu, gölge. Birden fazla filtre sırayla zincirlenir.outline1103Kenarlığın dışına, düzeni bozmayan bir çerçeve çizer. Klavye odağını göstermenin standart yoludur.background-size711Arka plan görselinin veya gradyanının kaplayacağı alanı belirler.text-shadow694Yazıya gölge ekler. Neon parıltı, kabartma ve 3B yazı efektlerinin temelidir.background-position608Arka plan görselinin eleman içindeki konumunu ayarlar.clip-path588Elemanı geometrik bir şekle göre keser. Kesilen bölge hem görünmez olur hem tıklamayı geçirmez.background-image546Arka plana görsel veya gradyan yerleştirir. Virgülle birden fazla katman verilebilir; ilk yazılan en üstte durur.background-clip435Arka planın hangi kutuya kadar çizileceğini belirler. `text` değeriyle arka plan yazının şekline kırpılır.-webkit-background-clip433`background-clip`'in satıcı önekli sürümü. Gradyanlı yazı efektlerinde hâlâ yazılması gerekir.-webkit-text-fill-color249Yazının dolgu rengini `color`'dan bağımsız ayarlar. Gradyanlı yazıda dolguyu saydam yapmak için kullanılır.backdrop-filter98Elemanın ARKASINDA kalan içeriğe filtre uygular. Buzlu cam (glassmorphism) görünümünün temelidir.mix-blend-mode93Elemanın altındaki içerikle nasıl karışacağını belirler — Photoshop'taki katman karışım modlarının karşılığı.mask56Elemanı bir görsel veya gradyanın alfa kanalına göre maskeler. `clip-path`'ten farkı yumuşak geçiş yapabilmesidir.-webkit-mask54`mask`'in satıcı önekli sürümü; geniş tarayıcı desteği için birlikte yazılır.-webkit-backdrop-filter47`backdrop-filter`'ın satıcı önekli sürümü; Safari'nin eski sürümleri için gerekir.-webkit-text-stroke36Yazı karakterlerinin çevresine kontur çizer. İçi boş, çerçeveli başlıklar için kullanılır.isolation32Yeni bir yığma bağlamı yaratarak alt elemanların dışarıyla karışmasını engeller.Dönüşüm ve animasyon9
transform6378Elemanı taşır, döndürür, ölçekler veya eğer. Düzeni yeniden hesaplatmadığı için animasyonda en ucuz araçlardandır.transition5382Bir özelliğin değeri değiştiğinde aradaki geçişi yumuşatır. Hover efektlerinin çoğu bundan ibarettir.animation4137`@keyframes` ile tanımlanan bir kare dizisini elemana uygular. Süre, tekrar, yön ve dolgu davranışını tek satırda toplar.transform-origin660Dönüşümlerin hangi noktaya göre uygulanacağını belirler. Varsayılan elemanın merkezidir.animation-delay417Animasyonun başlamadan önce bekleyeceği süreyi belirler. Negatif değer animasyonu ortasından başlatır.perspective1713B sahneye derinlik katar. Küçük değerler abartılı, büyük değerler yumuşak perspektif verir.transform-style164Alt elemanların 3B uzayda mı yoksa düzleştirilmiş olarak mı konumlanacağını belirler.animation-duration95Animasyonun bir turunun ne kadar süreceğini belirler.animation-direction62Animasyonun her turda hangi yönde oynayacağını belirler.Düzen13
display5857Elemanın kutu türünü ve çocuklarının nasıl yerleşeceğini belirler.position5345Elemanın normal akışa göre nasıl konumlanacağını belirler.align-items3383Öğeleri çapraz eksende hizalar.gap2745Izgara ve esnek kutu öğeleri arasındaki boşluğu belirler.overflow2607İçerik kutuya sığmadığında ne olacağını belirler.justify-content1545Öğeleri ana eksende hizalar ve aralarındaki boşluğu dağıtır.inset1254`top`, `right`, `bottom` ve `left` değerlerini tek satırda yazar.z-index1011Üst üste binen elemanların çizim sırasını belirler. Yalnızca konumlandırılmış elemanlarda etkilidir.flex-direction765Esnek kutuda öğelerin hangi eksende dizileceğini belirler.flex519Bir esnek öğenin büyüme, küçülme ve temel boyutunu tek satırda tanımlar.place-items316`align-items` ve `justify-items` değerlerini tek satırda yazar.grid-template-columns78Izgaranın sütun yapısını tanımlar.flex-wrap57Öğelerin tek satıra sığmadığında alt satıra geçip geçmeyeceğini belirler.Tipografi11
color7403Yazının rengini belirler. Kenarlık ve bazı efektler için de miras alınan temel renktir.font-size6461Yazı boyutunu belirler. Aynı zamanda `em`, `rem` ve satır yüksekliği hesaplarının dayandığı temel ölçüdür.font-weight5169Yazının kalınlığını belirler. Yüklü yazı tipinin gerçekten sahip olduğu kalınlıklarla sınırlıdır.font-family3805Kullanılacak yazı tipini ve bulunamazsa sırayla denenecek yedekleri belirler.letter-spacing1977Harfler arasındaki boşluğu ayarlar. Küçük değişiklikler bile başlıkların algılanan yoğunluğunu belirgin biçimde değiştirir.text-align984Satır içi içeriğin yatay hizasını belirler.white-space837Boşlukların ve satır sonlarının nasıl işleneceğini belirler.text-transform653Metnin büyük/küçük harf gösterimini değiştirir. Kaynak metin değişmez.text-decoration575Metne alt çizgi, üst çizgi veya üstü çizili biçim ekler.line-height490Satırlar arasındaki dikey boşluğu belirler.font-style298Yazının eğik olup olmayacağını belirler. Yazı tipinin gerçek eğik çizimi varsa onu kullanır, yoksa taklit eder.Kutu modeli7
width6015Elemanın içerik genişliğini belirler. `box-sizing` değerine göre dolgu ve kenarlığın bu ölçüye dahil olup olmadığı değişir.padding5703İçerik ile kenarlık arasındaki iç boşluğu belirler.height5067Elemanın içerik yüksekliğini belirler. Yüzde değer verebilmek için ata elemanın yüksekliğinin belirli olması gerekir.border4124Elemanın çevresine çizgi çizer. Kalınlık, biçim ve rengi tek satırda tanımlar.margin2119Elemanın dışındaki boşluğu belirler. Dikey kenar boşlukları belirli durumlarda çöker ve toplanmaz.box-sizing410Genişlik ve yükseklik hesabına dolgu ile kenarlığın dahil olup olmayacağını belirler.min-width115Elemanın küçülebileceği en düşük genişliği belirler.Etkileşim5
cursor5386İmleç elemanın üzerine geldiğinde hangi göstergenin görüneceğini belirler.user-select965Kullanıcının metni seçip seçemeyeceğini belirler.pointer-events948Elemanın fare ve dokunma olaylarını alıp almayacağını belirler.-webkit-appearance196`appearance`'ın satıcı önekli sürümü; eski WebKit sürümlerinde gerekir.appearance194Form öğelerinin tarayıcıya özgü yerel görünümünü kaldırır.