Красивая заглавная буква и бегущая строка HTML
Здравствуйте уважаемые начинающие веб-мастера. В этой статье мы научимся делать красивую заглавную букву, и заставим бежать по странице любой элемент контента.
Забегая вперёд, предупрежу, что сделать красивую заглавную букву, только тегами html — не получится.
Можно конечно применить атрибут style (что я тоже покажу), и заполнить его различными свойствами, но такой код применять не рекомендуется, хотя он прекрасно работает и проходит валидацию.
Поэтому, после отладки, все свойства из атрибута style, лучше перенести в файл style.css, а элементу (красивой заглавной букве), задавать class.
Сначала посмотрим, как выглядит код заглавной буквы, созданной при помощи глобальных стилей. Тут ничего переносить и задавать не нужно.
</body><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Красивая заглавная буква</title>
<style>
/* Оформление заглавной буквы */
color:#0000FF; /* Цвет буквы */
font-size:30px; /* Размер буквы */
font-family:"Monotype Corsiva"; /* Шрифт буквы */
}
p{
text-indent:30px; /* Красная строка */
}
</style>
</head>
<body>
<!--Первую букву абзаца берём в тег span и задаём ему идентификатор (можно class) yau-->
<p><span>Г</span>де искать Бога, и откуда ждать дьявола?
Да только в себе самом, и из себя самого! Туточки они оба.
А то - небеса-а-а, подземелья.</p>
</html>
Результат.
Где искать Бога, и откуда ждать дьявола? Да только в себе самом. Туточки они, оба. А то — небеса-а-а-а, подземелья.
И то же самое, но немного по другому — встроенные стили. Такой вариант кода можно применить, для оладки красивой заглавной буквы, в редакторе TinyMCE, установленном на CMS WordPress.
После чего, как я уже говорил, все свойства нужно будет перенести в файл style.css.
<p><span>Г</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 direction="right">Бежим слева направо</marquee>
Бежим справа налево
<marquee direction="left">Бежим справа налево</marquee>
Бежим снизу вверх
<marquee direction="up">Бежим снизу вверх</marquee>
Бежим сверху вниз
<marquee style="height:100px;" direction="down">Бежим сверху вниз</marquee>
Можно окрасить полосу в любой цвет, добавив атрибут bgcolor
<marquee bgcolor="#39c4b3" direction="right">Бежим справа налево</marquee>
Можно сделать, чтобы элемент вышел из-за границы окна и остановился, добавив атрибут behavior со значением slide.
<marquee bgcolor="#39c4b3" direction="right" behavior="slide">Выходим и останавливаемся</marquee>
<marquee bgcolor="#39c4b3" direction="right" scrollamount="1">Изменяем скорость движения</marquee>
Дальше, бегущей строке, можно задать различные варианты оформления, добавляя свойства в атрибут style.
И фон, и цвет, и рамку, но так же, как и в случае с красивой заглавной буквой, после отладки, все свойства лучше будет перенести в файл style.css.
Можно вставить в тег, вместо текста, любое изображение, и оно тоже станет «бегущим».
К сожалению, не знаю почему, тег maqruee не включён в спецификацию w3c, и является не валидным.
Поэтому я не могу показать Вам тут действующие примеры, слишком много ошибок получится на одной странице.
Привожу лишь код различных вариантов бегущей строки.
Желаю творческих успехов!
Неужели не осталось вопросов? Спросить
Перемена
-Сынок, а у вас в садике уже топят?
-Нет, пока только в угол ставят!
— Мам, а как узнать про собачку болеет она или нет?
— По носу!
— Мам, нет у нее поносу.
Кнопка HTML. < < < В раздел > > > Создание директории сайта
Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.
Бегущая строка на CSS3 | Vavik96
Бегущая строка позволяет демонстрировать информацию в яркой динамической форме, используя различные спецэффекты, привлекая значительное внимание посетителей сайта. Так, например, информация может двигаться сверху вниз и снизу вверх, справа налево и слева на право, взад-вперед и обратно, медленно и быстро, пробегая только один раз, а затем оставаясь, как обычный текст. Могут поочередно печататься несколько строк.
В самом простом варианте текст просто «бежит», двигаясь справа налево.
Очень часто помимо простого текста, бегущие строки могут генерировать простейшую графику и накладывать различные эффекты на отображаемый текст.
Анимация CSS дает возможность использовать функцию определения времени анимации, которая решает, каким образом та будет развиваться до самого конца. Одна из таких функций определения времени называется steps() и позволяет назначить количество используемых анимацией кадров, она удалит привычную вам гладкую анимацию и создаст анимацию с некоторыми задержками – в точности такую, какая требуется нам для ввода текста.
С помощью функции steps() можно создать анимацию, которой потребуется всего лишь увеличивать к концу абзаца размер элемента с нуля до полного размера.
Начинаем с создания абзаца, который продемонстрирует работу анимированного процесса печати.
Анимация увеличит размер абзаца с 0 до 100%, создавая, таким образом, за 50 кадров эффект печати текста.
Посмотрите демо-пример, чтобы понять, как это смотрится.
Бегущая строка при помощи анимации на CSS3.
<p>Бегущая строка при помощи анимации на CSS3.</p>
p{
width: 100%;
white-space:nowrap;
line-height: 50px;
overflow:hidden;
font-size: 20px;
color: cornflowerblue;
-webkit-animation: step 5s steps(50) infinite;
animation: step 5s steps(50) infinite;
}
/* Анимация */
@keyframes step{
0% { width: 0;}
100% {width:100%;}
}
@-webkit-keyframes step{
0% { width: 0;}
100% {width:100%;}
} Краткая расшифровка для: p{…. animation: step 5s steps(50) infinite;}
- step – Название анимации (произвольно)
- 5s – Время анимации
- steps(50) – Количество “кадров” анимации
- infinite – Бесконечный повтор (для наглядности)
Получается как бы эффект печатающей машинки.
А теперь заставим эту строчку двигаться, для этого достаточно прописать text-align: right; или text-align: center; и строка “побежит” вправо или только до центра соответственно.
Изменения и дополнения в стилях и результат (Если анимация закончила работу – перезагрузите страницу):
p.cen {
.....
text-align: right;
/* К предыдущей записи добавилась цифра 3 - количество повторов анимации*/
-webkit-animation: cen 5s steps(50) 3;
animation: cen 5s steps(50) 3;
}
@keyframes cen{
0%{ width: 0; }
}
@-webkit-keyframes cen{
100% { width: 0; }
}Бегущая строка при помощи анимации на CSS3.
p.alternat{
.....
text-align: right;
opacity: 0;
/* 2s - время задержки начала работы анимациии,
alternate - анимация работает от начала до конца, и обратно в начало,
forwards - после анимации элемент «застывает» в крайнем кадре */
-webkit-animation :alternat 5s steps(50) 2s 3 alternate forwards;
animation :alternat 5s steps(50) 2s 3 alternate forwards;
}
@keyframes alternat{
0% { width: 0;
opacity: 1}
100% {width:100%;
opacity: 1}
}
@-webkit-keyframes alternat {
0% { width: 0;
opacity: 1}
100% {width:100%;
opacity: 1}
}Бегущая строка при помощи анимации на CSS3.
p.reverse {
.....
text-align: right;
/* reverse - анимация работает от конца в начало*/
-webkit-animation :alternat 5s steps(50) 2s 3 reverse ;
animation :alternat 5s steps(50) 2s 3 reverse ;
}
@keyframes reverse{
0% { width: 0; }
100% {width:100%;}
}
@-webkit-keyframes reverse {
0% { width: 0; }
100% {width:100%;}
}Бегущая строка при помощи анимации на CSS3.
Анимации начинают свою работу сразу при открытии страницы и после окончания цикла (в примерах выше повтор по 3 раза) останавливаются (исключение первый пример, там включено “бесконечное” проигрывание infinite) и начинают работать только после перезагрузки страницы.
Как создать бегущую строку новостей на чистом CSS в WordPress
Я получил интересный запрос в службу поддержки от одного из наших клиентов WordPress.com, использующих тему Owari. Этот клиент хотел, чтобы бегущая строка новостей прокручивалась поверх его сайта.
Сначала я отклонил запрос, думая, что потребуется специальная разметка и JavaScript.
Пользователи WordPress.com имеют возможность добавлять только собственные CSS. Понятно, что из соображений безопасности использование пользовательского JavaScript запрещено.
Но тут меня осенило. это было возможным с помощью всего лишь небольшого количества пользовательского CSS и творческого использования основной функции WordPress.
Виджет последних сообщений
Когда вы думаете об этом, бегущая строка последних новостей — это просто список последних сообщений. Поскольку есть виджет WordPress по умолчанию, в котором перечислены последние сообщения, никакого специального программирования не требуется.
В качестве первого шага просто разместите виджет «Последние сообщения» на своем сайте. Порядок или размещение не имеет значения на данный момент.
Задайте для заголовка виджета любой текст заголовка, который вы хотите отображать перед бегущей строкой. Установите число на любое количество «последних новостей», которые вы хотите просмотреть.
Сохранить «Показывать дату публикации?» не проверено. Посетители вашего веб-сайта могут предположить, что есть какая-то немедленная информация о «последних новостях» без отображения даты публикации здесь.
На данный момент у вас есть нормально выглядящий виджет в обозначенной области, где он должен быть. Мы воспользуемся магией CSS, чтобы изменить это.
Абсолютное позиционирование на помощь
Прежде чем мы начнем использовать какие-либо функции «прокрутки», давайте удалим виджет последних сообщений из области виджетов, используя абсолютное позиционирование.
Мы также сбросим ряд стилей, чтобы разрешить горизонтальный список ссылок на недавние сообщения, и несколько других вещей, чтобы подготовить нас к полноценной бегущей строке новостей с прокруткой.
Примечание. Приведенный выше код CSS предполагает, что это только виджет «Последние сообщения» на странице. Замените любой экземпляр .widget_recent_entries уникальным селектором идентификатора (что-то вроде #recent-posts-2 ), если это не так.
Animate It
На данный момент мы изменили положение и стиль обычного виджета «Недавние сообщения». Он почти превратился в полнофункциональную прокручивающуюся бегущую строку новостей.
Не хватает только одного: прокрутки. Мы можем добиться этого, используя анимацию ключевых кадров CSS.
Обратите внимание, что мы уже использовали селектор .widget_recent_entries ul на первом этапе, поэтому вы можете добавить туда этот стиль. Я просто разбил его таким образом, чтобы вы могли более четко увидеть добавление нового кода.
Остановить прокрутку при наведении курсора
Когда посетитель веб-сайта находит новость, на которую он хотел бы перейти, мы не хотим просить его поразить движущуюся цель.
К счастью, это можно решить с помощью нового правила CSS, которое приостанавливает анимацию прокрутки при наведении.
И мы закончили! Посмотрите видео ниже, чтобы увидеть конечный продукт.
Другие темы
Хотя это должно работать с большинством тем WordPress, это не будет работать с темами, в которых нет областей виджетов, или с темами, которые безосновательно используют позиция: относительная на контейнерах областей виджетов.
У нас возникла небольшая проблема с этим в Owari, поскольку класс .main-wrap имеет относительное позиционирование.
Мы преодолели эту проблему в Owari, используя отрицательное верхнее позиционирование для учета фиксированной высоты бегущей строки (которую мы определили сами) и высоты панели навигации.
В этом конкретном случае, если бы сайт Owari имел более одной строки навигации, панель навигации была бы выше, чтобы учесть дополнительные строки пунктов меню.
Нам пришлось бы вручную скорректировать отрицательную верхнюю позицию, чтобы учесть разницу.
Если бы в этом сценарии был разрешен пользовательский JavaScript, мы могли бы использовать его для расчета динамической высоты панели навигации. Но это разрушило бы чистую CSS-функциональность этой техники, и не , а имеет большое значение, чтобы просто увеличить отрицательное верхнее положение.
Вот и все
Тем, кто какое-то время работал в Интернете, это может напомнить вам часто оклеветанный тег
Да, почти. Но, по крайней мере, ключевые кадры CSS не устарели и дают нам немного больше контроля над анимацией анимации.
Я не буду комментировать, хорошо ли размещать подобные вещи на веб-сайте. Ленты новостей, прокручивающиеся внизу экрана, являются основой телевизионных новостных программ, поэтому, возможно, имитация эффекта на веб-сайте может создать ауру «профессионального новостного агентства».
В конечном счете, решение о том, размещать или нет бегущую строку новостей на вашем веб-сайте, зависит только от вас.
И теперь вы знаете, как это сделать на своих веб-сайтах WordPress с виджетами!
Предыдущая статья
Обрезка изображений только с помощью CSS
Next Article
Создание тем «с нуля» — пустая трата времени
20 билетов CSS
Коллекция бесплатных примеров HTML и CSS Ticket от Codepen и других ресурсов.
О коде
Билет
Билет на гастрономический фестиваль.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Принять один билет
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Принять один билет
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome.css
О коде
Авиабилет
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome.
css
О коде
Выберите билет
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: bootstrap.css, unicons.css
О коде
Билет
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Авиабилет
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
С код
CSS Grid: билет на поезд
Билет на поезд до Хогвартса с плоским дизайном!
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: simple-line-icons.css
О коде
Билет на переменные приливы
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Билетная сетка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.