CSS Fonksiyonları açıklaması

62 of 62 rows


Boyutlandırma ve matematik
	Karışık birimli aritmetik ifadenin sonucu.	width: calc(100% - 2rem);
	Verilen değerlerin en küçüğü.	width: min(100%, 60ch);
	Verilen değerlerin en büyüğü.	width: max(320px, 40vw);
	Bir minimum, tercih edilen ve maksimum arasında sınırlandırılmış değer.	font-size: clamp(1rem, 2vw, 1.5rem);
	Kullanıcı aracısının sağladığı bir ortam değişkenini okur.	padding: env(safe-area-inset-top);
	İçeriğin doğal genişliğiyle sınırlandırılmış bir boyut.	width: fit-content(200px);
	Bir değeri diğerinin en yakın katına yuvarlar.	width: round(up, 133px, 50px);
	Bölmenin pozitif kalanı, her zaman negatif olmayan.	margin: mod(100px, 30px);
	Bölmenin kalanı, bölünenin işaretini korur.	margin: rem(-100px, 30px);
	Mutlak değer.	translateX(abs(-10px));
	Değerin işaretine göre -1, 0 veya 1.	padding: sign(-5px) * 10px;
Grid
	Grid izleri için, bir minimum ile maksimum arasında boyut aralığı.	grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
	Bir iz kalıbını belirli sayıda veya dolana kadar tekrarlar.	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Mantık ve koşullar
	Bir koşula göre iki değerden birini seçer.	font-size: if(media(width > 600px), 1.25rem, 1rem);
	Bir medya sorgusu eşleştiğinde doğru, if() içinde kullanım için.	padding: if(media(width > 40rem), 2rem, 1rem);
	Tarayıcı bir bildirimi desteklediğinde doğru, if() içinde kullanım için.	display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
	Seçici eşleştiğinde doğru, if() içinde kullanım için.	font-weight: if(selector(:hover), 700, 400);
Özel özellikler
	Bir özel özelliğin değeri, isteğe bağlı bir yedek değerle.	color: var(--accent, #333);
Renk
	Kırmızı, yeşil, mavi (ve alfa) kanallarından bir renk.	color: rgb(59 130 246 / 0.8);
	Ton, doygunluk ve açıklıktan oluşan bir renk.	color: hsl(210 80% 50%);
	Algısal OKLCH uzayında bir renk (tutarlı açıklık).	color: oklch(0.7 0.15 250);
	Verilen bir renk uzayında iki rengin karışımı.	color: color-mix(in srgb, red 40%, blue);
	Bir listede temel renkle en iyi kontrastı veren seçenek.	color: color-contrast(#fff vs #000, #777);
	Ton, beyazlık ve siyahlıktan bir renk.	color: hwb(210 10% 20%);
	CIELAB uzayında bir renk (açıklık, a ve b eksenleri).	color: lab(52% 40 59);
	CIELAB uzayında bir renk (açıklık, kroma, ton).	color: lch(52% 49 24);
	Koordinatlarla, önceden tanımlı herhangi bir renk uzayında bir renk.	color: color(display-p3 1 0.4 0.2);
	Açık düzende ilk renk, koyu düzende ikinci renk.	color: light-dark(#1a1a1a, #f5f5f5);
Gradyanlar ve görseller
	Renk durakları arasında düz bir çizgi boyunca gradyan.	background: linear-gradient(90deg, #4b9fff, #2ee6a6);
	Bir noktadan dışa doğru yayılan gradyan.	background: radial-gradient(circle, #fff, #000);
	Bir merkez noktası etrafında süpüren gradyan.	background: conic-gradient(red, yellow, red);
	Harici bir kaynak yükler: görsel, yazı tipi veya SVG.	background-image: url(hero.webp);
	Cihazın çözünürlüğüne göre en iyi görseli seçer.	background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
	İki görseli verilen bir yüzdeyle karıştırır.	background-image: cross-fade(30%, url(a.webp), url(b.webp));
Filtre ve şekil
	filter özelliği içinde kullanılan piksel filtreleri.	filter: blur(4px) brightness(1.1);
	Kırpma veya şekil çizmek için kullanılan SVG yolu dizisi.	clip-path: path('M10 10 H 90 V 90 Z');
	Bir HTML özniteliğini okur; content dışında kullanımı sınırlı.	content: attr(data-label);
	Elementin kontrastını ayarlar.	filter: contrast(1.4);
	Elementin alfa şeklini takip eden bir gölge boyar.	filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
	Elementi gri tonlara dönüştürür.	filter: grayscale(100%);
	Elementin renklerini tersine çevirir.	filter: invert(1);
	Sepya tonu uygular.	filter: sepia(0.6);
	Elementin renklerinin tonunu döndürür.	filter: hue-rotate(90deg);
	Elementin saydamlığını filter üzerinden ayarlar.	filter: opacity(0.5);
	clip-path veya shape-outside için daire şekli.	clip-path: circle(40% at 50% 50%);
	clip-path veya shape-outside için elips şekli.	clip-path: ellipse(50% 35% at 50% 50%);
	clip-path için yuvarlatılmış dikdörtgen şekli.	clip-path: inset(10px 10px 10px 10px round 8px);
	Nokta listesinden çokgen şekli.	clip-path: polygon(50% 0, 100% 100%, 0 100%);
Dönüştürme
	Elementi X ve Y boyunca taşır.	transform: translate(10px, 20px);
	Elementi merkezinin etrafında döndürür.	transform: rotate(45deg);
	Elementi X ve Y boyunca ölçekler.	transform: scale(1.25);
	Elementi X ve Y boyunca eğirir.	transform: skew(10deg, 0deg);
	Altı matris değerinden tek bir 2B dönüşüm.	transform: matrix(1, 0, 0.5, 1, 10, 0);
	Elementin alt öğeleri için 3B perspektif derinliğini ayarlar.	transform: perspective(600px) rotateY(20deg);
Animasyon ve sayaçlar
	Dört kontrol noktasından bir yumuşatma eğrisi.	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	Eşit adımlarla ilerleyen bir yumuşatma.	animation-timing-function: steps(8, end);
	İçerik olarak bir CSS sayacının geçerli değeri.	content: counter(chapter);
	Bir sayacın ve tüm atalarının değerleri, bir dizgeyle birleştirilmiş.	content: counters(item, ".");
	Bir değer başlangıç ile bitiş arasında ilerledikçe 0'dan 1'e.	opacity: progress(scroll(), 0, 50vh);
	Bir aralıktan rastgele sayı, element başına sabit.	rotate: random(from -5deg to 5deg);
	Bir açının sinüsü, calc ifadeleri için.	translateY(calc(1rem * sin(45deg)));
	Bir açının kosinüsü, calc ifadeleri için.	translateX(calc(1rem * cos(45deg)));