Lamedad plokid, sügavuseta nupud, taustaga sulanduvad kaardid: selline on tüüpiline välimus saidil, kus disainer on box-shadow'iga kitsi olnud. Ometi võib paar rida CSS-i muuta igava märgendi iseloomuga liideseks, lisades tühja ruumi, tõstes esile võtmeploki või eraldades pehmelt sektsiooni ilma ühegi border'ita.

Probleem on selles, et enamik arendajaid piirdub vaikimisi halli varjuga 0px 2px 5px rgba(0,0,0,0.2) ja unustab, et box-shadow suudab palju enamat: mitmekihilised varjud, värvilised kumad, neumorfism, sisevarjud ja isegi pikslikunsti renderdamine ilma ühegi div'ita.

Allpool on 13 tehnikat, mis muudavad box-shadow'i igavast utiliidist sinu peamiseks tööriistaks sügavusega töötamisel. Iga näide on kopeeritud päris projektidest ja kasutusvalmis.

💡 Kiirülevaade:

• box-shadow'i süntaksi lahtivõtmine, et see esimese korraga meelde jääks
• 13 kasutusvalmis näidet: vaevumärgatavast piirjoonest mitmekihilise värvilise kumani
• Kolm viisi CSS-i HTML-i lisamiseks ja millal igaüht kasutada
• Korduma kippuvad küsimused: jõudlus, filter drop-shadow, Chrome'i inspektor ja neumorfism

Mis on box-shadow ja kuidas see töötab

box-shadow omadus lisab elemendile ühe või mitu varju. Erinevalt border'ist ei mõjuta vari dokumendivoogu ega suurenda ploki mõõtmeid; see joonistatakse „väljapoole", elemendi piiridest kaugemale.

Täielik süntaks:

1
box-shadow: offset-x offset-y blur-radius spread-radius color;

Iga parameetri lahtiseletus:

• offset-x, horisontaalne nihe. Positiivne väärtus nihutab varju paremale, negatiivne vasakule.
• offset-y, vertikaalne nihe. Positiivne liigutab varju alla, negatiivne üles. Need on ainsad kaks kohustuslikku parameetrit.
• blur-radius, hägususe raadius. Mida suurem väärtus, seda pehmem ja laiem on vari. Vaikimisi on 0, mis tähendab teravate servadega varju.
• spread-radius, leviku raadius. Positiivne väärtus laiendab varju väljapoole, negatiivne tõmbab sissepoole kokku. Kasulik border'ita piirjoonte simuleerimiseks.
• color, värv mis tahes formaadis: hex, rgb(), rgba(), hsl(). Läbipaistvus rgba() või hsla() kaudu annab kõige loomulikumad varjud.

Nipp seisneb selles, et saad edastada mitu väärtust, eraldatuna komadega. Just see avabki ukse allpool kirjeldatud tehnikatele: iga järgnev vari nimekirjas kihistatakse eelmise peale.

1. Vaevumärgatav vari kolmel küljel

Minimalistlik vari, mis lisab sügavust, kuid ei karju tähelepanu järele. Ideaalne tootekaardidele, artiklieelvaadetele ja mis tahes plokkidele heledal taustal.

1
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Ainult allapoole suunatud 8px nihe ja suur 24px hägusus loovad hõljuva ploki efekti. Läbipaistvus 0,2 muudab varju valgel taustal vaevumärgatavaks, täpselt piisavalt, et silm end mugavalt tunneks.

2. Kerge vari igal küljel

Kui plokk vajab varju ühtlaselt ümber kogu perimeetri, näiteks modaalakna või kohtspikri jaoks.

1
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Nulline horisontaalne nihe ja 0px leviku raadius jaotavad varju sümmeetriliselt. Suur hägususe raadius (29px) muudab ülemineku sujuvaks. Värv rgba(100, 100, 111, ...) annab jaheda halli tooni; valgel taustal näeb see parem välja kui puhas must.

3. Õhuke vari paremale ja alla

Klassikaline „kõrgendatud" efekt. Töötab nuppude, hõljumisolekuga kaartide ja iga elemendi puhul, mis peaks tunduma kombatav.

1
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Väikesed nihke väärtused (umbes 2px) ja väike hägusus loovad terava, peaaegu vektorgraafika sarnase varju. Sobib hästi kokku transform: translateY(-2px)'iga hõljumisel; vari „liigub" koos plokiga, võimendades tõstmise efekti.

