Красивая заглавная буква и бегущая строка HTML

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

Забегая вперёд, предупрежу, что сделать красивую заглавную букву, только тегами html — не получится.

Можно конечно применить атрибут style (что я тоже покажу), и заполнить его различными свойствами, но такой код применять не рекомендуется, хотя он прекрасно работает и проходит валидацию.

Поэтому, после отладки, все свойства из атрибута style, лучше перенести в файл style.css, а элементу (красивой заглавной букве), задавать class.

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

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
#yau{
color:#0000FF;
font-size:30px;
font-family:"Monotype Corsiva";
}
p{
text-indent:30px;
}
</style>
</head>
<body>
<p><span id="yau">Г</span>де искать Бога, и откуда ждать дьявола?
Да только в себе самом, и из себя самого! Туточки они оба.
А то - небеса-а-а, подземелья.</p>

</body>
</html>

Результат.

Где искать Бога, и откуда ждать дьявола? Да только в себе самом. Туточки они, оба. А то — небеса-а-а-а, подземелья.

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

После чего, как я уже говорил, все свойства нужно будет перенести в файл style.css.

<p style="text-indent:30px;"><span style="color:#0000FF; font-size:30px; font-family:Monotype Corsiva;">Г</span>де искать Бога, и откуда ждать дьявола?
Да только в себе самом. Туточки они оба. А то небеса-а-а-а, подземелья.</p>

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

<span style = "font-size: 50px;"><font face="Monotype Corsiva">
<font color="#0000FF">Г</font></font></span>де искать Бога, и откуда ждать дьявола?
Да только в себе самом. Туточки они оба.
А то небеса-а-а-а, подземелья.

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

Дело в том, что декоративных шрифтов, обладающих кроссбраузерностью, в интернете нет.

«Monotype Corsiva» из семейства cursive, который я указал в коде, пожалуй единственный шрифт с заявкой на декоративность, который отобразится в большинстве браузеров.

Чтобы решить эту проблему, и выбрать что-то оригинальное, Вам нужно прочитать статью Шрифты для сайта в CSS.

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

Как сделать красивую заглавную букву, сразу для всех абзацев статьи, можно узнать в статье Как сделать красивую заглавную букву CSS

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

<marquee></marquee> — создаёт бегущую строку.

Посмотрим, как изменяется скорость, направление движения, длина беговой дорожки, и ещё кое-какие параметры.

Направление движения бегущей строки задаётся атрибутом direction. В значении указывается направление движения объекта.

left — движение влево;
right — движение вправо;
ur — движение снизу вверх;
down — движение сверху вниз;

Длина беговой дорожки, при движении по горизонтали, определяется атрибутом width, а при движении по вертикали — атрибутом height, и внедряется в тег атрибутом style.

Бежим слева направо

<marquee style="width: 300px" direction="right">Бежим слева направо</marquee>

Бежим справа налево

<marquee style="width: 300px" direction="left">Бежим справа налево</marquee>

Бежим снизу вверх

<marquee style="height:100px;" direction="up">Бежим снизу вверх</marquee>

Бежим сверху вниз

<marquee  style="height:100px;" direction="down">Бежим сверху вниз</marquee>

Можно окрасить полосу в любой цвет, добавив атрибут bgcolor

<marquee style="width: 300px" bgcolor="#39c4b3" direction="right">Бежим справа налево</marquee>

Можно сделать, чтобы элемент вышел из-за границы окна и остановился, добавив атрибут behavior со значением slide.

<marquee style="width: 300px" bgcolor="#39c4b3" direction="right" behavior="slide">Выходим и останавливаемся</marquee>

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

<marquee style="width: 300px" bgcolor="#39c4b3" direction="right" scrollamount="1">Изменяем скорость движения</marquee>

Дальше, бегущей строке, можно задать различные варианты оформления, добавляя свойства в атрибут style.

И фон, и цвет, и рамку, но так же, как и в случае с красивой заглавной буквой, после отладки, все свойства лучше будет перенести в файл style.css.

Можно вставить в тег, вместо текста, любое изображение, и оно тоже станет «бегущим».

К сожалению, не знаю почему, тег maqruee не включён в спецификацию w3c, и является не валидным.

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

Привожу лишь код различных вариантов бегущей строки.

Желаю творческих успехов!

Неужели не осталось вопросов? Спросить


Перемена

-Сынок, а у вас в садике уже топят?
-Нет, пока только в угол ставят!

— Мам, а как узнать про собачку болеет она или нет?
— По носу!
— Мам, нет у нее поносу.

Кнопка HTML. < < < В раздел > > > Создание директории сайта

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.

4 комментария на «Красивая заглавная буква и бегущая строка HTML»

  1. Александр говорит:

    Нет!
    Вопросов не осталось… Хорошо пояснили!
    ))
    Ещё бы интернет пошустрее, что выдерживал все эти примочки.

  2. Роман говорит:

    Применил несколько.

  3. Светлана говорит:

    Спасибо за эти коды, и с новым годом.

  4. Роман говорит:

    Да, хорошие кодики.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *