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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div></div>
</body>
</html>

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

<style type="text/css">
body>div
{
width:483px;
height:298px;
background:#676470;
transition:all 0.3s ease;
}
</style>

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

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

1. Выделение

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

.fade
{
        opacity:0.5;
}
.fade:hover
{
        opacity:1;
}

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

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

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

.color:hover
{
    background:#53a7ea;
}

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

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

.grow:hover
{
-webkit-transform:scale(1.3);
-ms-transform:scale(1.3);
transform:scale(1.3);
}

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

.shrink:hover
{
-webkit-transform:scale(0.8);
-ms-transform:scale(0.8);
transform:scale(0.8);
}

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

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

.rotate:hover
{
-webkit-transform:rotateZ(-30deg);
-ms-transform:rotateZ(-30deg);
transform:rotateZ(-30deg);
}

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

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

.circle:hover
{
    border-radius:50%;
}

6. 3D-тень

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

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

.threed:hover
{
        box-shadow:
                1px 1px #53a7ea,
                2px 2px #53a7ea,
                3px 3px #53a7ea;
        -webkit-transform:translateX(-3px);
        transform:translateX(-3px);
}

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

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

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform:translateX(5px);
        transform:translateX(5px);
    }
    30%
    {
        -webkit-transform:translateX(-5px);
       transform:translateX(-5px);
    } 
    50%
    {
        -webkit-transform:translateX(3px);
        transform:translateX(3px);
    }
    65%
    {
        -webkit-transform:translateX(-3px);
        transform:translateX(-3px);
    }
    80%
    {
        -webkit-transform:translateX(2px);
        transform:translateX(2px);
    }
    100%
    {
        -webkit-transform:translateX(0);
        transform:translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform:translateX(5px);
        transform:translateX(5px);
    }
    30%
    {
        -webkit-transform:translateX(-5px);
        transform:translateX(-5px);
    }
    50%
    {
        -webkit-transform:translateX(3px);
        transform:translateX(3px);
    }
    65%
    {
        -webkit-transform:translateX(-3px);
        transform:translateX(-3px);
    }
    80%
    {
        -webkit-transform:translateX(2px);
        transform:translateX(2px);
    }
    100%
    {
        -webkit-transform:translateX(0);
        transform:translateX(0);
    }
}

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

.swing:hover
{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count:1;
        animation-iteration-count:1;
}

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

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

.border:hover
{
        box-shadow: inset 00025px #53a7ea;
}

Автор: Sara Vieira

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

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

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

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree