Каскадныя табліцы стыляў
CSS рады & прыёмы

Адкідванне ценяў

CSS2 не валодае ўласцівасцю дадаваць цень да блока. Вы можаце паспрабаваць дадаць аблямоўку справа і ўнізе, але гэта не будзе выглядаць правільна. Аднак, калі ў вас ёсць два наступных элемента, вы можаце выкарыстаць наружны для ўнутранага. Напрыклад, калі ў вас ёсць падобны тэкст (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>

вы можаце выкарыстаць наружны DIV у якасці ценю для ўнутранага. Вынік павінен выглядаць як гэтая асобная старонка. Спачатку задайце асноўнаму элементу фон (на прыкладзе - светла-зялёны), наружны DIV зрабіце трохі цямней фону (зялёна-шэры) і ўнутраны DIV выдатным ад фону (напрыклад, жоўта-белы):

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

Затым пры дапамозе margin і padding вынесіце ўнутраны DIV трохі налева і ўверх ад наружнага DIV:

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

Вам таксама трэба перамясціць наружны DIV трохі направа. Калі ў вас шматслойныя секцыі, вы магчыма, захочаце пакінуць паміж імі трохі месца:

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

Вось як яно выглядае. Вы таксама можаце дадаць аблямоўку вакол унутранага DIV, калі жадаеце. Вы таксама, магчыма, захочаце зрабіць заліўку ўсярэдзіне, напрыклад:

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

Зразумела, вы можаце змяняць памер ценяў на ваш густ.

Цені тэксту

CSS сапраўды валодае ўласцівасцю дадаваць цені да тэксту. У яго чатыры параметру: колер ценю, гарызантальны водступ (пазітыўны - направа), вертыкальны водступ (пазітыўны - уніз) і размыццё (0 - рэзкі цень). Напрыклад:

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