б р а у зер ах отличаю тся, п оэтом у вид тени м ож ет
несколько различаться в зави сим ости от заданны х
парам етров сглаживания.
Цвет тени м ож но указывать в лю бом доступном
C SS ф ор м ате. По умолчанию цвет тени сов п адает
с цветом текста. Это необязательны й парам етр.
Д авай те п оп робуем сдел ать простенькую четкую
тень. HTML-код для н ее б у д ет выглядеть так:
<div s t y le - ’font-size: 26рх; font-w eight: bold; text-
shadow : Зрх Зрх # 8 8 8 ” ЗА Г О Л О В О К 1</div>
.......
.
.
.
.
.
.
.
.
..
.
.
.
.
.
.
.
.
..
.
.
..
.
.
.
.
.
.__
.
.
.
..
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.I
Рис. 2
ство text-sh ad ow только с версии 10. В зам ен и с-
пользуется свойство filter: S h ad ow (параметры ).
Тень для изображений и не только
Д О ,
М с
2
Вы глядит
уж е
и н т е р е с н е е
обы чн ого
тек ста
(р и с . 1). А как б у д ет выглядеть размы тая тень?
К од такой:
<div style= ”font-size: 26рх; font-w eight: bold; text-
shadow : Зрх Зрх Зрх # 8 8 8 ”>ЗАГОЛОВОК 2< /d iv>
Ну, вот уж е с о в с ем д р у го е д е л о (р и с . 2 ).
Д опускается указывать несколько парам етров т е -
ни, разделяя их м еж ду со б о й запятой. В C SS3 учи-
тывается следую щ ий порядок: первая тень в сп и с-
ке р азм ещ ается на сам ом верху, последняя в
списке - в сам ом низу. В C SS 2 порядок на-
/
оборот: первая тень р азм ещ ается в сам ом (
низу, а последняя на сам ом верху.
А давай те проявим нем ного ф антазии и
\
сд е л а е м небольш ую белую обводку вокруг
*—
текста, конечно, путем создан и я бел ой тени,
и добави м вторую размытую тень си н его цвета:
<div style= ”.
..text-shad ow :
1рх 1рх 0 #FFF, 2рх
2р х 2рх #00Г З А Г О Л О В О К 3< /d iv>
У нас получился (р и с . 3) ещ е один элегантный
стиль заголовка ;) Так можно играться с тенью
сколь угодно, накладывая несколько теней к о д -
ному и тому ж е тексту, и
получая
р а зн о о б р а зн ы е
эф ф екты .
Нужно
лишь
подключить фантазию .
ЗАГОЛОВОК3
I
Рис j
Что касается бр аузер ов , то зам ечу, что тени п о д -
держ иваю тся начиная с версий Internet Explorer 10,
C hrom e 2, Opera 9 .5 , Safari 1.1, Firefox 3.5. Opera
п оддер ж и вает д о 6 -9 парам етров тени. Повыш е-
ние этого значения, а также увеличение радиуса р аз-
мытия свыш е ЮОрх сказывается на производитель-
ности браузера. Opera вер-
сии
9 .5 -1 0
и сп ол ь зует
о т о б р а ж ен и е
нескольких
теней, как в C SS2.
Safari д о версии 4 .0 п о д -
дер ж и вает только один парам етр тени, остальны е
игнорирую тся. И только с версии 4 .0 работает уже
м нож ество теней. Internet Explorer поним ает свой-
овож у д о ваш его сведенья, что тень можно
д ел а т ь не только для текста, но и для л ю бо-
го другого эл ем ента блочного типа - это и зобр аж е-
ния, DIV и другие элем енты прямоугольной формы .
В таких случаях сл ед у ет прим енять свой ство
b o x -s h a d o w .
Д оп усти м о использовать несколько
тен ей , указывая их параметры ч ер ез запятую,
при налож ении тен ей первая тень в сп и ск е б у -
д ет выше, последняя ниже.
Если для элем ента задается радиус скругле-
ния ч ер ез свойство border-radius (о нем пойдет
речь ниже), то тень также получится с закруглен-
ными уголками. С ледует учитывать, что добавлен и е
тени увеличивает ширину элем ента, поэтом у в о з-
можно появление горизонтальной полосы прокрут-
ки в бр аузер е. Ф ормат свойства такой:
box-shadow: тень1, тень2,.
..
Г
д е тень м ож ет отсутствовать (значение
п о п е )
или содерж ать перечисленны е ч ер ез пробел
параметры: inset Ссдвиг по х> <сдви г по у> < ради -
ус размы тия> <растяж ен и е> <цвет>.
П ервы й
н ео б я за т е л ь н ы й
п а р а м е т р
м ож ет
,
им еть зн ач ен и е
in s e t,
что застав и т тень вы во-
ди ться внутри эл ем ен т а .
В торой обязател ьны й п арам етр
- с м е щ е н и е тени по гор и -
зонтали отн оси тел ьн о
эл ем ен т а . П олож ительное
зн а ен и е эт о го п ар ам етр а з а -
д а е т сдв и г тени вправо, от р и -
ц ател ь н ое - влево.
Д а л е е обязательны й п ар а-
м етр - см е щ е н и е тени по
вертикали относи тельн о
эл ем ен т а . П олож ительное
зн ач ен и е за д а е т сдв и г тени
вниз, отр и ц ател ьн ое - вверх.
С ледую щ ий н еобя зател ь н ы й п ар ам етр за д а е т
р а д и у с разм ы тия тен и . Ч ем б ол ь ш е эт о зн а ч е -
н и е, т ем си л ь н ее тен ь сгл аж и в ается , стан ови тся
ш ир е и с в е т л е е . Если этот п ар ам етр н е за д а н ,
по ум олчанию устан ав л и в ается равны м 0, тень
при эт о м б у д е т четкой, а н е разм ы той.
З а ним сл ед у ет необязательны й парам етр, по-
л ож и тел ь н ое зн а ч ен и е к отор ого р астяги вает
тень, от р и ц ател ь н ое,
н а о б о р о т , е е сж и м ает.
Если этот парам етр не за д а н ,
по умолчанию
устанавливается 0, при этом тень б у д ет того ж е
р азм ер а, что и эл ем ент.
Зам ы к ает н еобязател ьн ы й п ар ам етр цвета т е -
ни. По ум олчанию тень черная.
Д опускается указывать несколько тен ей , р а зд е-
предыдущая страница 36 Компьютер 2013 04 читать онлайн следующая страница 38 Компьютер 2013 04 читать онлайн Домой Выключить/включить текст