CSS itzal-sortzailea (box-shadow)

Mugitu kontrolak eta ikusi berehala nolakoa den kutxa, txartel edo botoi baten itzala. Konbinatu hainbat geruza itzal errealistagoak lortzeko edo hasi adibideetako batetik, eta kopiatu box-shadow kodea zure CSSrako.

Kutxaren itzala

Kutxaren kolorea

Atzealdearen kolorea

Ertz biribilduak:

Adibideak:

Itzal-geruzak

X desplazamendua

Y desplazamendua

Lausotzea

Hedapena

Kolorea

Opakutasuna

Barne-itzala (inset)

CSS kodea

Nola dabilen box-shadow

box-shadow propietateak lau neurri eta kolore bat har ditzake gehienez: desplazamendu horizontala eta bertikala (negatiboak ezkerrera eta gora), lausotzea (0 = ertz zorrotza), hedapena (itzala handitzen du edo, negatiboa bada, txikitzen) eta kolorea, normalean beltza gardentasunarekin (rgba(0, 0, 0, 0.2)). inset hitzarekin, itzala kutxaren barruan marrazten da.

Hainbat itzal kate daitezke, komaz bereizita. Itzalik errealistenek itzal labur eta zorrotz bat eta beste handiago eta lausoago bat konbinatzen dituzte, Material Designek eta diseinu-sistema gehienek egiten duten bezala.

Trikimailuak box-shadow-ekin

Desplazamendurik eta lausotzerik gabeko baina hedapena duen itzal batek (0 0 0 4px) lekurik hartzen ez duen ingerada bat marrazten du, botoien eta eremuen fokurako aproposa. Neumorfismoak kontrako bi itzal erabiltzen ditu, bat argia eta bestea iluna, kutxaren kolore bereko atzealde baten gainean.

Itzalek ez diote eragiten diseinuari ez elementuaren tamainari, baina elementu askotan itzal oso handi eta lausoak jartzeak mugikorretan korritzea moteldu dezake. PNG irudi garden baten silueta itzaltzeko, erabili filter: drop-shadow(), eta testuetarako, text-shadow.