Skip to content
COSMODEV

Mga CSS Function ipinaliwanag

Ang mga CSS function na gumagawa ng pinakamalaking trabaho, nakagrupo ayon sa gawain: magkalkula ng mga sukat, magbasa ng mga custom property, maghalo at mamili ng mga kulay, magpinta ng mga gradient, maglapat ng mga filter, magguhit ng mga hugis, mag-transform ng mga box, at mamili ng mga value gamit ang logic. Pinapares ng bawat row ang function sa isang linyang halimbawa.

Kumukuha ng mga argumento ang isang CSS function at nagbabalik ng value na ginagamit ng browser. Ang mga pinakamalakas ay calc() para sa aritmetika, var() para sa mga design token, clamp() para sa fluid na laki, at color-mix() para sa mga derive na kulay. Pwedeng i-nest nang malaya: ang clamp(1rem, var(--fluid), 3rem) ay isang solong responsive value.

Talaan ng sanggunian · 62 mga entry
62 of 62 rows
Sukat at matematika
Ang resulta ng aritmetikong expression, na may halo-halong unit.width: calc(100% - 2rem);
Ang pinakamaliit sa mga ibinigay na value.width: min(100%, 60ch);
Ang pinakamalaki sa mga ibinigay na value.width: max(320px, 40vw);
Isang value na limitado sa pagitan ng isang min, isang preferred, at isang max.font-size: clamp(1rem, 2vw, 1.5rem);
Nagbabasa ng environment variable na ibinibigay ng user agent.padding: env(safe-area-inset-top);
Isang laki na limitado sa intrinsic na lapad ng content.width: fit-content(200px);
Rinoround ang isang value sa pinakamalapit na multiple ng isa pa.width: round(up, 133px, 50px);
Ang positibong natira ng dibisyon, laging hindi-negatibo.margin: mod(100px, 30px);
Ang natira ng dibisyon, pinapanatili ang tanda ng dividend.margin: rem(-100px, 30px);
Ang absolute value.translateX(abs(-10px));
-1, 0, o 1, ayon sa tanda ng value.padding: sign(-5px) * 10px;
Grid
Isang saklaw ng laki para sa mga grid track, sa pagitan ng min at max.grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr);
Inuulit ang isang pattern ng track nang ilang beses o hanggang mapuno.grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
Logic at kundisyon
Pumipili ng isa sa dalawang value base sa isang kundisyon.font-size: if(media(width > 600px), 1.25rem, 1rem);
Totoo kapag tumugma ang isang media query, para gamitin sa loob ng if().padding: if(media(width > 40rem), 2rem, 1rem);
Totoo kapag sinusuportahan ng browser ang isang deklarasyon, para gamitin sa loob ng if().display: if(supports(color: oklch(0 0 0)), oklch(0 0 0), #333);
Totoo kapag tumugma ang selector, para gamitin sa loob ng if().font-weight: if(selector(:hover), 700, 400);
Mga custom property
Ang value ng isang custom property, na may opsyonal na fallback.color: var(--accent, #333);
Kulay
Isang kulay mula sa mga channel na red, green, at blue (at alpha).color: rgb(59 130 246 / 0.8);
Isang kulay mula sa hue, saturation, at lightness.color: hsl(210 80% 50%);
Isang kulay sa perceptual na OKLCH space (konsistent na lightness).color: oklch(0.7 0.15 250);
Isang halo ng dalawang kulay sa isang ibinigay na color space.color: color-mix(in srgb, red 40%, blue);
Ang opsyon mula sa isang listahan na may pinakamagandang contrast sa base.color: color-contrast(#fff vs #000, #777);
Isang kulay mula sa hue, whiteness, at blackness.color: hwb(210 10% 20%);
Isang kulay sa CIELAB space (lightness, mga axis na a at b).color: lab(52% 40 59);
Isang kulay sa CIELAB space (lightness, chroma, hue).color: lch(52% 49 24);
Isang kulay sa alinmang predefined na color space ayon sa mga coordinate.color: color(display-p3 1 0.4 0.2);
Ang unang kulay sa light scheme, ang pangalawa sa dark.color: light-dark(#1a1a1a, #f5f5f5);
Mga gradient at larawan
Isang gradient sa isang tuwid na linya sa pagitan ng mga color stop.background: linear-gradient(90deg, #4b9fff, #2ee6a6);
Isang gradient na kumakalat palabas mula sa isang punto.background: radial-gradient(circle, #fff, #000);
Isang gradient na umiikot sa paligid ng isang sentro.background: conic-gradient(red, yellow, red);
Naglo-load ng external na resource: larawan, font, o SVG.background-image: url(hero.webp);
Pumipili ng pinakamainam na larawan para sa resolution ng device.background-image: image-set("hero.webp" 1x, "hero@2x.webp" 2x);
Naghahalo ng dalawang larawan sa isang ibinigay na porsyento.background-image: cross-fade(30%, url(a.webp), url(b.webp));
Filter at hugis
Mga pixel filter na ginagamit sa loob ng filter property.filter: blur(4px) brightness(1.1);
Isang SVG path string, ginagamit para magguhit ng clip o hugis.clip-path: path('M10 10 H 90 V 90 Z');
Nagbabasa ng HTML attribute; limitadong gamit sa labas ng content.content: attr(data-label);
Inaayos ang contrast ng elemento.filter: contrast(1.4);
Nagpipinta ng anino na sumusunod sa alpha hugis ng elemento.filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
Ginagawang grayscale ang elemento.filter: grayscale(100%);
Binabaligtad ang mga kulay ng elemento.filter: invert(1);
Naglalagay ng sepia na tono.filter: sepia(0.6);
Iniikot ang hue ng mga kulay ng elemento.filter: hue-rotate(90deg);
Itinatakda ang opacity ng elemento sa pamamagitan ng filter.filter: opacity(0.5);
Isang hugis bilog para sa clip-path o shape-outside.clip-path: circle(40% at 50% 50%);
Isang hugis elipse para sa clip-path o shape-outside.clip-path: ellipse(50% 35% at 50% 50%);
Isang parihabang may bilog na sulok para sa clip-path.clip-path: inset(10px 10px 10px 10px round 8px);
Isang hugis poligono mula sa isang listahan ng mga punto.clip-path: polygon(50% 0, 100% 100%, 0 100%);
Transform
Inililipat ang elemento sa kahabaan ng X at Y.transform: translate(10px, 20px);
Pinaikot ang elemento sa paligid ng sentro nito.transform: rotate(45deg);
Isinascale ang elemento sa kahabaan ng X at Y.transform: scale(1.25);
Pinapahilig ang elemento sa kahabaan ng X at Y.transform: skew(10deg, 0deg);
Isang 2D transform mula sa anim na matrix value.transform: matrix(1, 0, 0.5, 1, 10, 0);
Nagtatakda ng 3D perspective depth para sa mga anak ng elemento.transform: perspective(600px) rotateY(20deg);
Animasyon at mga counter
Isang easing curve mula sa apat na control point.transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
Isang easing na tumatalon sa magkakapantay na hakbang.animation-timing-function: steps(8, end);
Ang kasalukuyang value ng isang CSS counter, bilang content.content: counter(chapter);
Ang mga value ng isang counter at lahat ng mga ninuno nito, pinag-ugnay ng isang string.content: counters(item, ".");
0 hanggang 1 habang umuusad ang isang value mula sa simula hanggang sa wakas.opacity: progress(scroll(), 0, 50vh);
Isang random na numero mula sa isang saklaw, nakapirmi bawat elemento.rotate: random(from -5deg to 5deg);
Ang sine ng isang anggulo, para sa mga calc expression.translateY(calc(1rem * sin(45deg)));
Ang cosine ng isang anggulo, para sa mga calc expression.translateX(calc(1rem * cos(45deg)));