8 простых переходов CSS3, которые поразят ваших пользователей

8 простых переходов CSS3

От автора: CSS3 предоставил UX-дизайнерам бесчисленные возможности, и лучше всего то, что самые классные штучки действительно легко внедряются. Всего парой строк кода можно добиться поразительного эффекта перехода, который впечатлит ваших пользователей, увлечет их и при правильном применении завершит ваше преображение. Кроме того, эти эффекты ускоряются аппаратным обеспечением и прогрессивным улучшением, которые вы можете использовать прямо сейчас.

Вот 8 реально простых эффектов, которые оживят пользовательский интерфейс и порадуют ваших пользователей. Все эти эффекты (панель один) контролируются свойством transition. Чтобы увидеть их в деле, мы определим на странице HTML div:

Закончив с этим, установим его ширину и высоту (чтобы у него были размеры), фоновый цвет (чтобы его было видно) и свойство перехода.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

У свойства перехода transition есть три значения: свойства перехода (в данном случае все из них), скорость перехода (в данном случае 0,3 секунды) и третье значение, которое позволит вам менять метод расчета ускорения и замедления, но мы станем придерживаться значений по умолчанию и оставим их незаполненными. Теперь все, что нужно сделать – это изменить свойства, а они для нас займутся анимацией…

Перед продолжением можно скачать здесь демофайлы.

1. Выделение

Выделение объектов – довольно обычное требование клиентов. Это – отличный способ подчеркнуть функциональность или привлечь внимание к действию. Эффекты выделение кодируются в два этапа: во-первых, вы устанавливаете исходное состояние; далее устанавливаете изменения, например, при проведении мышью:

(чтобы увидеть усиление в работе, убедитесь, что установили класс своего div’а на fade)

2. Изменение цвета

Анимация изменения цвета когда-то была невероятно сложной, при этом к расчету отдельных значений RGB привлекались все виды математики, а затем их нужно было рекомбинировать. Теперь мы просто устанавливаем класс div’а на color и определяем нужный нам цвет в CSS:

3. Увеличение и уменьшение

Чтобыувеличитьэлемент, раньшеприходилось использовать его ширину и высоту или отступ. Но сейчас для увеличения можно пользоваться свойством CSS3 transform. Установите класс своего div’а на grow, а затем добавьте в стили этот код:

Уменьшить элемент так же просто, как и увеличить его. Чтобы увеличить элемент, мы определяем значение более 1, а чтобы сократить его, определяем значение менее 1:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

4. Вращение элементов

У преобразований CSS большое количество разных применений, и одно из лучших – это преобразование вращения элемента. Назначьте div’у класс rotate и добавьте в CSS следующее:

5. Преобразование квадрата в окружность

По-настоящему популярный сейчас эффект – это преобразование квадратного элемента в круглый и наоборот. С помощью CSS этого эффекта легко добиться, мы просто преобразуем свойство border-radius.
Назначьте своему div’у класс circle и добавьте в стили этот CSS:

6. 3D-тень

На 3D-тени неодобрительно косились еще примерно год назад, потому что они считались несовместимыми с «плоским» дизайном, что, конечно, полная чепуха –они фантастически хороши, пользователь получает отклик на свои действия, и они работают с «плоскими», или «поддельными» 3D-интерфейсами.

Такой эффект достигается путем добавления тени блока, а затем перемещения элемента по оси x с помощью свойств transform и translate для того, чтобы казалось, что он «вырастает» на экране. Назначьте своему div’у класс threed, а затем добавьте в CSS следующий код:

7. Раскачивание

Не все элементы используют свойство transition. Высокосложную анимацию можно создавать с помощью @keyframes, animation и animation-iteration. В данном случае мы сначала определяем анимацию CSS в стилях. Обратите внимание, что из-за проблем с реализацией придется использовать @-webkit-keyframes наряду с @keyframes (да, действительно, InternetExplorer лучше Chrome’а, по крайней мере в этом отношении).

Эта анимация просто перемещает элемент влево и вправо и все, что нужно сделать – это применить ее:

8. Вложенная рамка

Один из самых популярных стилей кнопки сегодня – «призрачная» -кнопка без фона, но с толстой рамкой. Конечно, можно просто добавить рамку к элементу, но это изменит расположение элемента. Справиться с этой проблемой можно с помощью изменения размера блока, но гораздо проще сделать переход рамки, применив внутреннюю тень блока. Назначьте div’у класс border и добавьте в стили следующий CSS:

Автор: Sara Vieira

Источник: http://www.webdesignerdepot.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Андрей Аванти

    Спасибо, классная статья. Надо будет попробовать применить в своих сайтах, поэкспериментировать. Было бы неплохо, если бы вы ещё привели примеры вставки в HTML-код страницы.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree