CSS Box Shadow -generaattori

Mika on CSS box-shadow?

CSS box-shadow -ominaisuus lisaa varjoefekteja elementin kehyksen ympaarille. Varjot ovat perustavanlaatuinen tyokalu syvyyden, kohotuksen ja visuaalisen hierarkian luomiseen web-suunnittelussa. Hyvin muotoiltu varjo voi saada kortin naeyttamaan leijuvan sivun ylapuolella tai antaa painikkeelle painetun ulkonaon.

Box-shadow hyvaksyy useita parametreja: vaakasuuntainen siirtyma, pystysuuntainen siirtyma, sumennussade, levenemissade ja vari. Voit myos lisata inset-avainsanan sisaeisten varjojen luomiseen. Useita varjoja voidaan kerrrostaa yhdelle elementille erottelemalla ne pilkuilla, ja ne piirtyvat takaosa ensin.

Box-shadow-syntaksin erittely

Taysi syntaksi on: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] vari. Offset-x ja offset-y -arvot ovat pakollisia ja maarittelevat varjon sijainnin suhteessa elementtiin. Positiiviset arvot siirtaevat varjoa oikealle ja alas. Blur-radius pehmentaa reunoja — arvo 0 luo teravan varjon. Spread-radius laajentaa tai kutistaa varjoa — negatiiviset arvot luovat tiukemman varjon.

Tyokalun kayttohje

Saeaeda liukusaeaetimiee vaakasuuntaiselle siirtymalle, pystysuuntaiselle siirtymalle, sumennukselle, levenemiselle ja varille. Esikatselu paeittyy reaaliajassa, jotta naet tarkalleen, milta varjo tulee nayttamaan. Vaihda inset-vaihtoehto sisaeisille varjoille. Lisaa useita varjokerroksia realistisempia syvyysefekteja varten. Kun olet tyytyvainen, kopioi luotu CSS-koodi.

Vinkkeja tehokkaisiin varjoihin

• Kayta hienovaraisia varjoja matalalla lapinaekyvyydella puhtaan, modernin, kohotetun ulkonaon saavuttamiseksi.
• Kerrostamallia useita varjoja realistisemman syvyyden saavuttamiseksi — terava laheinen varjo yhdistettyna pehmeaan hajautettuun varjoon jaeljittelee reaalimaailman valaistusta.
• Suuri sumennuu hieman siirtymalla luo pehmeaen leijuvan efektin, joka on ihanteellinen korteille ja modaaleille.
• Negatiivinen leveneminen luo tiukemman, kohdennetumman varjon, joka on hyodyllinen hienovaraisille reunuksille.
• Sovita varjon suunta johdonmukaisesti koko sivullasi — epaajohdonmukaiset valonlaehteet nayttavat luonnottomilta.

Material Designin kohotusjarjestelma

Googlen Material Design maarittelee kohotasot 0dp:sta 24dp:hen, kukin erityisilla varjoarvoilla. Korkeampi kohottaminen tarkoittaa suurempia sumennuksen ja siirtymaen arvoja. Tama jarjestelma varmistaa yhtenaeisen visuaalisen hierarkian koko sovelluksessa. Vaikka et noudattaisi Material Designia, yhtenaeisten kohotustasojen periaate on arvokas mille tahansa suunnittelujarjestelmalle.

Suorituskykyvaikutus

Box-varjot ovat GPU-kiihdytettyjae nykyaikaisissa selaimissa ja niilla on minimaalinen suorituskykyvaikutus tyypillisessa kaytossa. Kuitenkin hyvin suuret sumennussateet (50px+) monissa elementeissa samanaikaisesti voivat aiheuttaa kuvanpaeivitysten putoamista animaatioiden aikana. Jos tarvitset animoida varjoja, harkitse transform: scale() -funktion kayttamista pseudo-elementin kasvattamiseen staattisella varjolla sen sijaan, etta animoisit varjoarvoja suoraan.

Usein kysytyt kysymykset

Mika on box-shadow- ja drop-shadow-funktioiden ero?

box-shadow kohdistuu elementin suorakulmaiseen kehykseen, mukaan lukien tayte ja reunus. filter: drop-shadow() -funktio seuraa elementin todellista muotoa, mukaan lukien lapinaekyvat alueet kuvissa. Kayta drop-shadow-funktiota ei-suorakulmaisille elementeille kuten kuvakkeille tai lapinakyville PNG-kuville.

Voinko kayttaa box-shadowia reunusten luomiseen?

Kylla. Box-shadow nollasumennuksella ja positiivisella levenemisella toimii reunuksen tavoin vaikuttamatta asetteluun. Tama tekniikka on hyodyllinen, kun tarvitset visuaalisen reunuksen muuttamatta elementin mittoja, esimerkiksi hover-tiloissa.