Neko

Példa doboz a lap alján kóddal :)

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.

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:

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

Kombinálva az előbbi kettőt:

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

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:

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:

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:

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:

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 */;

Példa doboz:

IDE JÖN A SZÖVEG!!!

Példa kód:

Doboz kódja:
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; height: 0px;" class="module">
    <tbody>
        <tr>
            <td class="box">
            <p><span> IDE JÖN A SZÖVEGED!!!</span></p>
            </td>
        </tr>
    </tbody>
</table>

CSS kódja:
<style type="text/css">
.box { /* modul tartalmi része */
    -moz-border-radius: 1.3em 0em 1.3em 0em;
    -webkit-border-radius: 1.3em 0em 1.3em 0em;
    font-size: 11px;
    font-style: normal;
    line-height: 15px;
    text-align: justify;
    color: #000000;
    border: 0px solid #e3dfd7;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    background-color: #FDFDFD;
    background-position: center bottom;
    background-repeat: repeat-x;
    font-family: "Trebuchet MS";
    -moz-box-shadow: 0 0 5px #FF5522, 0 0 8px #FF5522, 0 0 8px #FF5522, 0 0 8px #FF5522, 8px 8px 15px #000000, 0 0 5px #FF5522 inset, 0 0 8px #FF5522 inset;
    -webkit-box-shadow: 0 0 5px #FF5522, 0 0 8px #FF5522, 0 0 8px #FF5522, 0 0 8px #FF5522, 8px 8px 15px #000000, 0 0 5px #FF5522 inset, 0 0 8px #FF5522 inset;
}
-->
</style>

LindaDesign