Сборник анимации на CSS3

22 августа 2015 Антон Кулешов 1276 0

Сегодня для создания конкурентно-способного веб-ресурса приходится учитывать многое: начиная от интуитивно понятного дизайна страницы и заканчивая различными текстами, которые должны привлечь и удержать посетителя. Мы же в этой статье уделим внимание динамике, происходящей на страницах, которая стала неотъемлемой их частью. Если раньше для того, чтобы добавить какой-нибудь эффект нам приходилось использовать различные библиотеки или писать код на JavaScript, то сейчас лучший способ оживить сайт - это воспользоваться анимацией за счёт CSS3.

Реклама

Современные браузеры – вот наша цель. Хотя, только представить себе, что первая работа над стандартом CSS3 началась аж в далёком 1998 году, и это через год после появления CSS2. Между тем далеко не все браузеры поддерживают полный объем возможностей CSS3, что весьма и весьма печально. Мы не будем делать акцент на любителей старых версий браузеров – это их личный выбор, а займемся рассмотрением CSS библиотеки animate.css. Рано или поздно стандарт войдет во 100% поддержку, а нам надо идти в ногу со временем.

Animate.css – файл, в котором описано множество CSS3 анимаций, а вызов их происходит путём добавления классов к нужным нам HTML элементам. Вариантов и в самом деле много, если вы перейдёте на страницу демо, то увидите насколько.

Пользоваться CSS библиотекой очень просто, для этого подключим CSS файл:

<link href="animate.css" type="text/css" rel="stylesheet" />

Теперь добавляем HTML:

<h1 class="animated bounce">Анимированная запись на CSS3</h1>

К заголовку мы добавили два класса

  • animated – этот класс добавляем к элементу, к которому хотим добавить анимацию;
  • bounce – анимация, которая произойдёт (всего в библиотеке 74 вида, все примеры можно увидеть в демо).

А если добавить класс infinite, то анимацию можно зациклить, и она будет повторяться. Добавляя свои варианты и изменяя существующие, Вы с легкостью можете на базе animate.css создать свой сборник CSS3 анимаций.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

SMTP сервер для отправки писем с сайта если функция mail не работает

9 апреля 2016 Антон Кулешов

Довольно распространенное явление на просторах бесплатных хостингов – когда не работает функция mail() или работает как-то странно. Что же делать в этом случае? Ответ простой - воспользоваться отправкой писем через SMTP протокол, но для этого нам нужен уже готовый и написанный код. Совсем недавно подключая доменную почту на falbar, я сделал «маленькую выжимку из поисковой выдачи» и не найдя подходящего решения написал собственный класс, который, я думаю, будет полезен не только мне.

Ротатор баннеров – пишем сами

30 мая 2015 Антон Кулешов

Реклама – второй двигатель прогресса, первый – человеческая лень! Далеко не секрет, что реклама – составляет фактически 90% сегодняшнего интернета. Проанализируйте, что мы видим «сёрфя» интернет паутину: магазины и сайты каталоги производителей – без комментариев; стартовая страница Яндекса – основной доход компании реклама, причём как директ, так и различные баннеры; наша с вами почта – продающий контент в ней появился сравнительно недавно, но уже прочно укрепился; социальные сети – должно быть самый извращенный вариант скрытой рекламы, поскольку контент в них, пользователем как реклама не воспринимается, и мы сыпем кучу лайков на пост, откровенно содержащий в себе кучу брендов. Собственно, редкий блогер не повесит у себя на сайте баннерную рекламу.

Перенаправление пользователя при помощи HTML

24 ноября 2014 Антон Кулешов

Если вам потребуется перенаправить пользователя на другую страницу или просто перезагрузить её, то наиболее простым способом будет воспользоваться мета тегом refresh.