Веб-проект: делаем реалистичную аквакнопку, как в старых Mac OS со скевоморфизмом

В версиях Mac OS с 2001 по 2012 год использовался стиль интерфейса под названием «скевоморфизм». Он имитирует реальные объекты и материалы и помогает пользователям легче осваивать цифровые интерфейсы. Одним из самых известных примеров скевоморфизма была аквакнопка: выпуклая и полупрозрачная с глянцевым блеском.

Сейчас такой стиль используется редко. С середины 2010-х годов многие компании, включая Apple, перешли к более минималистичному и плоскому дизайну.

В этом проекте мы сделаем аквакнопку с использованием HTML и CSS, потренируемся работать с градиентами и цветами в формате HSL — вся магия кроется именно здесь.

Логика проекта

Что будем делать:

Создадим HTML-структуру для кнопки.
Подключим базовые стили для кнопки.
Настроим несколько слоев в background-image.
Используем различные градиенты для создания глубины и блеска.
Добавим тени и блики с помощью градиентов.
Добавим псевдоэлемент ::before для контура кнопки.
Настроим эффект при наведении курсора.

Создаём веб-страницу

Создадим HTML-страницу с базовой разметкой:

<!DOCTYPE html>
<html lang="ru">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Аквакнопка</title>
<!-- Здесь подключим стили -->
</head>

<body>
 <button>Читать «Код»</button>
</body>
</html>

Получилась просто кнопка:

Подключаем базовые стили

Создадим файл со стилями styles.css, подключим его и будем дальше работать в нём.

<link rel="stylesheet" href="style.css">

Определим переменные для кнопки.

Зачем нужны переменные в CSS

Цвета мы будем указывать в формате HSL (Hue, Saturation, Lightness). По сравнению с RGB он предоставляет более гибкий способ работы, что очень удобно при создании цветовых схем и градиентов. Можно легко регулировать оттенок, насыщенность и светлоту цвета: создавать светлые и тёмные варианты одного и того же цвета. Именно это мы и будем делать при определении цветов для кнопки и её ховера.

Что такое RGB и CMYK

:root { 
    /* Основной цвет кнопки */
    --primary: hsl(213, 82%, 87%);
    /* Светлый цвет для градиента */
    --light: hsl(181, 95%, 92%); 
    /* Цвет кнопки при наведении */ 
    --primary-hover: hsl(213, 98%, 53%); 
    }

Цифры в скобках означают оттенок, насыщенность и светлоту. Разберём основной цвет:

Оттенок — значение от 0 до 360, где 0 — это красный, 120 — зелёный, и 240 — синий. В нашем случае, 213 — это оттенок, близкий к синему.
Насыщенность — значение от 0% до 100%, где 0% — это серый (оттенок отсутствует), а 100% — это насыщенный цвет. 82% — высокая насыщенность.
Яркость (она же светлота) — значение от 0% до 100%, где 0% — это чёрный, а 100% — белый. 87% — светлый цвет.

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

Теперь переопределим основные стили для кнопки:

    button { 
        /* Убираем стандартную границу */
        border: 0;
        /* Скругляем углы кнопки */
        border-radius: 100vw;
        /* Устанавливаем относительное позиционирование для использования псевдоэлементов */
        position: relative;
        /* Размер шрифта */
        font-size: 20px;
        /* Толщина шрифта */
        font-weight: 500;
        /* Изменяем курсор на указатель при наведении на кнопку */
        cursor: pointer;
        /* Тень */
        box-shadow: 1px 2px 5px hsl(0, 0%, 0%, 0.25);
        /* Внутренние отступы */
         padding: 0.5em 3em;

        }

Наша кнопка начала преображаться:

Настраиваем фон кнопки

Теперь начнём наводить красоту и используем несколько разных типов градиентов. Каждый градиент добавляет свой слой визуального оформления, создавая эффект объёма и блеска.

Градиенты можно назначать в качестве фоновых изображений. Свойство background-image позволяет использовать неограниченное число фонов, и так можно создавать сложные эффекты. Например, используя несколько градиентов с разными настройками, можно создать иллюзию отражения света от поверхности кнопки.

