Здравствуйте друзья и читатели. Очень мне нравится все переливающее, мигающее, в разумных пределах конечно. Сегодня создадим плавно переливающийся разными цветами, и светящийся на фоне текст. Два варианта оформления:
Пример 1
<style>
#wash {
background-color:#;
border:px solid #03b4cc;
padding:10px;
-webkit-animation: wash 1s linear infinite;
animation: wash 1s linear infinite;
font-weight: bold;
font-size:18px;
color: #ff9900;
text-shadow: 0 0 5px #f8f8ff, 0 0 7px #f8f8ff;
}
@-webkit-keyframes wash {
0% { color: #ff9900; }
50% { color: #0a9e08; }
100% { color: #ff9900; }
}
@keyframes wash {
0% { color: #ff9900; }
50% { color: #0a9e08; }
100% { color: #ff9900; }
}
</style>
<br />
<div id="wash">
<center>
<i>Здесь текст</i></center>
</div>
Настройки: все, что выделено жирным, можно изменить на cвой вкус и цвет. 1s. это скорость переливающего цвета текста. Выделено зеленым, <i></i>-наклонный текст, <center></center> по центру. При желании измените процент преобладающего цвета.
В стиль CSS я вставила цвет фона и границу рамки (выделено сиреневым). У меня нулевые значения, если будет желание оформить в рамку, вставьте код цвета фона, форму и размер границы рамки.
Пример 2
Будьте здоровы и счастливы ближайшие 100 лет!
<style>
@-webkit-keyframes shine {
50% { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff; }
}
@keyframes shine {
50% { color: #fff; text-shadow: 0 -1px rgba(0,0,0,.3), 0 0 5px #ffd, 0 0 8px #fff; }
}
#shine{
color: rgb(245,245,245);
text-shadow: 0 -1px rgba(0,0,0,.1);
padding:15px 10px 0 15px;
font-size:25px;
background: #03b4cc;
height: 45px;
-webkit-animation: shine 1.2s linear infinite;
animation: shine 1.2s linear infinite;
}</style>
<br />
<div id="shine">
<i>Здесь пишем текст</i></div>
<br />
<div id="shine">
<i>Здесь пишем текст</i></div>
Текст можно оформить на отдельной странице в блоге или установить гаджетом. Для страниц в редакторе блоггер вставьте по вкладке HTML стили CSS в конце статьи.
Или в шаблон изменить шаблон выше строки ]]></b:skin> вставьте CSS без <style></style>, просмотрите и сохраните шаблон.
Далее нужный текст на странице или в гаджете заключить <div id="shine">здесь текст</div>. Для обоих вариантов.
Для гаджетов создайте текст активной ссылкой, обязательно привлечет внимание посетителей. Информация в статье по ссылке.
Для гаджетов создайте текст активной ссылкой, обязательно привлечет внимание посетителей. Информация в статье по ссылке.
На сегодня все, спасибо за визит. Все вопросы в комментариях. Всего доброго.
Читайте также:
Читайте также:
Рекомендуемый контент:
Доброго времени суток Оленька! Очень интересно и привлекательно смотрится! Жалко только что я никак не могу разобраться в кодах шаблона...после того как сломала один раз, еле восстановила, то больше уже не лезу..
ОтветитьУдалитьВаля здравствуй. Можно и без шаблона применить. Вставь добавить гаджет, сохрани в сайдбаре, или над/под сообщением.
УдалитьЕще как вариант, на странице сообщения, по вкладке HTML.