Árnyék a dobozokon

Ha szeretnél olyan árnyékot tenni a dobozaidra amilyet idáig csak photoshop-ban vagy egyéb profi képszerkesztőben tudtál akkor ezt a cikket megéri elolvasni.

Tartalom

A kódért olvass tovább!





A kód mindösszesen ennyi:

-moz-box-shadow: 0px 0px 3px #000000/* CSS by srmark */;


Lássuk hozzá a magyarázatot:
Kék rész: Az árnyék pozíciója vízszintesen, ennyi pixellel tolja el az árnyékot a dobozhoz képest, ha jobbra akarod tolni akkor növeld a számot, ha balra akkor csökkentsd, ekkor negatív számot írj:

-moz-box-shadow: -10px 0px 5px #EE2222/* CSS by srmark */;

-moz-box-shadow: 0px 0px 5px #EE2222/* CSS by srmark */;

-moz-box-shadow: 10px 0px 5px #EE2222/* CSS by srmark */;

Zöld rész: ugyanaz mint a kék, csak itt a függőleges pozíciót határozza meg:

-moz-box-shadow: 0px -10px 5px #EE2222/* CSS by srmark */;

-moz-box-shadow: 0px 0px 5px #EE2222/* CSS by srmark */;

-moz-box-shadow: 0px 10px 5px #EE2222/* CSS by srmark */;

Kombinálva az előbbi kettőt:

-moz-box-shadow: -10px -10px 5px #EE2222/* CSS by srmark */;

-moz-box-shadow: 10px 10px 5px #EE2222/* CSS by srmark */;

Narancssárga rész: meghatározza az árnyék méretét példák:

-moz-box-shadow: 2px 2px 0px #EE2222/* CSS by srmark */;

-moz-box-shadow: 2px 2px 0px #EE2222/* CSS by srmark */;

-moz-box-shadow: 0px 0px 3px #EE2222/* CSS by srmark */;

-moz-box-shadow: 0px 0px 6px #EE2222/* CSS by srmark */;

-moz-box-shadow: 0px 0px 15px #EE2222/* CSS by srmark */;

Piros  rész: ez a rész pedig az árnyék színét állítja be, erre külön példát nem mutatok mert ezt mindenki érti.

Lehetőség van árnyékok halmozására is, tehát egy dobozra több réteg árnyékot tenni, pl ahogy a focistáknak is a kivilágított stadionba, a dobozunknak is lehet akár 4 árnyékra is egyszerre, de ne essünk túlzásba mert a túl sok árnyék nem mindig mutat jól, és ha túl sok van belőle az oldal lassúvá válhat, az árnyékok halmozását egy vesszővel elválasztva lehet megoldani így:

-moz-box-shadow: -10px -10px 0px #EE2222,  10px 10px 0px #EE2222/* CSS by srmark */;

Ezzel a halmozással el lehet érni hogy erőteljesebb, vastagabb legyen az árnyék, ha 3-4 réteget ráteszünk egy dobozra:

-moz-box-shadow: 0px 0px 5px #EE2222, 0px 0px 8px #EE2222, 0px 0px 15px #EE2222, 0px 0px 20px #EE2222/* CSS by srmark */;

Ezt csak ritkán használjuk mert az oldalt lassíthatja.


Nem csak az dobozon kívülre, hanem a doboz belsejébe is lehet tenni árnyékot, ekkor a kódba bele kell írnunk azt hogy inset, példák:

-moz-box-shadow: inset 0px 0px 5px #EE2222/* CSS by srmark */;

-moz-box-shadow: inset 0px 0px 8px #EE2222/* CSS by srmark */;

-moz-box-shadow: inset 0px 0px 12px #EE2222/* CSS by srmark */;

-moz-box-shadow: inset 0px 0px 5px #EE2222, inset 0px 0px 15px #EE2222/* CSS by srmark */;

-moz-box-shadow: inset 0px 0px 15px #EE2222, inset 0px 0px 25px #EE2222/* CSS by srmark */;

Ezek voltak az alapok egyenként, ha ezt megértetted akkor jöhetnek a bonyolultabb kombinációk amivel már egészen "photoshopos" kinézete lehet egy doboznak:

-moz-box-shadow: 0 0 5px #222222, 0 0 8px #222222, 0 0 12px #222222, 0 0 5px #222222 inset/* CSS by srmark */;

-moz-box-shadow: 0 0 5px #222222, 0 0 8px #222222, 0 0 12px #222222, 0 0 20px #222222, 0 0 5px #222222 inset, 0 0 8px #222222 inset/* CSS by srmark */;

-moz-box-shadow: 0 0 5px #222222, 0 0 8px #222222, 0 0 12px #222222, 0 0 20px #222222, 15px 15px 30px #222222, 0 0 5px #222222 inset, 0 0 8px #222222 inset/* CSS by srmark */;

-moz-box-shadow: 0 0 5px #222222, 0 0 8px #222222, 0 0 12px #222222, 0 0 20px #222222, 0px 0px 35px #22DD33, 0px 0px 40px #22DD33, 0 0 5px #222222 inset, 0 0 8px #222222 inset/* CSS by srmark */;

-moz-box-shadow: 0 0 5px #222222, 0 0 8px #222222, 0 0 12px #222222, 0 0 20px #222222, 15px 15px 30px #22DD33, 0 0 5px #222222 inset, 0 0 8px #222222 inset/* CSS by srmark */;

-moz-box-shadow: 0 0 5px #FF5522, 0 0 8px #FF5522, 0 0 12px #FF5522, 0 0 20px #FF5522, 15px 15px 30px #000000, 0 0 5px #FF5522 inset, 0 0 8px #FF5522 inset/* CSS by srmark */;

A böngészőket illetően a kód ezen verziója jelenleg kompatibilis a Mozilla Firefox 3.5-ös vagy annál újabb verziójával, de ha a kódban az összes "moz" részt átírjuk "webkit"-re akkor a kód használható a Safari és a Chrome legújabb verzióiban is, példa:

-webkit-box-shadow: 0 0 5px #222222/* CSS by srmark */;


A kódot itt a hotdogon, és máshol is ugyanúgy tudod használni mint más kódokat, tehát az összes fenti kódhoz kell még egy vagy több szelektor, és a {} jelek is.
Néhány példa:

A magazinban lévő összes doboz (a fejléc és a lábléc kivételével) sarkaihoz:
div.box1, div.box1 * {
-moz-box-shadow: 0px 0px 10px #EE2222;
-webkit-box-shadow: 0px 0px 10px #EE2222/* CSS by srmark */;
}


A profilodon, bemutatkozás dobozra:
div#interviewBox_1 {
-moz-box-shadow: 0px 0px 10px #EE2222;-webkit-box-shadow: 0px 0px 10px #EE2222/* CSS by srmark */;}


Vagy akár az akármilyen oldaladon lévő ÖSSZES dobozra:
div, table, tbody, tr, td {
-moz-box-shadow: 0px 0px 10px #EE2222;
-webkit-box-shadow: 0px 0px 10px #EE2222/* CSS by srmark */;
}



Még több szelektort találsz ezekben a cikkekben: