От автора: CSS3 предоставил UX-дизайнерам бесчисленные возможности, и лучше всего то, что самые классные штучки действительно легко внедряются. Всего парой строк кода можно добиться поразительного эффекта перехода, который впечатлит ваших пользователей, увлечет их и при правильном применении завершит ваше преображение. Кроме того, эти эффекты ускоряются аппаратным обеспечением и прогрессивным улучшением, которые вы можете использовать прямо сейчас.
Вот 8 реально простых эффектов, которые оживят пользовательский интерфейс и порадуют ваших пользователей. Все эти эффекты (панель один) контролируются свойством transition. Чтобы увидеть их в деле, мы определим на странице HTML div:
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> <div></div> </body> </html> |
Закончив с этим, установим его ширину и высоту (чтобы у него были размеры), фоновый цвет (чтобы его было видно) и свойство перехода.
1 2 3 4 5 6 7 8 9 |
<style type="text/css"> body>div { width:483px; height:298px; background:#676470; transition:all 0.3s ease; } </style> |
У свойства перехода transition есть три значения: свойства перехода (в данном случае все из них), скорость перехода (в данном случае 0,3 секунды) и третье значение, которое позволит вам менять метод расчета ускорения и замедления, но мы станем придерживаться значений по умолчанию и оставим их незаполненными. Теперь все, что нужно сделать – это изменить свойства, а они для нас займутся анимацией…
Перед продолжением можно скачать здесь демофайлы.
1. Выделение
Выделение объектов – довольно обычное требование клиентов. Это – отличный способ подчеркнуть функциональность или привлечь внимание к действию. Эффекты выделение кодируются в два этапа: во-первых, вы устанавливаете исходное состояние; далее устанавливаете изменения, например, при проведении мышью:
1 2 3 4 5 6 7 8 |
.fade { opacity:0.5; } .fade:hover { opacity:1; } |
(чтобы увидеть усиление в работе, убедитесь, что установили класс своего div’а на fade)
2. Изменение цвета
Анимация изменения цвета когда-то была невероятно сложной, при этом к расчету отдельных значений RGB привлекались все виды математики, а затем их нужно было рекомбинировать. Теперь мы просто устанавливаем класс div’а на color и определяем нужный нам цвет в CSS:
1 2 3 4 |
.color:hover { background:#53a7ea; } |
3. Увеличение и уменьшение
Чтобыувеличитьэлемент, раньшеприходилось использовать его ширину и высоту или отступ. Но сейчас для увеличения можно пользоваться свойством CSS3 transform. Установите класс своего div’а на grow, а затем добавьте в стили этот код:
1 2 3 4 5 6 |
.grow:hover { -webkit-transform:scale(1.3); -ms-transform:scale(1.3); transform:scale(1.3); } |
Уменьшить элемент так же просто, как и увеличить его. Чтобы увеличить элемент, мы определяем значение более 1, а чтобы сократить его, определяем значение менее 1:
1 2 3 4 5 6 |
.shrink:hover { -webkit-transform:scale(0.8); -ms-transform:scale(0.8); transform:scale(0.8); } |
4. Вращение элементов
У преобразований CSS большое количество разных применений, и одно из лучших – это преобразование вращения элемента. Назначьте div’у класс rotate и добавьте в CSS следующее:
1 2 3 4 5 6 |
.rotate:hover { -webkit-transform:rotateZ(-30deg); -ms-transform:rotateZ(-30deg); transform:rotateZ(-30deg); } |
5. Преобразование квадрата в окружность
По-настоящему популярный сейчас эффект – это преобразование квадратного элемента в круглый и наоборот. С помощью CSS этого эффекта легко добиться, мы просто преобразуем свойство border-radius.
Назначьте своему div’у класс circle и добавьте в стили этот CSS:
1 2 3 4 |
.circle:hover { border-radius:50%; } |
6. 3D-тень
На 3D-тени неодобрительно косились еще примерно год назад, потому что они считались несовместимыми с «плоским» дизайном, что, конечно, полная чепуха –они фантастически хороши, пользователь получает отклик на свои действия, и они работают с «плоскими», или «поддельными» 3D-интерфейсами.
Такой эффект достигается путем добавления тени блока, а затем перемещения элемента по оси x с помощью свойств transform и translate для того, чтобы казалось, что он «вырастает» на экране. Назначьте своему div’у класс threed, а затем добавьте в CSS следующий код:
1 2 3 4 5 6 7 8 9 |
.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’а, по крайней мере в этом отношении).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
@-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); } } |
Эта анимация просто перемещает элемент влево и вправо и все, что нужно сделать – это применить ее:
1 2 3 4 5 6 7 |
.swing:hover { -webkit-animation: swing 1s ease; animation: swing 1s ease; -webkit-animation-iteration-count:1; animation-iteration-count:1; } |
8. Вложенная рамка
Один из самых популярных стилей кнопки сегодня – «призрачная» -кнопка без фона, но с толстой рамкой. Конечно, можно просто добавить рамку к элементу, но это изменит расположение элемента. Справиться с этой проблемой можно с помощью изменения размера блока, но гораздо проще сделать переход рамки, применив внутреннюю тень блока. Назначьте div’у класс border и добавьте в стили следующий CSS:
1 2 3 4 |
.border:hover { box-shadow: inset 00025px #53a7ea; } |
Автор: Sara Vieira
Источник: //www.webdesignerdepot.com/
Редакция: Команда webformyself.
Комментарии (1)