Мигающая рамка для текста - красивый элемент дизайна

← html-цвета для сайта | Новогодний клипарт для ваших сайтов →

Мигающая разноцветная рамка для текста

Сегодняшний материал будет посвящен оформлению страниц сайта либо блога. Например, чтобы привлечь внимание посетителей каким-то важным сообщением, можно текст сообщения поместить в мигающую разноцветную рамку. Как это выглядит в работе, вы видите ниже.

Рамка при мигании меняет цвет каждую секунду. Выбрать цвета для рамки и установить интервал между миганием вы можете самостоятельно.

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

Ниже приведен код этой рамки, в который вам придется внести небольшие изменения: указать цвет, интервал мигания, толщину рамки и ваш текст. А теперь обо все по порядку...

ШАГ 1. Копируем код и вставляем его в Блокнот.

Шаг 2. Вставленный в Блокнот код начинаем редактировать. Для этого в строке, выделенной синим цветом, меняем только цифру, если вас не устраивает исходный вариант мигания. Интервал мигания указывается в секундах. Цифра 1 в коде указывает, что мигание происходит каждую секунду. Если устраивает, оставляем все как есть и переходим к следующему участку кода.

Зеленым выделены цвета рамки, которые появляются при мигании. Там прописаны синий, красный и зеленый, вы же указываете свои цвета. Как определить код того или иного цвета, я уже писала в этом материале. Кто еще не ознакомился с ним, милости прошу почитать. Там все предельно просто. Полученные коды каждого цвета вписываете вместо указанных в исходном коде и переходим к последнему участку кода.

Он выделен розовым цветом и отвечает за толщину рамки вокруг вашего текста. Исходная толщина - 4 пикселя. Если вы хотите изменить ее, то укажите иную цифру. Для более тонкой рамки подойдет значение 2 пикселя, а для более массивной рамки, содержащей большое сообщение, можно и увеличить до 6 пикселей.

И последний фрагмент кода выделен красным цветом - это сам текст вашего сообщения. Здесь вместо моего текста вы вписываете свой. И еще, чуть не забыла - рамка автоматически растягивается под размер вашего сообщения.

Специальное предложение для посетителей сайта. Новогодние акции!!!!!!

var nowColor = -1;

var sleepTime = 1000;

var sColors = new Array(

"#ff0000",

"#00ff00",

"#0000ff"

);

// tableColor - id таблицы

setInterval("changeBorderColor(tableColor, sColors)", sleepTime)

function changeBorderColor(objStyle, sColors)

{

nowColor++;

if (nowColor >= sColors.length)

nowColor = 0;

objStyle.style.borderColor = sColors[nowColor];

}

</script>

<tr>

<td>Специальное предложение

для посетителей сайта.

Новогодние акции!!!!!!</td>

</tr>

</table>

И в завершение даю дополнительную информацию для тех, кто захочет оформить сам текст, находящийся внутри рамки, например, изменить цвет или размер шрифта, сделать его подчеркнутым или полужирным.

Для этого воспользуйтесь нужными тегами из списка приведенных:

<u>Ваш текст</u> - данный тег сделает ваш текст подчеркнутым;

<b>Ваш текст</b> - этот тег делает текст полужирным;

<big>Ваш текст</big> - с помощью этого тега получите текст полужирный крупный;

<i>Ваш текст</i> - таким образом текст станет курсивом;

Чтобы произвести выравнивание текста - помогут следующие теги:

<div align=right> Ваш текст </div> - производит выравнивание по правому краю;

<div align=justify> Ваш текст </div> - производит выравнивание по всей ширине текста;

<center>Ваш текст или картинка</center> - выполняет центрирование.

Чтобы изменить шрифт, размер и цвет текста можно воспользоваться тегом span:

<span style="font-family:Arial Black;color:fuchsia;font-size:25px">Ваш текст</span> ,

где font-family - название шрифта, color - цвет шрифта, font-size - размер шрифта.

Куда вставлять строку с нужным тегом, спросите вы? Для тех, кто далек даже от азов программирования, показываю пример. Например, я хочу изменить размер и цвет шрифта, а также сам текст сообщения в рамке. Для этого вношу изменения в теге span - вместо 25px я пишу 18px , а цвет указываю red (красный). Надпись тоже вписываю другую.

Получится следующая строка:

<span style="font-family:Arial Black;color:red;font-size:18px">С Новым 2014 годом! Всем счастья и процветания!</span>

Теперь эту строку вставляем между <td> и </td> в часть кода, начинающуюся с table (она в самом конце) таким образом:

<tr>

<td>

<span style="font-family:Arial Black;color:red;font-size:18px">С Новым 2014 годом! Всем счастья и процветания! Удачных проектов!!!

</span>

</td>

</tr>

</table>

В результате текстовая запись в рамке изменит цвет шрифта, размер и сам текст записи. И будет выглядеть так.

Это всего лишь скриншот рамки после произведенных изменений.

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

На этом урок заканчиваю и желаю всем удачных дизайнерских решений для ваших сайтов! С ув. Светлана (SvetLana_TSV)

Не жадничаем, делимся информацией с друзьями!

Добро пожаловать в проект "Сайт с нуля" !

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

Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

Всем желаю удачи и смелых воплощений идей на вашем сайте !

Проект для новичков

Пошаговое руководство для новичков по созданию,

раскрутке и монетизации собственного сайта.

WebPageMaker, Wordpress, Joomla - инструкции для

новичков по установке CMS и шаблонов к ним.

2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.

Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.