Бегущая строка– в веб-дизайне является элементом для привлечения внимания, чаще всего используется в рекламных целях. Бегущая строка это текст или картинка, которая движется, слева направо, справа налево или вверх вниз.
В бегущую строку можно вставить новости, объявления, приветствие, скидки, картинку… Отобразить текущее время и дату и другую интересную и нужную информацию.
- Как сделать бегущую строку html
- Бегущая строка в html с картинками
- Как вставить ссылку в бегущую строку
- Цветовые обозначения
Содержание
Как сделать бегущую строку html на сайте
Сделать бегущую строку для сайта не составит большого труда и времени. Что бы заставить текст двигаться без фотошопа был разработан и создан тег html <marquee>. Сначала только браузер Internet Explorer обрабатывал и поддерживал тег, но затем и все остальные браузеры стали его поддерживать.
Что самое приятное и удивительное это очень маленький и коротенький тег, который приводит в движение не только текст, но и картинки. Чудеса да и только!
Если вам надо, что бы текст двигался справа, можете воспользоваться простеньким кодом:
<marquee>Тут вставляем текст бегущей строки</marquee>В принципе, бегущую строку можно вставить куда угодно: в футер, сайдбар, под шапкой блога или в саму шапку.
Можно настроить бегущую строку, добавив стили и атрибуты. По умолчанию бегущая строка движется только справа налево, но чтобы изменить направление строки, надо к тегу добавить атрибут direction со значением right:
<marquee direction="right">Бегущая строка cлева направо</marquee>Что бы текст не исчезал за границы и двигался туда-сюда, нужно добавить атрибут behavior со значением alternate:
<marquee behavior="alternate">Бегущая строка перемещается между краями</marquee>Цветная бегущая строка перемещающаяся между правым и левым краем:
<marquee behavior="alternate" bgcolor="#e20b0b" direction="right" style="color: #fff; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Туда-сюда на цветном фоне</marquee>Бегущая строка останавливается при наведении:
<marquee onmouseout="this.start()" onmouseover="this.stop()"><span style="color: red;"><b>Бегущая строка останавливается при наведении</b></span></marquee>Если добавить стили css и украсить нашу бегущую строку, то получится цветная бегущая строка, как на примере:
<marquee style="color:#470dd9; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Цветная бегущая строка</marquee>Цветная бегущая строка движется слева направо:
<marquee direction="right" style="color: #ad0dd9; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Цветная бегущая строка слева направо</marquee>Настройки стиля:
color: #ad0dd9 – цвет текста бегущей строки
font-size: 20px – размер шрифта
font-weight: bolder – вес шрифта
text-shadow: #000000 0px 1px 1px; – цвет и размер тени шрифта
bgcolor=“#e20b0b” – цвет фона строки
line-height: 150% – высота строки
Сделаем бегущую строку на цветном фоне:
<marquee bgcolor="#ffd700">Бегущая строка на цветном фоне</marquee>Чтобы бегущая строка двигалась снизу вверх добавим атрибут direction со значением up:
<marquee direction="up" style="color:#f2132d; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка снизу вверх</marquee>И сразу же добавим еще один атрибут heigh и настроим высоту блока:
<marquee height="150" direction="up" style="color:#0F9D58; font-size: 30px; font-weight: bolder; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>А теперь заставим бегущую строку двигаться сверху вниз. К атрибуту direction добавим значение down:
<marquee height="150" direction="down" style="color:#1C3850; font-size: 30px; font-weight: bolder; text-shadow: #000000 0px 1px 1px;">Бегущая строка сверху вниз</marquee>Что бы регулировать скорость прокрутки бегущей строки добавим атрибут scrolldelay:
<marquee scrolldelay="60" style="color:#0F9D58; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>Настройка:
scrolldelay=”60″ – изменяем цифры и устанавливаем свою скорость прокрутки
Что бы указать границы блока добавим к стилям рамочку, добавим атрибуты width и height.
height – это высота блока
width – ширина блока
scrollamount – атрибут который влияет на скорость движения, чем выше число тем быстрее движется текст.
<marquee direction="down" height="150" width="300" scrollamount="3" style="border: 2px solid #000000; text-align: center; color: #f2132d; font-size: 30px; font-weight: bolder; text-shadow: #000000 0px 1px 1px;">Бегущая строка в рамочке</marquee>Сделаем бегущую строку в рамочке на цветном фоне, добавим атрибут bgcolor:
<marquee bgcolor="#e20b0b" direction="down" height="150" width="300" scrollamount="2" style="border: 2px solid #000000; text-align: center; color: #fbfbfc; font-size: 30px; font-weight: bolder; text-shadow: #000000 0px 1px 1px;">Бегущая строка в рамочке на цветном фоне</marquee>Бегущая строка в html с картинками
Картинка движется справа налево:
<marquee><img src="Ссылка на картинку" /></marquee>Картинка в бегущей строке слева направо:
<marquee direction="right"><img src="Ссылка на картинку" /></marquee>Картинка сверху вниз (если изменить на direction=”up”, то будет снизу вверх):
<marquee height="150" direction="down"><img src="ссылка на картинку" /></marquee>Снизу вверх и изменяем скорость:
<marquee scrollamount="10" direction="up"><img src="ссылка на картинку" /></marquee>Изображение и текст в бегущей строке:
<marquee behavior="scroll" direction="left" ><img src="Ссылка на изображение">Очень рада вас видеть на своем сайте!</marquee>Как вставить ссылку в бегущую строку
<marquee> Текст перед ссылкой <a href="url адрес ссылки" title="Всплывающий текст при наведении курсора на ссылку">Анкор (текст ссылки)</a></marquee>Цветовые обозначения
- 111 – тег бегущей строки
- 111 – атрибут отвечающий за направление
- 111 – еще один атрибут отвечающий за направление
- 111 – эти части кода отвечают за фон
- 111 – стиль текста
- 111 – скорость прокрутки
Отзывов: 2