4. Rikkalik vari igal küljel

Juhtudeks, kui element peab taustast märgatavalt eristuma: hero-sektsioonid, olulise sisuga kaardid, bännerid.

1
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Kõrge läbipaistvus (0,35) ja väike hägusus (15px) annavad tugeva, loetava varju. Nullise horisontaalse nihkega asetseb see ühtlaselt; plokk näeb välja, nagu hõljuks lehe kohal.

5. Hajus mitmekihiline vari

Viis varjukihti koostöös: üks sügav kiht taustast eraldamiseks, ülejäänud pehmeks hajutamiseks külgedel.

1
box-shadow:
2
  rgba(0, 0, 0, 0.25) 0px 54px 55px,
3
  rgba(0, 0, 0, 0.12) 0px -12px 30px,
4
  rgba(0, 0, 0, 0.12) 0px 4px 6px,
5
  rgba(0, 0, 0, 0.17) 0px 12px 13px,
6
  rgba(0, 0, 0, 0.09) 0px -3px 5px;

Esimene kiht on peamine vari allapoole (54px, läbipaistvus 0,25). Teine on kerge vari ülespoole (negatiivne nihe -12px). Ülejäänud viimistlevad servi. Koos loovad nad keeruka, realistliku valguse-ja-varju mustri, nagu füüsilisel objektil hajutatud valguses.

6. Õhuke piirjoon sisevarjuga

Kaks varju loovad illusiooni õhukesest piirjoonest (border), lisades samal ajal ka sügavust. Mitte ühtegi border'it koodis.

1
box-shadow:
2
  rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
3
  rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
4
  rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Kolme kihi lahtiseletus:

• Esiteks „piirjoon": nulline nihe ja hägusus, 2px leviku raadius imiteerib border: 2px solid'i.
• Teiseks peamine vari allapoole mahu andmiseks.
• Kolmandaks valge inset vari ülalt, andes esiletõste (klaasiefekt).

7. Vari vasakule ja alla

Ebastandardne suund: vari langeb vasakule ja veidi alla. Näeb hea välja paremasse serva joondatud elementidel või asümmeetrilise kompositsiooni loomiseks.

1
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Negatiivne horisontaalne nihe (-4px) saadab varju vasakule. Negatiivne leviku raadius (-6px) tõmbab varju sissepoole, muutes selle plokist endast kompaktsemaks; see ei „turrita" servadest välja.

8. Kahepoolne vari: valgus ülalt vasakult, vari alt paremalt

Suunatud valgusallika simuleerimine, justkui paistaks lamp ülemisest vasakust nurgast.

1
box-shadow:
2
  rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
3
  rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Esimene kiht on sinakas vari (rgba(136, 165, 191, ...)) paremale ja alla. Teine on valge „highlight" vasakule ja üles (negatiivsed nihked, kõrge läbipaistmatus). Koos loovad need realistliku kolmemõõtmelise efekti; plokk näeb välja, nagu oleks see valgustatud softbox'iga.

9. Värviline helendav ääris

Üksainus vari nullnihke ja hägususega, kuid positiivse levikuraadiusega, tekitab elemendi ümber korraliku värvilise kuma.

1
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Sinine kuma (rgba(3, 102, 214, ...)) 3px raadiusega. Ideaalne fookuses olevatele sisenditele (:focus), aktiivsetele nuppudele ja praeguse menüüelemendi esiletõstmiseks. Asenda värv rgba(220, 38, 38, 0.3) vastu ja saad valideerimisvea esiletõstu.

10. Topelt sisemine vari „vajutatud" efekti jaoks

Kaks inset kihti loovad sügava nõgusa efekti. Sobib tekstuursetele taustadele, vajutatud nuppudele ja dekoratiivpaneelidele.

1
box-shadow:
2
  rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
3
  rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Märksõna inset liigutab varju elemendi sisse. Esimene kiht on lai vari ülalt. Teine on tumedam ja kokkusurutum, samuti ülalt. Negatiivne levikuraadius (-12px, -18px) takistab varjudel kogu plokki täitmast; servad jäävad heledaks, samal ajal kui keskosa on süvistatud.

11. Värviline varjude „kaskaad" allapoole

Viis sama värvi kihti kasvava nihkega loovad mitmekihilise värvilise varjuefekti, nagu Material Design, kuid heledam.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 0px 5px,
3
  rgba(240, 46, 170, 0.3) 0px 10px,
