Foi de Stil Web
Indrumari si Trucuri CSS

Umbre cazute

CSS2 nu are o proprietate de adugare a umbrei la o cutie. Puteti incerca sa adaugati o granita spre dreapta si in jos dar nu va arata corespunzator. Totusi, daca aveti doua elemente imbricate, il puteti utiliza pe cel din exterior ca o umbra pentru cel din interior. De exemplu, daca aveti un text ca acesta (HTML):

<div class=back>
  <div class=section>
    <h2>Die Rose duftet - doch ob sie empfindet</h2>
    <address>Heinrich Heine (1797-1856)</address>

    <p>Die Rose duftet - doch ob sie empfindet<br>
    ...
  </div>
</div>

puteti utiliza DIV-ul din exterior ca o umbra pentru cel din interior. Rezultatul ar putea arata ca aceasta pagina separata. Mai intai, dati lui BODY un fundal (light green - verde deschis - in acest exemplu), DIV-ul din exterior un fundal ceva mai inchis (green-gray = verde gri) si DIV-ul din interior un alt fundal (de ex. yellow-white = galben-alb):

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Apoi, prin utilizarea marginilor si a spatiului interior, deplasati DIV-ul din interior putin spre stanga si in sus fata de DIV-ul exterior:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

Trebuie deasemenea sa mutati DIV-ul exterior putin spre dreapta. Si daca aveti sectiuni multiple, probabil vreti niste spatii intre ele, deasemenea:

div.back {margin: 3em 0 3em 5em}

Asta-i tot. Puteti adauga o granita in jurul DIV-ului interior daca doriti. Veti dori probabil ceva spatiu in interiorul lui, de ex.:

div.section {border: thin solid #999; padding: 1.5em}

desigur, puteti varia dimensiunea umbrei dupa gustul dumneavoastra.

Umbrele textului

CSS are o proprietate de adaugare a umbrei la text. Ea are patru argumente: culoarea umbrei, deplasare orizontala (pozitiv inseamna spre dreapta), deplasare verticala (pozitiv inseamna in jos) si estomparea (0 inseamna o umbra neestompata).De exemplu:

h3 { text-shadow: red 0.2em 0.3em 0.2em }