<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Эффект размытия и фокуса на CSS

Эффект размытия и фокуса на CSS

На этом уроке мы реализуем интересный эффект с фокусировкой размытого фона и размытия изображения при наведении в CSS.

При наведении на элемент (самолет), размытый фон масштабируется и приобретает фокус. Одновременно с фокусировкой фона, самолет размывается до состояния полупрозрачности. Таким образом взгляд пользователя фокусируется то на фоне, то на картинке.


до наведения:

Эффект размытия и фокуса на CSS.

при наведении:

Эффект размытия и фокуса на CSS.

HTML разметка

Создадим секцию на весь первый экран, внутри которой поместим блок с фоновым изображением и вставим картинку.

<section class="section">
    <img src="img/airline.png" alt="airline" class="airline">
    <div class="bg"></div>
</section>

CSS стили

По умолчанию для всех элементов родителем служит тег body, относительно которого они позиционируются на странице. Мы изменим это правило и назначим родителем секцию, относительно которой будут позиционироваться остальные элементы. Кроме того, расположим все элементы внутри секции (фон и картинка) по центру.

.section {
    position: relative; // устанавливаем родителя
    overflow: hidden;
    width: 100%; // ширина секции
    height: 100vh; // высота секции на высоту окна
    display: flex; // это flex-контейнер
    justify-content: center; // горизонтальное выравнивание
    align-items: center; // вертикальное выравнивание
}

Изначально наш фон будет размытым, для этого зададим свойство filter со значением blur с радиусом размытия в 10 пикселей.

.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; // растянуть на всю ширину секции
    height: 100%; // растянуть на всю высоту секции
    background-image: url('../img/bg.jpg');
    background-size: cover; // масштабируется без потери пропорций
    filter: blur(10px); // размытие фона
    transition: 2s; // плавный переход от размытия до получения фокуса
}

.airline {
    width: 250px; // ширина картинки
    height: auto; // высота картинки подстроится автоматически
    position: relative; // для корректной работы z-index
    z-index: 1; // слой с картинкой выше слоя с фоном
    transition: 2s; // плавный переход эффекта размытия
}

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

.airline:hover {
    filter: blur(10px); // радиус размытия
    transform: scale(1.2); // масштабирование
    opacity: 0.5; // полупрозрачность
    cursor: pointer;
}

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

.airline:hover~.bg {
    filter: blur(0); // вернет фону резкость
    transform: scale(1.5); // трансформирует фон в сторону увеличения
}

Усиление эффекта

Эффект можно еще больше усилить, если при наведении на самолет добавить проявляющийся текст.


Эффект размытия и фокуса на CSS.

.text {
    position: relative;
    color: transparent;
    z-index: 2;
    bottom: 30px;
    transition: 2s;
    font-size: 30px;
    font-weight: 800;
    font-family: Impact;
    text-transform: uppercase;
}

.airline:hover~.text {
    transform: scale(1.5);
    z-index: 2;
    color: rgb(226, 43, 134);
}

Самостоятельно изучая HTML/CSS, наверняка вас должна заинтересовать тема по заработку сайтов на заказ. Основываясь на своем личный опыт, я записал пошаговое руководство по "Заработку на создании сайтов под заказ".

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.