4
  rgba(240, 46, 170, 0.2) 0px 15px,
5
  rgba(240, 46, 170, 0.1) 0px 20px,
6
  rgba(240, 46, 170, 0.05) 0px 25px;

Iga järgnev kiht on nihutatud 5px võrra kaugemale ja madalama läbipaistmatusega. Hägusust pole määratud, seega on varjud teravad, nagu vektortriibud. See tekitab ploki taha ereda neoonjälje. Asenda roosa oma brändivärviga, et saada äratuntav aktsent.

12. Värviline „kaskaad" paremale ja alla

Sama tehnika, kuid horisontaalse nihkega; vari liigub diagonaalselt.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 5px 5px,
3
  rgba(240, 46, 170, 0.3) 10px 10px,
4
  rgba(240, 46, 170, 0.2) 15px 15px,
5
  rgba(240, 46, 170, 0.1) 20px 20px,
6
  rgba(240, 46, 170, 0.05) 25px 25px;

Diagonaalne kaskaad loob liikumistunde paremale ja alla. Näeb suurepärane välja nuppudel hõljumisel; plokk justkui „libiseb" oma varju taha.

13. Hajus vari tihedusgradiendiga

Viis kihti, kus iga järgnev nihe kahekordistub (2px, 4px, 8px, 16px, 32px), samal ajal kui läbipaistmatus jääb samaks. Tulemuseks on sujuva tihedusgradiendiga vari, kollektsiooni kõige realistlikum.

1
box-shadow:
2
  rgba(0, 0, 0, 0.09) 0px 2px 1px,
3
  rgba(0, 0, 0, 0.09) 0px 4px 2px,
4
  rgba(0, 0, 0, 0.09) 0px 8px 4px,
5
  rgba(0, 0, 0, 0.09) 0px 16px 8px,
6
  rgba(0, 0, 0, 0.09) 0px 32px 16px;

Iga kihi väike hägusus (1px, 2px, 4px, 8px, 16px) kasvab proportsionaalselt nihkega. See tekitab füüsiliselt täpse hajumise; vari „hajub" kaugusega, nagu päris maailmas. Ideaalne kaartidele, mis peavad välja nägema võimalikult loomulikud.

Kolm viisi CSS-i HTML-i lisamiseks

Kui lõik on valitud, tuleb see lehele lisada. CSS pakub kolme võimalust ja igal on oma nišš.

Sisemine CSS

Reeglid paigutatakse <style> sildi sisse HTML-dokumendi <head> osas. Sobib ühelehelistele saitidele ja kiiretele prototüüpidele; kõik on ühes failis.

1
<html lang="ru">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow — примеры</title>
5
  <style>
6
    .card {
7
      display: block;
8
      margin: 0 auto;
9
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
10
    }
11
  </style>
12
</head>
13
<body>
14
  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
15
</body>
16
</html>

Puuduseks on see, et brauser ei salvesta stiile eraldi vahemällu ja neid ei saa teistel lehtedel taaskasutada.

Sisene CSS

Stiilid kirjutatakse otse HTML-elemendi style atribuuti. Kiireim viis stiilide jooksvalt rakendamiseks, kuid ka kõige ebamugavam hallata.

1
<img
2
  src="screenshot.jpg"
3
  alt="Пример карточки с тенью"
4
  style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin: 0 auto;"
5
>

Kasuta siseseid stiile valikuliselt: dünaamiliste väärtuste jaoks JavaScriptist, e-kirjade kujunduses (kus meilikliendid eemaldavad sageli välised stiililehed) ja kriitilise CSS-i puhul „esmapildis nähtava osa" jaoks.

Väline CSS

Reeglid viiakse eraldi .css faili ja lingitakse <link> sildi kaudu. See on standard iga projekti puhul, mis on keerukam kui üks leht.

Fail styles.css:

1
.card {
2
  display: block;
3
  margin: 0 auto;
4
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
5
}

HTML-dokument:

1
<html lang="ru">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow — примеры</title>
5
  <link rel="stylesheet" href="styles.css">
6
</head>
7
<body>
8
  <img class="card" src="screenshot.jpg" alt="Пример карточки с тенью">
9
</body>
10
</html>

Väline CSS salvestatakse brauseri vahemällu, seda on lihtne hallata ja see on skaleeritav. Kõigil kolmel juhul on renderdamise tulemus sama; vali meetod oma projekti arhitektuuri põhjal.

