Codeby web-security - новый курс от Codeby Security School

Представляем вашему вниманию новый курс от команды The Codeby - "Тестирование Веб-Приложений на проникновение с нуля". Общая теория, подготовка рабочего окружения, пассивный фаззинг и фингерпринт, Активный фаззинг, Уязвимости, Пост-эксплуатация, Инструментальные средства, Social Engeneering и многое другое. Подробнее ...


CSS3 дал бесчисленные возможности для дизайнеров UX (опыта взаимодействия), а самое лучшее в этом, что самые крутые элементы действительно просты в реализации.

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

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

Все эти эффекты (один прямоугольник) управляются с помощью свойства transition. Таким образом, чтобы видеть, как эти эффекты работают, мы создали div в HTML странице:

<!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.

 Установите класс вашего 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:


Paranoid - курс от Codeby Security School

Представляем вашему вниманию курс от команды codeby - "Комплекс мер по защите персональных данных, анонимности в интернете и не только" Подробнее ...


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

5. Превращение квадрата в круг

Сейчас очень популярен эффект трансформации квадратного элемента в круглый и наоборот. С помощью CSS этого легко добиться, мы просто переход свойство границы радиуса. Мы просто задействуем свойство border-radius.

Присвойте вашему div’у класс "circle" и добавить эти строки к вашим таблицам стилей:

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

6. 3D тень

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

Этот эффект достигается путем добавления прямоугольника тени, а затем перемещая элемент на оси х с помощью изменения свойству 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. Качание

Не все элементы используют свойство перехода. Мы также можем создать очень сложные анимации с использованием @keyframes, анимации и анимации-итерации.

В этом случае, мы сначала определим CSS анимации в стилях. Вы заметите, что из-за проблем реализации, мы должны использовать @-webkit-keyframes, а также @keyframes (да, Internet Explorer действительно лучше, чем 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);
    }
}

8. Вставка границы

Один из самых горячих стилей кнопок прямо сейчас – это кнопка призрак; кнопка без фона и жирной границы. Мы можем, конечно, просто добавить рамку к элементу, но это изменится положение элемента. Мы могли бы решить эту проблему с помощью размеров бокса, но гораздо более простым решением является переход в border с помощью вставки тени.

Дайте вашему дел класс "border" и добавьте следующий CSS для ваших стилей:

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

Хотите узнать, как заполучить короткий и красивый адрес электронной почты (e-mail)? или как выбрать качественный хостинг? Всё это и многое другое на сайте codeby.net.  Подписывайтесь на нашу e-mail рассылку (внизу страницы) или на ленту новостей и вы узнаете первым о новых статьях! Также вступайте в нашу официальную группу вконтакте — там вам очень рады!


Codeby Market от Сodeby

Мы запустили свой магазин CodebyMarket Equipment for InfoSec. Уже добавили RaspberryAlfa Long-RangeOrange PiArduino и многое другое. Купить Pentesting Devices