Уеб Стыле Схеетс
CSS типс & Трицкс

Текст сенке

CSS Level 3 има имовину зове 'text-shadow'за додавање сена на сваку писму неки текст. У свом најједноставнији облик, то изгледа отприлике овако:

h3 {text-shadow: 0.1em 0.1em #333}

Који додаје тамно сиве (# 333) схадоу мало у десно (0.1ем) и доле (0.1ем) у односу на нормални текст. Резултат изгледа овако:

(Као што је августа 2005, а не свим прегледачима у потпуности подржати 'text-shadow' ыет. Наведена би требало да раде барем у Safar и Konqueror.)

Фуззы текст схадоу

Најједноставнији облик је 'text-shadow' имовину има два дела: у боји (као што је # 333 горе) и оффсет (0.1ем 0.1ем у примеру горе). То резултате у оштре сенке на оффсет назначено. Али оффсет може бити помућен, што је резултирало у више или мање замаглили сена.

Износ мутноћа даје као други оффсет. Овде су две линије, једна уз мало мутноћа (0.05) и један са пуно (0.2ем):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

Текст читљив бела

Сена може направити више читати текст ако је контраст између плану и позадини је мала. Овде је пример од бијелог текста против бледо плавој позадини, најпре без сенке, а затим са:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Вишеструки сенке

Такође можете имати више од једног сена. У принципу, то изгледа прилично чудно:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

Али, са два добро постављене и тамно свијетло сјене, утицај може бити користан:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

То је мало опасно, као што можете видети ако ваш прегледач не подржава 'text-shadow'. У ствари, боје позадине и текста у овом примеру су скоро исти (# CCCCCC # D1D1D1 а), тако да без сенке, ту је било који једва контраст.

Цртање слова као обрисе

На пример две сенке од претходних верзија може се узети чак и даље. Са четири сенке, слова могу да се даје Оутлине:

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

То није савршен обрис, а у овом тренутку (аугуст 2005), расправа да ли је још увек отворен CSS требало би да има засебну имовину (или можда неку вредност за 'text-decoration') како би могао боље обрисе.

Неон сјај

Ако сте ставили фуззы сена иза текста, тј са нула оффсет, учинак је стварање ужарити око слова. Ако се сијати од једне сенке није довољно интензиван, само поновите исту сјену неколико пута:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}

CSS ресурси

• Colors Style Sheet
• CSS Page Loading Times
• CSS Navigational Headings
• CSS tutorial
• CSS Background properties
• Creating Menus with CSS
• Style sheets for handheld devices