CSS funktioviittausopas

CSS-funktiot

CSS-funktiot voidaan käyttää arvojen laskemiseen, merkkijonon käsittelyyn tai väreihin, monimutkaisten gradienttien ja muotojen luomiseen jne.

CSS-funktiot käytetään yleensä erilaisten CSS-ominaisuuksien arvojen määrittämiseen.

Funktio Kuvaus
acos() Palauttaa arvon arccos välillä -1 ja 1.
asin() Palauttaa arvon arcsin välillä -1 ja 1.
atan() Palauttaa arvon arctangentin arvon välillä -∞ ja ∞.
atan2() Palauttaa kahden arvon arctangentin arvon välillä -∞ ja ∞.
attr() Palauttaa valitun elementin ominaisuuden arvon.
blur() Käyttää hämärtymisefektiä elementissä.
brightness() Säätää elementin kirkkautta (valoisampi tai tummempi).
calc() Sallii laskutoimitusten suorittamisen CSS-ominaisuuksien arvojen määrittämiseksi.
circle() Määrittelee ympyrän.
clamp() Asettaa arvon, joka säätää arvoa näkymän kokoonpanon mukaan pienimmästä ja suurimmasta arvosta.
color() Sallii väriavaruuden määrittämisen tietystä määritetystä väriavaruudesta.
color-mix() Sekoittaa kaksi väriarvoa annetussa väriavaruudessa annetun suhteen.
conic-gradient() Luo silmukan gradientin.
contrast() Säätää elementin kontrastia.
cos() Palauttaa kulman kosinussiiven.
counter() Palauttaa nimetyn laskurin nykyisen arvon.
counters() Palauttaa nimetyn ja sisennetyn laskurin nykyisen arvon.
cubic-bezier() Määrittelee kolmiosaisen Bezier-kurvan.
drop-shadow() Käyttää projektioefektiä kuvassa.
ellipse() Määrittelee elipallo.
exp() Palauttaa E:n määritetyn potenssin x.x)
fit-content() Sallii elementin kokoonpanon säätämisen sisällön mukaan.
grayscale() Muuntaa kuvan harmaasävyksi.
hsl() / hsla() Määrittelee väriä HSL (hävittymä-satvuus-valoisuus) -mallin avulla; vaihtoehtoisesti sisältää alpha-komponentin.
hue-rotate() Sovittaa elementtiin värikierteen.
hwb() Määrittelee väriä HSB (hävittymä-satvuus-valoisuus) -mallin avulla; vaihtoehtoisesti sisältää alpha-komponentin.
hypot() Palauttaa sen parametrien neliösumman neliöjuuren.
inset() Määrittelee reunan etäisyyden referenssiruudusta, joka säilyttää määritetyn sisäisen etäisyyden jokaiselle reunalle.
invert() Kääntää kuvan värit.
lab() Määrittelee CIE Lab -väriavaruudessa väriä.
lch() Määrittelee LCH (valoisaisuus-kromatointi-häivitys) -väriavaruudessa väriä.
light-dark() Käyttää kahta väriarvoa asetettuun valon tai tumman teemaan; jos käyttäjä on asettanut vaalean teeman, palauttaa ensimmäisen arvon;
Palauttaa toisen arvon, jos käyttäjä on asettanut tumman teeman.
linear-gradient() Luo suoran pehmennyksen.
log() Palauttaa määritetyn luvun luonnollisen logaritmin (E:n perusteella) tai määritetyn pohjan logaritmin.
matrix() Määrittelee 2D-transformaation kuusiluku-matriisin avulla.
matrix3d() Määrittelee 3D-transformaation 4x4-matriisin avulla.
max() Käyttää pilkulla erotettua arvojen listaa attribuutin arvona.
min() Käyttää pilkulla erotettua arvojen listaa attribuutin arvona.
minmax() Määrittelee suuruuden alueen, joka on suurempi tai yhtä suuri kuin vähimmäisarvo ja pienempi tai yhtä pieni kuin enimmäisarvo (CSS-verkkoon käytettävä).
mod() Palauttaa luvun jakojäännön toisen luvun jakamisen jälkeen.
oklab() Määrittelee OKLAB-väriavaruudessa väriä.
oklch() Määrittelee OKLCH-väriavaruudessa väriä.
opacity() Sovittaa elementtiin läpinäkyvyysefektiä.
perspective() Määrittelee 3D-transformaatioelementin perspektiivin.
polygon() Määrittelee polygonin.
pow() Palauttaa luvun (x) luvun (y) potenssin.
radial-gradient() Luo säteellisen pehmennyksen.
ray() Määrittelee animaatioelementin noudattaman siirtymäpolun osan.
rem() Palauttaa luvun jakojäännön toisen luvun jakamisen jälkeen.
repeat() Toistuva sarake- tai rivijoukko verkossa.
repeating-conic-gradient() Toistuva kulmpehmennys.
repeating-linear-gradient() Toistuva suora pehmennys.
repeating-radial-gradient() Toistuva säteellinen pehmennys.
rgb() / rgba() Määrittelee värin puna-vihreä-sininen (RGB) mallin avulla; valinnainen alpha-komponentti sisältyy.
rotate() Määrittelee elementin 2D-kiertokulman.
rotate3d() Määrittelee elementin 3D-kiertokulman.
rotateX() Määrittelee elementin 3D-kiertokulman x-akselin (tasasuuntaan) suuntaan.
rotateY() Määrittelee elementin 3D-kiertokulman y-akselin (pystysuuntaan) suuntaan.
rotateZ() Määrittelee elementin 3D-kiertokulman z-akselin suuntaan.
round() Pyöristää lukuja määritellyllä pyöristysstrategialla.
saturate() Säätää elementin kirkkauden (väriintensiteetti).
scale() Määrittelee elementin 2D-skaalauksen.
scale3d() Määrittelee elementin 3D-skaalauksen.
scaleX() Horisontaalisesti skaalaa elementtiä (leveys).
scaleY() Pystysuuntaisesti skaalaa elementtiä (korkeus).
sepia() Muuntaa kuvan sepia-tyyliin.
sin() Palauttaa luvun (kulman) sinusarvan arvon.
skew() Kallistaa elementtiä x- ja y-akselin suuntaan.
skewX() Kallistaa elementtiä x-akselin suuntaan.
skewY() Kallistaa elementtiä y-akselin suuntaan.
sqrt() Palauttaa luvun neliöjuuren.
steps() Luo animaatiolle askelajan aikafunktio.
tan() Palauttaa luvun tangentin arvon.
translate() Mahdollistaa elementin uudelleenlokalisointi x- ja y-akselin suuntaan.
translateX() Mahdollistaa elementin uudelleenlokalisointi x-akselin suuntaan.
translateY() Mahdollistaa elementin uudelleenlokalisointi y-akselin suuntaan.
url() Mahdollistaa tiedoston sisällyttäminen tyyleihin.
var() Syötä mukautetun ominaisuuden arvo.