Раскрутка, монетизация…. совсем забыл, что мой блог частично посвящен и веб дизайну, поэтому сегодняшний пост я посвящу именно ему!
Хотите знать, как при помощи CSS добиться эффекта отбрасывания тени? Как сделать пунктирное подчеркивание? Как расположить один текст поверх другого? Как сделать текст жирнее или как заставить текст светиться? Тогда читаем далее!

Начну по порядку.

1. Как при помощи CSS добиться эффекта отбрасывания тени?
Стоит сразу обратить Ваше внимание на то, что не все браузеры поддерживают данные css модификации… раньше 6 ишак точно не понимал, что от него хотят… а сейчас может уже и все браузеры понимают… Но если Вы ориентируетесь под пользователей браузера FireFox, то смело применяйте данный трюк.

Отбрасывать тень будем на примере заголовков H2 моего блога. В файле css стилей пишем:

h2 { font: normal 24px Georgia,serif;
text-shadow: 1px 1px #fff; color:#b14934}

И получаем

Kharikein CSS test

 

2. Как при помощи CSS добиться эффекта свечения?
Для того, чтобы сделать свечение текста, нужно указать нулевые отступы, величину размытия и цвет свечения:

h2 {font: normal 24px Georgia,serif;
text-shadow: 0 0 5px #000; color:#FFF;}

и получаем

Kharikein CSS test

Как видите, при помощи этого трюка можно сделать светлый текст читаемым на светлом фоне и, самое главное, индексируемым поисковыми роботами!

Если Вы хотите сделать более интенсивное свечение, просто продублируйте:

h2 {font: normal 24px Georgia,serif;
text-shadow: 0 0 5px #000, 0 0 5px #000; color:#FFF;}

 

3. Как сделать пунктирное подчеркивание?
Для начала для всех ссылок этого блока убираем подчеркивание

a, a:hover {text-decoration:none;}

Теперь пропишем само пунктирное подчеркивание, которое я реализую при помощи атрибута border-bottom

a {border-bottom: 1px dashed #b14934;}

И получаем:
Kharikein CSS test

 

4. Как расположить один текст поверх другого?
Использовать будем свойство стиля: Z-index, который применяется только к позиционированным элементам. Для этого, напишем стиль для div блоков:

#layer1, #layer2 {
position: relative; /* Относительное позиционирование */
#layer1 { z-index: 1; }
#layer2 { z-index: 2;
top: -30px; /* Сдвигаем текст вверх */
left: 15px; /* Сдвигаем текст вправо */}

и получаем

Соответственно, чем больше аргумент z-index – тем выше будет расположен слой.
Не забывайте использовать данное свойство при написании выпадающих меню на CSS

 

5. Как сделать текст жирнее?
Нет смысла много расписывать – делается все одной строкой стиля:

h2 {font-weight:bold;}

Kharikein CSS test

 

На сегодня у меня по CSS все. Больше не помню, как я модифицирую текст при помощи стилей.
Если Вам есть, что добавить – пишите в комментариях. И не забывайте подписаться на RSS!

• Консультирую по созданию сайтов бесплатно
• Выпадающее меню на CSS
• Урок создания дизайна для коммерческого сайта
• Изменения в дизайне и юзабилити блога
• Дизайн “шапки” этого блога