Красивый цветной текст в CSS: как это сделать

Мы будем использовать линейные и радиальные градиенты для бликов:

Линейный градиент — это плавный переход между цветами вдоль прямой линии, которую можно задать под любым углом. Создается с помощью свойства linear-gradient, где можно настраивать направление и цветовые остановки.
Радиальный градиент исходит из центральной точки и распространяется наружу по кругу или эллипсу. Создается с помощью свойства radial-gradient.

        background-image: 
        /* Светлый линейный градиент, создающий эффект блика сверху */
        linear-gradient(hsl(0 0% 100% / 0.85), transparent 10px),
        /* Второй линейный светлый градиент для дополнительного блика */
        linear-gradient(hsl(0 0% 100% / 0.25) 10px, transparent 10px),
        /* Радиальный градиент для создания мелких бликов */
        radial-gradient(
          circle at 10px 5px,
          hsl(0 0% 100% / 0.25) 5px,
          transparent 5px
        ),
        /* Ещё один радиальный градиент для мелких бликов */
        radial-gradient(
          circle at 0px 5px,
          hsl(0 0% 100% / 0.25) 5px,
           transparent 5px
        ),
        /* Основной линейный градиент кнопки, переходящий от основного цвета к светлому */
        linear-gradient(var(--primary), var(--light));

Здесь в свойствах hsl появляется четвёртый параметр, записанный через слеш. Это прозрачность, или альфа-канал. Мы можем задать значение от 0 до 1, где 0 — это полностью прозрачный, а 1 — полностью непрозрачный. В нашем случае используются значения 0.85 и 0.25, то есть 85% и 25% непрозрачности соответственно.

Когда оттенок и насыщенность равны 0, а яркость равна 100%, это указывает на чистый белый цвет. Так мы можем создать светлый градиент для бликов и световых эффектов, а затем через альфа-канал указать прозрачность при наложении.

Мы задали правила только для одного свойства background-image. Конструкция выглядит громоздкой, но лучший способ понять, как всё работает, — поэкспериментировать с разными значениями и посмотреть, что будет меняться.

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

Стилизуем псевдоэлемент before

Теперь добавим кнопке псевдоэлемент ::before, и с его помощью создадим контур.

        button::before {
            /* Создаем пустой псевдоэлемент */
  content: "";
              /* Позиционирование относительно родительского элемента */
              position: absolute;
            /* Помещаем псевдоэлемент за кнопкой */
            z-index: -1;
            /* Смещаем внутрь на 1px с каждой стороны */
            inset: -1px;
            /* Центрируем по горизонтали */
            margin-inline: auto;
            /* Линейный градиент для фона */
            background: linear-gradient(hsl(240, 74%, 30%), hsl(0, 0%, 38%));
            /* Скругляем углы */
            border-radius: 100vw;
          }

Здесь мы задали фон в виде линейного градиента. Градиент переходит от тёмно-синего hsl(240, 74%, 30%) к серому hsl(0, 0%, 38%), создавая контур.

Кнопка становится всё больше похожа на реальную:

Добавляем анимацию

Кнопка готова, и осталось добавить ей ховер — эффект при наведении.

          button:hover {
            background-image: 
              /* Светлый градиент, создающий эффект блика сверху */
              linear-gradient(hsl(0 0% 100% / 0.85), transparent 10px),
              /* Второй светлый градиент для дополнительного блика */
              linear-gradient(hsl(0 0% 100% / 0.25) 10px, transparent 10px),
              /* Радиальный градиент для мелких бликов */
              radial-gradient(
                circle at 10px 5px,
                hsl(0 0% 100% / 0.25) 5px,
                transparent 5px
            ), 
            /* Ещё один радиальный градиент для мелких бликов */
            radial-gradient(
                circle at 0px 5px,
                hsl(0 0% 100% / 0.25) 5px,
                transparent 5px
              ),
              /* Основной градиент кнопки, переходящий от цвета при наведении к светлому */
              linear-gradient(var(--primary-hover), var(--light));
          }

Аквакнопка готова!

