Тень текста заголовка ссылок цитат в blogger используя CSS



Здравствуйте друзья, читатели и гости. Сегодня у меня для Вас статья по теме дизайна. Заинтересовалась я оформлением текста, заголовка и ссылок на страницах, используя тень. Почему бы не реализовать такую красоту в наших блогах.

Кто не знает, с помощью вот этого простого свойства text-shadow (тень текста) можно оформить разные запоминающиеся эффекты.

text-shadow: 4px 4px 8px blackпервое значение-смещение по горизонтали; второе-смещение по вертикали; третье-уровень размытия текста; четвертое-цвет тени.

Чтобы иметь представление, сходите в тестовый блог. Там я оформила всё, что можно. Обратите внимание на заголовок, описание блога, текст в постах, на виджеты в сайдбаре, ссылки. Только дождитесь загрузки, он у меня от примеров уже еле дышит.

Начнем с заголовка блога

.Header h1 { text-shadow: 4px 4px 8px black; rgba(0, 0, 0, 0.3);

Для описания

.Header .description { text-shadow: 4px 4px 8px black;  font-size: 110%;}

Для всего контента блога, включая заголовок, описание, ссылки, сайдбар, footer, текст в сообщениях:
.content-outer {text-shadow: 4px 4px 8px black;}

Текст только в постах

.post-body { font-size: 110%;text-shadow: 3px 3px 7px #808080;}

Заголовки в гаджетах

.sidebar .widget h2 {text-shadow: 3px 3px 7px #808080;}

Для всех ссылок в блоге

a:link {text-shadow: 4px 4px 8px black;}

Ссылки одного виджета

#HTML15 a:link {text-shadow: 3px 3px 7px #808080;}

Для цитаты

blockquote {font-size:110%;text-shadow: 4px 4px 8px #808080;}

Выделение важного участка текста на странице

<span style="text-shadow: 4px 4px 8px black;">Здесь текст</span>

Стиль CSS для оформления нужного элемента можно вставить: шаблон изменить шаблон выше строки ]]></b:skin> (делайте резервную копию, кто не уверен в своих знаниях). 

Лучше конечно в шаблоне найти стили CSS для заголовка (Header); ссылок (a:link) и.т.д и вставить CSS стиль тени текста в нужные элементы. Смотрите скриншот

Можно вставить дизайн добавить гаджет: <style>CSS тени элемента</style>.

Для отдельной страницы (выделить цитату или ссылки): в редакторе сообщений перейти по вкладке HTML и вставить в конце статьи: <style>CSS тени элемента</style>.

В кодах CSS font-size:110%; можно удалить, это размер шрифта. Во всех шаблонах присутствует строка rgba (0, 0, 0, 0.3); не удаляйте. Свойство rgba добавляет уровень прозрачности при определении тени. Фантазируйте, меняйте цветовые коды или пишите нужный цвет на английском.

Несколько примеров оформления текста для заголовка, описания блога или цитаты

Вдавленный текст      text-shadow: -1px -1px #666, 1px 1px #FFF;color:#03b4cc;

Контур текста   text-shadow:-1px 0 black,0 1px black,1px 0 black,0-1px black;color:#ddcca3;

Только тень                  text-shadow: black 0 0 10 px;color: #03b4cc;

Объемный текст   text-shadow:1px 1px 3px #666,-1px-1px 3px#FFF,1px 1px #666,-1px-1px #FFF;color:#03b4cc;

Разные оттенки текста      text-shadow:3px 3px 10px red,-3px -3px 10px #03b4cc;color: #101921;

Посмотрела в других браузерах свой демо блог, с тенью оформленного текста. В Yandex браузере, Firefox, Опере все нормально. В ИЕ не работает ничего, не только оформленный текст, все криво.

На сегодня у меня все. На все вопросы отвечу в комментариях или обращайтесь через контактную форму. Всего доброго.

Посмотрите еще статьи по теме дизайна

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 3/11/2016 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *