388x60 Ads

Создание тени для текста при помощи CSS3

Создание тени для текста при помощи CSS3
Здравствуйте, уважаемые читатели блога БЛОGГЕР!

Все мы знаем давнее выражение: "Навести тень на плетень".

В этой публикации я вам расскажу об этой самой тени. Мы рассмотрим возможности создания тени к тексту вашего блога.

Эффект добавления тени к тексту достигается с помощью свойства "text-shadow" CSS3.

Это свойство поддерживают все основные браузеры, кроме Internet Explorer.

Значение по умолчанию: нет.
Наследование: да.
Версия: CSS3.
JavaScript синтаксис: object.style.textShadow = "3px 3px # ff0000".

Синтаксис:
text-shadow: h-shadow v-shadow blur color;

h-shadow - обязательный параметр. Положение горизонтальной тени. Отрицательные значения допустимы.
v-shadow - обязательный параметр. Положение вертикальной тени. Отрицательные значения допустимы.
blur - необязательно.Расстояние размытия.
color - необязательно.Цвет теней. Цвета поддерживаемые во всех браузерах.

Ниже рассмотрим несколько примеров использования свойства  "text-shadow" CSS3 для создания тени текста.





БЛОGГЕР

HTML:
<center><h3 class="shadow1">БЛОGГЕР</h3></center>
CSS:
.shadow1 {font-size:2.5em; text-shadow: 5px 5px 0 #9ACD32;}






БЛОGГЕР

HTML:
<center><h3 class="shadow2">БЛОGГЕР</h3></center>
CSS:
.shadow2 {font-size:2.5em; text-shadow: 5px 5px 5px #9ACD32;}


В первых двух примерах примерах, все значения показателей тени практически одинаковы за исключением значения blur. Чем больше значение показателя blur, тем больше эффект размытия тени.





БЛОGГЕР

HTML:
<center><h3 class="shadow3">БЛОGГЕР</h3></center>
CSS:
.shadow3 {font-size:2.5em; color: #f2f2f2; text-shadow: 5px 5px 3px #A9A9A9;}






БЛОGГЕР

HTML:
<center><h3 class="shadow4">БЛОGГЕР</h3></center>
CSS:
.shadow4 {font-size:2.5em; text-shadow: 0 -2px 1px #9ACD32;}






БЛОGГЕР

HTML:
<center><h2 class="shadow5">БЛОGГЕР</h2></center>
CSS:
.shadow5 {font-size:2.5em; color:black; text-shadow: 0 2px 2px #8a8a8a;}

Надеюсь, эта публикация поможет вам в оформлении вашего блога.

Да пребудет с вами сила!

Ваш БЛОGГЕР




Подпишитесь В закладки НапечататьPrint Friendly and PDF


Вячеслав Вареня
Статус: seo-специалист | Контакты


10 коммент.:

Innkassy комментирует... [Ответить]

Интересно. Читала об этом в другом блоге, но у вас намного подробнее описано, как и что делать.
Вообще, выделять текст таким образом, конечно, гораздо эффектнее, чем просто подчеркивать или менять цвет. Жаль не везде это можно применить.

Татьяна комментирует... [Ответить]

А можно ли поменять цвет текста комментариев на блоге? Выбрала для блога тёмный шаблон и всё в нём отлично выходит, кроме комментариев - на них цвет текста чёрный, сливаются с цветом шаблона и ничего не видно.Помогите пожалуйста, очень нравится шаблон.Вопрос жизни и смерти!
Цвет текста нужен белый или лучше желтоватый, горчичный такой.

БЛОGГЕР комментирует... [Ответить]

@Татьяна

Думаю можно. Дайте ссылку на шаблон.

БЛОGГЕР комментирует... [Ответить]

@Татьяна

Вам нужно найти в шаблоне что то на подобии skin['CONTENT_TEXT_COLOR'] = "#000000";

и заменить на skin['CONTENT_TEXT_COLOR'] = "#C0AE8E";

Но это заменит только цвет контента блока. Еще нужно будет поменять цвет ссылок.

Татьяна комментирует... [Ответить]

@БЛОGГЕР
Дико извиняюсь ,я неверно указала проблему. С коментами на блоге всё окей, но их не видно в виджете последних комментариев, который стоит в боковой части шаблона. В виджете текст чёрного цвета.

БЛОGГЕР комментирует... [Ответить]

А вы можете дать ссылку на скачивание шаблона? Так мне будет проще.

aldous комментирует... [Ответить]

"С коментами на блоге всё окей, но их не видно в виджете последних комментариев"
В css нужно создать блок для id виджета и прописать color c font-family.

Татьяна комментирует... [Ответить]

@БЛОGГЕР
Шаблоны я беру отсюда
http://btemplates.com/page/60/
Но там 383 страницы и я конечно не помню, с какой взяла этот шаблон.
Не поняла, для чего шаблон блога, если проблема в виджете последних комментариев от блоггера?

Татьяна комментирует... [Ответить]

В связи с невозможностью изменения настроек гугловского виджета, решила исправить положение кнопкой RSS для комментариев.Саму кнопку правда я делать не умею, да и куда её вставить, тоже надо знать. Попробую просто поставить где нить ссылку RSS комменты. Если бы кто нибудь научил, как без особых знаний исправить вот такие вот недочёты гугла.... Надо же посетителям как то выходить на свежие комментарии, вне зависимости от шаблона и от капризов гугла.

БЛОGГЕР комментирует... [Ответить]

Завтра попробуем на основе Yahoo Pipes смастерить свой виджет. У меня на сайте http://www.auditconsult.biz/ так выводятся последние темы.