Lühike, kuid sisutihe video (8 minutit): autor näitab, kuidas asendada lamedad hallid varjud gradientse kumaga, kiht-kihilt, selgitades iga parameetrit.

⁉️🤔 Korduma kippuvad küsimused

Mis vahe on box-shadow'il ja filter: drop-shadow()'il?

box-shadow järgib elemendi piirdekasti kuju, mis on alati ristkülik. filter: drop-shadow() järgib alfakanalit ja jälgib tegelikku kuju: läbipaistvusega PNG puhul järgib vari objekti kontuuri, mitte ristkülikukujulist raami. Seetõttu on drop-shadow() hädavajalik väljalõigatud taustaga piltide, ikoonide ja SVG-de puhul. Kuid see töötab aeglasemalt, sest brauser analüüsib piksleid, mitte ploki geomeetriat.

Mitu box-shadow kihti saab määrata ilma jõudlust kaotamata?

Formaalset piirangut ei ole, kuid praktiline lagi tavalisel seadmel on 10-15 kihti. Sellest rohkem hakkad märkama kaadrisageduse langust kerimisel ja animatsioonides, eriti mobiilseadmetes. Põhjus on selles, et iga kiht nõuab eraldi renderduskäiku. Animeeritud elementide puhul piira end 2-3 kihiga ja kasuta will-change: box-shadow; see annab brauserile vihje viia element eraldi komposiitkihile.

Kuidas vaadata ja siluda box-shadow'i Chrome'i DevToolsis?

Ava DevTools (F12), vali element Elements vahekaardil ja leia paremal Styles paneelil box-shadow omadus. Klõpsa väärtuse kõrval oleval värviruudu ikoonil; avaneb visuaalne varjuredaktor liuguritega offset-x, offset-y, blur ja spread jaoks. Saad hiirega väärtusi muuta ja tulemust kohe näha. Mitmekihiliste varjude puhul muudetakse iga kihti eraldi; need on loetletud samas väljas, eraldatuna komadega.

Mis on neumorfism ja kuidas seda box-shadow'iga saavutada?

Neumorfism on visuaalne stiil, kus elemendid näevad välja, nagu oleksid need „vormitud" samast materjalist nagu taust. See saavutatakse kahe varjuga: hele vari ülevalt vasakult ja tume vari alt paremalt (nagu tehnikas nr 8). Peamine tingimus on, et lehe taust ja elemendi värv peavad ühtima või olema väga lähedased. Näide heleda teema jaoks:

1
> .neuromorphic {
2
>   background: #e0e0e0;
3
>   box-shadow:
4
>     8px 8px 16px #bebebe,
5
>     -8px -8px 16px #ffffff;
6
> }
7
> 
8
 
9
 markdown 
10
 
11
The style is striking but controversial from an accessibility standpoint: low contrast makes elements hard to distinguish for people with visual impairments. Use sparingly and be sure to check contrast.
12
 
13
**Can you use box-shadow to render shapes without a div?**
14
 
15
> Yes, and this is a separate genre of CSS art. Since `box-shadow` supports an unlimited number of layers, each with its own coordinates and color, you can "draw" pixel art with a single `box-shadow` on a single `div`. The technique works like this: each layer with a 1px × N offset and zero blur is one "pixel." Hundreds of layers combine into an image. Generators like [CSS Box Shadow Generator](https://getcssscan.com/css-box-shadow-examples) automate the process, but for production this is more of a novelty; SVG will do the job more efficiently.
16
 
17
## Which shadow should you choose for your project?
18
 
19
The thirteen techniques above cover the full spectrum: from an unobtrusive shadow for modest cards to a bold neon cascade. The key skill here is not memorizing all the snippets but understanding the logic of the parameters; then you can assemble the right shadow for the task faster than you can find a ready-made one.
20
 
21
A quick guide:
22
 
23
- Need depth without visual noise? Use techniques **1-3** (barely visible single shadows).
24
- Want realistic "hovering" above the page? **5** (multi-layered diffused) or **13** (density gradient).
25
- Want to highlight an interactive element with color? **9** (colored border) or **11-12** (colored cascade).
26
- Simulating pressed or glass effect? **6** and **10** (inset shadows).
27
- Need neumorphism? **8** (two-sided shadow) plus a background matching the element.
28
 
29
Bookmark this page as a cheat sheet. And if you create your own signature shadow recipe, test it on real devices: the same shadow can look completely different on a Retina display and on a budget office monitor.