<!DOCTYPE html>
<html lang="ru">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Аквакнопка</title>
 <link rel="stylesheet" href="style.css">
</head>

<body>
 <button>Читать «Код»</button>
</body>
</html>

:root {
    /* Основной цвет кнопки */
    --primary: hsl(213, 82%, 87%);
    /* Светлый цвет для градиента */
    --light: hsl(181, 95%, 92%);
    /* Цвет кнопки при наведении */
    --primary-hover: hsl(213, 98%, 53%);
    }

    button {
        /* Убираем стандартную границу */
        border: 0;
        /* Скругляем углы кнопки */
        border-radius: 100vw;
        /* Устанавливаем относительное позиционирование для использования псевдоэлементов */
        position: relative;
        /* Размер шрифта */
        font-size: 20px;
        /* Толщина шрифта */
        font-weight: 500;
        /* Изменяем курсор на указатель при наведении на кнопку */
        cursor: pointer;
        /* Тень */
        box-shadow: 1px 2px 5px hsl(0, 0%, 0%, 0.25);
        /* Внутренние отступы */
        padding: 0.5em 3em;
      
        }
      
        background-image:
        /* Светлый линейный градиент, создающий эффект блика сверху */
        linear-gradient(hsl(0 0% 100% / 0.85), transparent 10px),
        /* Второй линейный светлый градиент для дополнительного блика */
        linear-gradient(hsl(0 0% 100% / 0.25) 10px, transparent 10px),
        /* Радиальный градиент для создания мелких бликов */
        radial-gradient(
          circle at 10px 5px,
          hsl(0 0% 100% / 0.25) 5px,
          transparent 5px
        ),
        /* Ещё один радиальный градиент для мелких бликов */
        radial-gradient(
          circle at 0px 5px,
          hsl(0 0% 100% / 0.25) 5px,
          transparent 5px
        ),
        /* Основной линейный градиент кнопки, переходящий от основного цвета к светлому */
        linear-gradient(var(--primary), var(--light));

          button::before {
            /* Создаем пустой псевдоэлемент */
            content: "";
               /* Позиционирование относительно родительского элемента */
               position: absolute;
            /* Помещаем псевдоэлемент за кнопкой */
            z-index: -1;
            /* Смещаем внутрь на 1px с каждой стороны */
            inset: -1px;
            /* Центрируем по горизонтали */
            margin-inline: auto;
            /* Линейный градиент для фона */
             background: linear-gradient(hsl(240, 74%, 30%), hsl(0, 0%, 38%));
            /* Скругляем углы */
            border-radius: 100vw;
          }
        
          button:hover {
            background-image:
              /* Светлый градиент, создающий эффект блика сверху */
              linear-gradient(hsl(0 0% 100% / 0.85), transparent 10px),
              /* Второй светлый градиент для дополнительного блика */
              linear-gradient(hsl(0 0% 100% / 0.25) 10px, transparent 10px),
              /* Радиальный градиент для мелких бликов */
              radial-gradient(
                circle at 10px 5px,
                hsl(0 0% 100% / 0.25) 5px,
                transparent 5px
              ),
              /* Ещё один радиальный градиент для мелких бликов */
              radial-gradient(
                circle at 0px 5px,
                hsl(0 0% 100% / 0.25) 5px,
                transparent 5px
              ),
              /* Основной градиент кнопки, переходящий от цвета при наведении к светлому */
              linear-gradient(var(--primary-hover), var(--light));
          }

Текст:

Кристина Тульцева

Редактор:

Инна Долога

Обложка:

Алексей Сухов

Корректор:

Ирина Михеева

Вёрстка:

Маша Климентьева

Соцсети:

Юлия Зубарева

Фронтенд-разработка — востребованная профессия

На новом курсе «Практикума» о фронтенде вас обучат самым востребованным технологиям: JS и TypeScript, Flexbox и Grid, React, Git, Bash и др. Это то, что нужно работодателям сегодня. Старт — бесплатно.

Веб-проект: делаем реалистичную аквакнопку, как в старых Mac OS со скевомор­физмом