Школа
Веб-разработка

Руст, можно ли сделать такую кнопку без фоновой картинки?

Продолжение

Фёдор Волков
17 янв 2019
👁 5433   🗩3
Веб-разработка

Руст, можно ли сделать такую кнопку без фоновой картинки?

Продолжение

Фёдор Волков
17 янв 2019
👁 5433   🗩3
Руст Кулматов
Фронтенд‑разработчик, преподаватель, соавтор движка электронных книг бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

В прошлом совете мы разобрали простые случаи. Теперь попробуем собрать такую же кнопку, но с прозрачным фоном.

Для начала восстановим кнопку:

/* html */
        
<button class="button">
  Кнопка
</button>
/* css */

/* Кнопка */
.button {
  height: 60px;
  border: 0;
  font-size: 20px;
  text-transform: uppercase;
  background-image: linear-gradient(
    to right, 
    #45aee5 0%, 
    #6be492 100%
  );
}

Вместо того, чтобы заливать кнопку фоновым цветом, возьмём подходящую маску:

И наложим её на нашу кнопку:

/* css */

.button {
  /* ... */
  mask-image: url("border-mask.svg");
}

У получившейся кнопки две проблемы. Во‑первых, текст стал невидимым, так как он тоже попал под маску. Во‑вторых, при изменении ширины кнопки, рамка деформируется.

Исправим первый недостаток. Для этого вынесем фон на отдельный слой:

/* html */
        
<button class="button">
  <span class="button-background"></span>
  Кнопка
</button>
/* css */

.button {
  /* ... */
  position: relative;
}
        
.button-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(
    to right, 
    #45aee5 0%, 
    #6be492 100%
  );
}

Чтобы исправить второй недостаток, придётся повозиться и вспомнить времена олдскульного скругления уголков.

Распилим нашу маску на три части:

И применим все три маски:

/* css */
        
.button-background {
  mask-image: url("border-left.svg"), 
    url("border-right.svg"),
    url("border-center.svg");
  mask-position: center left, center right, center center;
  mask-repeat: no-repeat, no-repeat, repeat-x;
  mask-size: contain, contain, contain;
}

К сожалению, центральная часть рамки вылезает из своих границ. Вынесем её на отдельный слой и зададим ему отступы:

/* html */
        
<button class="button">
  <span class="button-sides"></span>
  <span class="button-center"></span>
  Кнопка
</button>
/* css */
        
.button-sides {
  /* ... */
  mask-image: url("border-left.svg"), url("border-right.svg");
  mask-position: center left, center right;
  mask-repeat: no-repeat, no-repeat;
  mask-size: contain, contain;
}

.button-center {
  /* ... */
  left: 30px;
  right: 30px;
  mask-image: url("border-center.svg");
  mask-position: center;
  mask-repeat: repeat-x;
  mask-size: contain;
}

Центральная часть на месте. Но, если присмотреться, то видно, что градиент у центральной части рамки начинается не с того оттенка:

Дело в том, что ширина центральной части уже, чем ширина самой кнопки. Это становится заметнее, если убрать маску:

Чтобы это победить, растянем фон центральной части так, чтобы он по длине совпадал с кнопкой. Для этого перенесём фон на псевдоэлемент и вытянем его влево и вправо:

/* css */
        
.button-center {
  /* ... */
  left: 30px;
  right: 30px;
  mask-image: url("border-center.svg");
  mask-position: center;
  mask-repeat: repeat-x;
  mask-size: contain;
  background: none;
}

.button-center::before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -30px;
  left: -30px;
  background-image: linear-gradient(
    to right, 
    #45aee5 0%, 
    #6be492 100%
  );
  content: '';
}

Готово. Если вы знаете, как сделать такую кнопку проще, пишите в комментарии.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

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

Рекомендуем другие советы