Что ж, настало время побаловать вас короткими, но, надеюсь, кому-то полезными постами. Сегодня, например, рассмотрим случай, когда вам необходимо сделать текст на сайте вдавленным. Ну, знаете, как в Mac OS X. Для этого нам всего-то и нужно, что подцепить к странице стиль. Поехали.
1. Имеется html страница подобного содержания:
<head>
<title>Вдавленный текст</title></head>
<body>
<link href="style.css" type="text/css" rel="stylesheet">
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, libero non viverra fringilla, justo nisl convallis odio, rhoncus ultricies metus ante consequat nisl. Vestibulum pellentesque eros ac ipsum vehicula imperdiet. Donec luctus nisl leo, a euismod tortor. Curabitur condimentum nunc eu erat auctor et laoreet velit pulvinar. Ut eleifend urna facilisis tortor vulputate dapibus pretium sapien tincidunt. Duis sapien augue, elementum nec mattis aliquam, dignissim in nunc. Suspendisse fermentum posuere nisl, at venenatis eros tincidunt at. Pellentesque tincidunt mollis enim, id rutrum lorem scelerisque in. Sed a fermentum sapien. Donec arcu neque, rutrum malesuada sodales a, venenatis et eros.</div>
</body>
где <title> - заголовок страницы,
<link href="style.css" type="text/css" rel="stylesheet"> - указание файла style.css, который и поможет нам в решении поставленной задачи
2. Файл style.css такого содержания:
#text {
tetx-shadow: #777777 0px 1px 0px;
color: gray;
font-size: 14px;
}
Итого:
Что мы сделали?
За обсуждаемый эффект отвечает text-shadow. Как следует из названия, он задаёт тень тексту
- #777777 - это цвет тени
- первые значание 0px - сдвиг по оси x
- 1px - сдвиг по оси y
- последнее значение 0px - радиус размытия
Значения могут быть как положительными, так и отрицательными. Поэкспериментируйте сами, уверяю, вам понравится.
Множественные тени также возможны. Например, для тега p:
p { text-shadow:1px 1px 1px #000, 3px 3px 5px #0f0; }
Положительные значения дают отброс тени вправо и вниз. Отрицательные - влево и вверх.
Какие значения может принимать text-shadow?
- none - отменяет добавление тени.
- цвет - цвет тени. По умолчанию тени совпадает с цветом текста.
- сдвиг по x - смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
- сдвиг по y - смещение тени по вертикали относительно текста. Отрицательное значение поднимает тень выше текста. Обязательный параметр.
- радиус - задает радиус размытия тени. Чем больше значение, тем сильнее тень сглаживается, становится шире и светлее. Вид в раных браузерах может отличаться
0 коммент.: (+add yours?)
Отправить комментарий
Примечание. Отправлять комментарии могут только участники этого блога.