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 9.078 efektlik katalogdan gerçek zamanlı olarak alınır.
Görsel ve efekt22
background7917Bir elemanın arka planını tek satırda tanımlar: renk, görsel, gradyan, konum, boyut ve tekrar davranışı.border-radius7272Köşeleri yuvarlatır. Her köşeye ayrı, hatta yatay ve dikey yarıçapa ayrı değer verilebilir.box-shadow4198Elemanın kutusuna gölge ekler. Virgülle birden çok gölge verilebilir; içe doğru gölge için `inset` kullanılır.content2843`::before` ve `::after` sözde elemanlarının içeriğini üretir. Boş bile olsa yazılmadan sözde eleman oluşmaz.opacity2351Elemanı ve tüm içeriğini saydamlaştırır. 0 tamamen görünmez, 1 tamamen görünürdür.filter2114Elemana görsel filtre uygular: bulanıklık, parlaklık, renk tonu, gölge. Birden fazla filtre sırayla zincirlenir.outline996Kenarlığın dışına, düzeni bozmayan bir çerçeve çizer. Klavye odağını göstermenin standart yoludur.text-shadow646Yazıya gölge ekler. Neon parıltı, kabartma ve 3B yazı efektlerinin temelidir.background-size623Arka plan görselinin veya gradyanının kaplayacağı alanı belirler.background-position521Arka plan görselinin eleman içindeki konumunu ayarlar.clip-path512Elemanı geometrik bir şekle göre keser. Kesilen bölge hem görünmez olur hem tıklamayı geçirmez.background-clip425Arka planın hangi kutuya kadar çizileceğini belirler. `text` değeriyle arka plan yazının şekline kırpılır.-webkit-background-clip423`background-clip`'in satıcı önekli sürümü. Gradyanlı yazı efektlerinde hâlâ yazılması gerekir.background-image411Arka plana görsel veya gradyan yerleştirir. Virgülle birden fazla katman verilebilir; ilk yazılan en üstte durur.-webkit-text-fill-color247Yazının dolgu rengini `color`'dan bağımsız ayarlar. Gradyanlı yazıda dolguyu saydam yapmak için kullanılır.backdrop-filter88Elemanın ARKASINDA kalan içeriğe filtre uygular. Buzlu cam (glassmorphism) görünümünün temelidir.mix-blend-mode86Elemanın altındaki içerikle nasıl karışacağını belirler — Photoshop'taki katman karışım modlarının karşılığı.-webkit-backdrop-filter45`backdrop-filter`'ın satıcı önekli sürümü; Safari'nin eski sürümleri için gerekir.mask41Elemanı bir görsel veya gradyanın alfa kanalına göre maskeler. `clip-path`'ten farkı yumuşak geçiş yapabilmesidir.-webkit-mask39`mask`'in satıcı önekli sürümü; geniş tarayıcı desteği için birlikte yazılır.-webkit-text-stroke34Yazı karakterlerinin çevresine kontur çizer. İçi boş, çerçeveli başlıklar için kullanılır.isolation28Yeni bir yığma bağlamı yaratarak alt elemanların dışarıyla karışmasını engeller.Dönüşüm ve animasyon9
transform5623Elemanı taşır, döndürür, ölçekler veya eğer. Düzeni yeniden hesaplatmadığı için animasyonda en ucuz araçlardandır.transition4812Bir özelliğin değeri değiştiğinde aradaki geçişi yumuşatır. Hover efektlerinin çoğu bundan ibarettir.animation3494`@keyframes` ile tanımlanan bir kare dizisini elemana uygular. Süre, tekrar, yön ve dolgu davranışını tek satırda toplar.transform-origin548Dönüşümlerin hangi noktaya göre uygulanacağını belirler. Varsayılan elemanın merkezidir.animation-delay333Animasyonun başlamadan önce bekleyeceği süreyi belirler. Negatif değer animasyonu ortasından başlatır.transform-style157Alt elemanların 3B uzayda mı yoksa düzleştirilmiş olarak mı konumlanacağını belirler.perspective1413B sahneye derinlik katar. Küçük değerler abartılı, büyük değerler yumuşak perspektif verir.animation-duration86Animasyonun bir turunun ne kadar süreceğini belirler.animation-direction58Animasyonun her turda hangi yönde oynayacağını belirler.Düzen13
display4791Elemanın kutu türünü ve çocuklarının nasıl yerleşeceğini belirler.position4582Elemanın normal akışa göre nasıl konumlanacağını belirler.align-items2689Öğeleri çapraz eksende hizalar.overflow2059İçerik kutuya sığmadığında ne olacağını belirler.gap2008Izgara ve esnek kutu öğeleri arasındaki boşluğu belirler.justify-content1238Öğeleri ana eksende hizalar ve aralarındaki boşluğu dağıtır.inset1058`top`, `right`, `bottom` ve `left` değerlerini tek satırda yazar.z-index978Üst üste binen elemanların çizim sırasını belirler. Yalnızca konumlandırılmış elemanlarda etkilidir.flex-direction356Esnek kutuda öğelerin hangi eksende dizileceğini belirler.place-items151`align-items` ve `justify-items` değerlerini tek satırda yazar.flex138Bir esnek öğenin büyüme, küçülme ve temel boyutunu tek satırda tanımlar.flex-wrap49Öğelerin tek satıra sığmadığında alt satıra geçip geçmeyeceğini belirler.grid-template-columns49Izgaranın sütun yapısını tanımlar.Tipografi11
color6295Yazının rengini belirler. Kenarlık ve bazı efektler için de miras alınan temel renktir.font-size5469Yazı boyutunu belirler. Aynı zamanda `em`, `rem` ve satır yüksekliği hesaplarının dayandığı temel ölçüdür.font-weight4703Yazının kalınlığını belirler. Yüklü yazı tipinin gerçekten sahip olduğu kalınlıklarla sınırlıdır.font-family2820Kullanılacak yazı tipini ve bulunamazsa sırayla denenecek yedekleri belirler.letter-spacing1252Harfler 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-align703Satır içi içeriğin yatay hizasını belirler.white-space626Boşlukların ve satır sonlarının nasıl işleneceğini belirler.text-decoration549Metne alt çizgi, üst çizgi veya üstü çizili biçim ekler.font-style289Yazının eğik olup olmayacağını belirler. Yazı tipinin gerçek eğik çizimi varsa onu kullanır, yoksa taklit eder.text-transform245Metnin büyük/küçük harf gösterimini değiştirir. Kaynak metin değişmez.line-height164Satırlar arasındaki dikey boşluğu belirler.Kutu modeli7
width4877Elemanı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.padding4666İçerik ile kenarlık arasındaki iç boşluğu belirler.height4072Elemanın içerik yüksekliğini belirler. Yüzde değer verebilmek için ata elemanın yüksekliğinin belirli olması gerekir.border3402Elemanın çevresine çizgi çizer. Kalınlık, biçim ve rengi tek satırda tanımlar.margin1664Elemanın dışındaki boşluğu belirler. Dikey kenar boşlukları belirli durumlarda çöker ve toplanmaz.min-width62Elemanın küçülebileceği en düşük genişliği belirler.box-sizing31Genişlik ve yükseklik hesabına dolgu ile kenarlığın dahil olup olmayacağını belirler.Etkileşim5
cursor4848İmleç elemanın üzerine geldiğinde hangi göstergenin görüneceğini belirler.user-select907Kullanıcının metni seçip seçemeyeceğini belirler.pointer-events819Elemanın fare ve dokunma olaylarını alıp almayacağını belirler.-webkit-appearance90`appearance`'ın satıcı önekli sürümü; eski WebKit sürümlerinde gerekir.appearance87Form öğelerinin tarayıcıya özgü yerel görünümünü kaldırır.