Bert
BosДакумент створаны 4 жніўня 2005;
Апошнія змены $Date: 2007/07/20 16:18:41 $ GMT
(Гэтая старонка выкарыстоўвае каскадныя табліцы стыляў CSS)
Дадзены дакумент з'яўляецца перакладам артыкула "Web Style Sheets CSS
tips & tricks".
Арыгінальная версія якога існуе толькі на сайце W3C http://www.w3.org/Style/Examples/007/text-shadow.html
Дадзены пераклад не з'яўляецца афіцыйным дакументам W3C.
Усе Аўтарскія Правы Належаць W3C.
Дадзены дакумент можа ўтрымоўваць памылкі перакладу і памылкі друку.
Аўтар: Аляксей Пятроў ( усе пераклады ) Дзякуй за падтрымку: Чорны Квадрат
Узровень 3 CSS валодае ўласцівасцю 'text-shadow' для дадання цені на кожную літару любога тэксту. У сваёй найпростай форме гэта выглядае так:
h3 {text-shadow: 0.1em 0.1em #333}
што дадае цёмна-шэрую (#333) цень трохі направа (0.1em) і ўніз (0.1em) адносна тэксту. Вынік выглядае наступным чынам:
(Яшчэ не ўсе браўзэры жніўня 2005 цалкам падтрымліваюць 'text-shadow'. Дадзены вышэй прыклад павінен працаваць як мінімум на Safari і Konqueror.)
Найпростая форма ўласцівасці 'text-shadow' мае дзве часткі: колер (як #333 вышэй) і водступ (0.1em 0.1em у прыкладзе, дадзеным вышэй). Гэта прыводзіць да рэзкага ценю на бачным водступе. Але водступ можа таксама зрабіць змазаным, што прывядзе да больш або меншь змазанага ценю.
Ступень размытасці прадстаўлена, як іншы водступ. Вось дзве лініі, адна з невялікай размытасцю (0.05em) і другая - з большай (0.2em):
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}