Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  четверг, сентября 01, 2011  

Добавляем неоновую тень к заголовкам
Для тех, кто озабочен привнесением в блог некоторых плодово-ягодных изюминок могу поделиться одной небольшой забавой, способной украсить любой текст вашего блога.

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

Пример такого эффекта вы можете посмотреть ниже. Наиболее красочно неон смотрится на темном фоне.

BloggaRolla
BloggaRolla
BloggaRolla
BloggaRolla
BloggaRolla
BloggaRolla

Однако не все браузеры способны оценить все прелести данного эффекта. Весьма оригинальная программка Internet Explorer не поддерживает свойство тени у текста, таким же калеченным в этом отношении оказывается  и недавно вышедший "шедевр" от компании MicrosoftIE 9. Во многих остальных браузерах тень отображается корректно.

Код неоновой тени для текста выглядит так:
text-shadow: 0 0 0.3em #BB6006, 0 0 0.3em #BB6006, 0 0 0.3em #BB6006;
Здесь вы можете по своему желанию изменить цвет тени и ее толщину.
Первое изменение производится с помощью замены кода цвета, в данном случае - #BB6006, на выбранное вами, а второе - с помощью регулирования отрезка 0.3em, чем больше это значение, тем гуще свечение. Максимальное значение может быть задано только до 1. При выставлении толщины в единицу текст приобретает эффект небольшого граффити. Для подбора нужного цвета советую воспользоваться удобным онлайн-генератором цветов HTML, не покидая пределов этого блога.

Таким образом, появляется возможность задать любому заголовку в блоге оригинальный дизайн.

Подробнее о привнесении эффекта тени в текст шаблона.

Мы рассмотрим несколько вариантов росписи. Перед началом каждого из них необходимо проследовать: Дизайн > Изменить HTML, дабы добраться до шаблона блога и начать там военные действия, и сотворить резервную копию шаблона для успокоения совести.

1. Неоновая тень для заглавной надписи блога:
Для этого добавляем указанную выше строку кода после отрезка #header h1 { и сохраняем шаблон.

2. Неоновая тень для заголовков виджетов боковой колонки:
Для этого добавляем строку с кодом после отрезка .sidebar h2 { и сохраняем шаблон.

3. Неоновая тень для заголовков сообщений:
Для этого добавляем код тени после отрезка .post h3 { и сохраняем шаблон.

Чтобы избавиться от неона в блоге, просто удалите вписанную строку из шаблона.

Помимо заголовков, придать тексту пикантность можно непосредственно в теле публикуемой статьи. Для этого достаточно перейти во вкладку "Изменить HTML" при создании сообщения и обернуть нужный участок текста в следующие теги:
<span style="text-shadow: 0 0 0.3em #BB6006, 0 0 0.3em #BB6006, 0 0 0.3em #BB6006;">Отображаемый текст</span>
На этом наша небольшая иллюминация заканчивается. Занавес.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.