Как они это делают? #1

Сегодня пытаемся скопировать вот такой эффект на картинке с помощью Figma.

Ссылочка на источник: https://vc.ru/ingos/349632-malyy-biznes-ne-oformlyaet-strahovanie

Что имеем:

Прямоугольник. Закругленный по максимуму. Элемент нависает над поверхностью. Сверху белая тень.Снизу еще тенюшка. Свет падает сверху слева, видим тень справа от блока.

Делаем основу

Вырисовываем прямоугольник, закругляем по максимуму.

Накладываем поверх референса и понимаем, что закругление то не совсем максимальное.

Окей, делаем поменьше. Копируем текст с референса.

Делаем тени

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

Это здорово, но у нас сверху еще тени появились. Нужно по оси Y немного добавить, найти оптимальное значение

Уже лучше. Но тень падает слева сверху. Поэтому добавим еще по оси X.

Похоже на правду.

Добавим немного цвета тени и чутка осветлим ее.

Отлично. Но так как тень падает слева сверху, то нам придется еще углубить ее. При чем добавить немного синего оттенка.

Добавим немного по оси X, Y пока забиваем. Не блюрим, а просто пока определим оси координат. Поставим цвет для наглядности.

Добавим немного серости в цвет и заблюрим. Стало похоже.

Можно пойти по другому пути. Сделать прямоугольник, хорошенько его заблюрить, сделать градиент и положить под нашу основу.

А че, даже похоже, нет?)

Но за такое я как верстальщик надавала бы по рукам. Простую тенюшку для элемента проще сделать с помощью box-shadow, а не лепить новый div и пытаться его с помощью z-index запихнуть назад. Ну и есть вероятность, что будут приколы с адаптивом.

Так что оставим это для behance-мастеров)

А что с белой тенью бликом?

Тут просто. Она над инпутом, поэтому по оси координат Y будет выше. Блюр небольшой, делает так, чтобы было заметно. Ставим белый цвет.

Вот что получилось.

Дальше просто вставляем иконочки и радуемся :)

Можно, конечно, попробовать это сверстать...

А давайте сверстаем

Создаем Index.html

<!DOCTYPE html><html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<link href="style.css" rel="stylesheet"/>
</head>
<body>
</body>
</html>

К нему style.css, но пока ничего не пишем там.

Определимся с тегами.

Это будет тег <input> завернутый в родитель-контейнер. Текстовый элемент для демонстрации просто разместим посередине страницы.

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="main-container">    
  <input type="text" class="soft-input"/>
</div>
</body>
</html>

У класса-родителя сделаем класс .main-container, для поля .soft-input.

Обозначим фон

Сделаем фон родителю и обозначим его размер в ширину и высоту.

.main-container {    
    background-color: #f5f5f5;    
    width: 100%;    
    height: 100vh;    
    display: flex;    
    justify-content: center;    
    align-items: center;
}

width: 100% - по всей ширине

height: 100vh - по всей высоте экрана

И используем флексы, чтобы наш инпут определить ровно посередине. Не будем пока вдаваться в основы флексов, просто обозначим следующее:

display: flex; - отображение по флексу
justify-content: center; - определить по оси x строго по середине
align-items: center; - определить по оси y строго посередине

Таким образом, если нам понадобится добавить что-то еще, то оно тоже будет находится посередине :)

А что там с кнопкой?

У кнопки есть своя высота и ширина

Назначим для демонстрации такие параметры:

height: 60px;
width: 600px;

Вспоминаем про радиус. На макете у нас он равен 40.

Назначаем свойство border-radius: 40px;

Смотрим что получилось.

Ширина есть, высота есть, посередине. Border radius применился.

По умолчанию у элемента input стоит свой родной border. Есть смысл его убрать, так как в макете явно мы не назначали border.

border: none;

На макете у поля есть свой фон. Пропишем его:

background: #ECEDEF;

Смотрим что получилось:

Мм, серый на сером. Класс.

Ииии... тени!

Добавляем то, ради чего был сей процесс - тени. Не будем изобретать велосипед, и вникать в теорию построения теней в верстке и скопирнем свойства у фигмы. Во вкладке inspect в самом конце нас будет ждать свойство box-shadow.

Вставляем в код и в итоге css свойства нашего поля будут следующие:

.soft-input {    
    height: 60px;    
    width: 600px;    
    border-radius: 40px;    
    border: none;    
    background: #ECEDEF;    
    box-shadow: 0px -4px 4px rgba(255, 255, 255, 0.25), 
    23px 2px 17px rgba(73, 97, 114, 0.17), 
    17px 33px 23px rgba(158, 165, 172, 0.27);
    }

Итоговый код CSS:

.main-container {    
    background-color: #f5f5f5;    
    width: 100%;    
    height: 100vh;    
    display: flex;    
    justify-content: center;    
    align-items: center;
}
.soft-input {    
    height: 60px;    
    width: 600px;    
    border-radius: 40px;    
    border: none;    
    background: #ECEDEF;    
    box-shadow: 0px -4px 4px rgba(255, 255, 255, 0.25), 
    23px 2px 17px rgba(73, 97, 114, 0.17), 
    17px 33px 23px rgba(158, 165, 172, 0.27);
}

Белый блик не очень хорошо видно, поэтому мы немного увеличим непрозрачность:

box-shadow: 0px -4px 4px rgba(255, 255, 255, 0.5)

Выглядит почти как оригинал :)

На этом закончим. Можно добавить еще иконки, но чуть позже :) Это особая магия html...

#верстка #дизайн #ui #учеба #html #css