Урок #1 - Создание эффекта "Первого плана"

Приветствую вас в моём первом уроке, сегодня я вас научу писать такой прикольный эффект первого плана. Начнем?

1. Классы для объектов

Думаю вы еще не слишком новичок, так что перейдем к созданию классов, которые нам потребуются.

<div class="dialogWindow">
  <div class="card">
    <h1>&nbsp</h1>
  </div>
  
  <div class="card sCard">
    <h1>&nbsp</h1>
  </div>
  
  <div class="card tCard">
    <h1>&nbsp</h1>
  </div>
  
  <div class="card fCard">
    <h1>&nbsp</h1>
  </div>
</div>

Я использую 5 классов, но можно и обойтись тремя.
Один обобщающий класс - dialogWindow, другой класс самой карты - card и класс для перемещения другой карты у меня это - *Card.

2. Написание стилей для объектов

body {
    background-color: rgb(11, 165, 255);
}

.dialogWindow {
    margin: 10% 0 0 28%;
}

.card {
    background-color: aqua;
    border-radius: 15px;
    width: 170px;
    padding: 60px 0 60px 0;
    margin: 15px;
    transition: 0.3s;
}

.card {
    cursor: pointer;
}

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

3. Написание правила воспроизведения анимации

.dialogWindow:hover > :not(:hover) {
    transition: 0.3s;
    opacity: 0.4;
}

Теперь, начнем самое главное, так это само правило. Оно пошаговое, суть его проста. ">" - это дочерний селектор, выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу. Мы написали, что на те элементы, на которые мы не наведены должны изменяться в прозрачности. В итоге изменяются только те элементы, на которые мы не наводимся. Но тот, на который мы навели, остается нормальным.

4. Как можно улучшить

.dialogWindow:hover > :not(:hover) {
    transition: 0.3s;
    opacity: 0.4;
    transform: scale(0.9);
}

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

В итоге мы получаем приятную анимацию и эффект "первого плана". Надеюсь эта статья станет вам полезной, до новых встреч. :3

Мой телеграм канал. Результат.