<MyRusakov.ru />

WordPress 4. Пример создания блога

WordPress 4. Пример создания блога

Видеокурс "WordPress 4. Пример создания блога" научит Вас создавать любые сайты на самой популярной CMS - WordPress.

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

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

Курс очень простой и проходится за один вечер, а знания останутся с Вами навсегда.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Анимация текста в CSS

Анимация текста в CSS

На этом уроке мы разберем основные правила CSS анимации на веб-странице, которые можно применить к любому элементу, а не только к тексту.

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

Анимация текста в CSS.

Я не буду подробно описывать, как стилизовался текст, остановимся только на самых сложных и важных моментах. Посмотреть весь код вы сможете на Codepen, ссылка будет внизу статьи.

HTML разметка

Создадим параграф p, внутри которого припишем тег span с нашим текстом.

<p>
  <span>
    Animated text
  </span>
</p>

CSS стили

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

p {
  border: 4px double rgba(255, 255, 255, 0.25);
  border-width: 4px 0;
}

Подпрыгивать у нас будет тег span, внутри которого мы разместили текст с тенью. По умолчанию span является строчным элементом, но прописав ему display: block, мы сделали его блочным, иначе никакая анимация работать не будет.

span {
  display: block;
}

Переходим к анимации текста

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

Демонстрация.

Правило @keyframe

Создадим ключевые кадры нашей анимации. Сначала пишем @keyframes и сразу за ним название нашей анимации, которое придумываем сами. Желательно название давать осмысленное, у нас текст будет подпрыгивать к верху и поэтому назовем мы нашу анимацию bounce-top.

@keyframes bounce-top {

Далее задаём все кадры нашей анимации, как минимум, у любой анимации должны обязательно присутствовать: первый (0% или from) и последний (100% или to) кадры.

В нашей анимации будет 11 кадров, которые распределяются в процентах, например кадр 25%, означает, что прошло 25% анимации. Кадры с одинаковыми свойствами можно объединить, прописав их через запятую.

Мы будем сдвигать текст по оси Y, в соответствующем кадре на энное количество пикселей. За это отвечает свойство transform: translateY. При нулевом значении этого свойства, в пяти кадрах, текст будет падать вниз и снова слегка отскакивать.

У некоторых кадров прописано ещё два свойства, но у каждого свой вариант:

animation-timing-function: ease-in;
animation-timing-function: ease-out;

Это функция, которая обозначает то, как будет происходить анимация, равномерно или нет. При значении ease-in, анимация вначале ускоряется и наоборот замедляется - ease-out. Благодаря замедлению и ускорению, выглядит данный эффект реалистично.

See the Pen Animated text CSS3 by porsake (@porsake) on CodePen.

Для того, чтобы применить нашу анимацию к элементу span, необходимо к селектору span добавить строчку animation и прописать свойства, где

span {
  animation: bounce-top 2s infinite both;
}

bounce-top – название анимации, у span и @keyframe название должно быть одинаковым.

2s – продолжительность анимации.

infinite – бесконечная анимация. Если мы хотим, ограничить число циклов анимации, то вместо infinite, надо поставить число. Для наглядности примера, у меня задана бесконечная анимация. Однако на реальном сайте, так не следует делать, достаточно заголовку подпрыгнуть несколько раз. Это реально раздражает, бесконечная анимация как-то оправдана, на элементе с призывом к действию.

both – CSS стили применяются к элементу до и после анимации.

Научиться применять полученные знания при создании сайтов, вам поможет этот видеокурс "HTML5 и CSS3 с Нуля до Гуру"

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.