Mi a franc az a spread?

Ezt rejtegette előlem a box-shadow…

Sajnálatos módon - ciki vagy nem - még csak most jöttem rá mennyire király a spread¹ ha box-shadow-t használunk. Ezt a 4. tulajdonságot Codepenen próbálgattam tegnap. (Lent be is lesz illesztve!)

Kiterjedés

Valahogy így lehetne szabadfordítani ezt a funkciót. Megtalálható Photoshopban, Sketchben meg mindenféle szerkesztő programban a Drop Shadow layer style-ban. (Az Inner Shadowban choke van!)

Mit akar ez jelenteni? A spreaddel megadhatjuk, hogy hol kezdődjön az árnyék elhalványulása. Magyarul egy plusz ráhagyás. Nézzünk egy példát rá CSSben, ahol rendre ezeket jelentik a megadott értékek.

box-shadow: 0px 5px 20px 20px blue;

1. X offset érték
2. Y offset érték
3. Blur mértéke
4. Spread mértéke
5. Szín, átlátszóság

Ha a spread = 20px akkor az azt jelenti, hogy az árnyékot 10pixellell kiterjesztjük és a 20px-es blur csak ezután fog következni.

Ezért aztán felmerült bennem a kérdés, hogy inkább egy “plusz méret” opcióként kellene felfogni a spreadet. Ugyanis használhatjuk erre is, ha a box shadowban csak spread értéket adunk meg.

Megadhatunk negatív értéket is CSSsel. A képszerkesztő programokban viszont nem. (sajnos) Ezzel az eredeti árnyékunk méretét csökkenthetjük.

Miért jó ez nekünk?

Azért, mert a méretekkel játszva jól érzékeltethetjük a térbeli mozgásokat. Ez nagyon hasznos tud lenni pl. material designhoz, hiszen nagyon élethű árnyékokat készíthetünk hoverre.

Egy másik trükkös felhasználási módja lehet szaggatott vonalas munkáknál, ha ezt beljebb szeretnénk kicsit kezdeni.

.coupon
  background: LightSeaGreen
  border: 1px dashed white
  box-shadow: 0px 0px 0px 4px LightSeaGreen

Ez csak néhány ötlet volt, hogy miket lehet csinálni egy kis fantáziával. Kísérletezzetek és nézzétek meg a pent is! 👨‍💻

A végeredmény:

See the Pen Box shadow playground by Soma Szoboszlai (@szsoma) on CodePen.