x
 
Лера
21 марта 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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


Лера, если ширина пре­ры­ва­ния зара­нее известна, то можно обой­тись без маски.

Для начала свер­стаем блок со сплош­ной рамкой:

/* html */
​
<div class="background">
  <div class="block">
    <h2>Grand Tourer</h2>
    <p>a luxury performance car designed for high speed 
    and <nobr>long-distance</nobr> driving</p>
    <button>Shop all</button>
  </div>
</div>
/* css */
​
.background {
  padding: 20px;
  width: 500px;
  background: url(car.jpg) center / cover;
}
​
.block {
  position: relative;
  padding: 30px;
  border: 5px solid #fff;
  font-size: 20px;
  text-align: center;
  color: #fff;
}
​
.block h2 {
  margin: 0 0 10px;
  text-transform: uppercase;
}
​
.block p {
  margin: 0;
}
​
.block button {
  /* Спо­зи­ци­о­ни­руем ссылку так 
  чтобы она сто­яла по цен­тру ниж­ней рамки */
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
}

Grand Tourer

a luxury performance car designed for high speed and long‑distance driving

А теперь заме­ним ниж­нюю рамку на две полоски с помо­щью псевдоэлементов:

/* css */
​
.block {
  /* ... */
  border-bottom: 0;
}
​
.block::before,
.block::after {
  position: absolute;
  top: 100%;
  width: 170px;
  height: 5px;
  background: #fff;
  content: '';
}
​
.block::before {
  left: -5px;
}
​
.block::after {
  right: -5px;
}

Grand Tourer

a luxury performance car designed for high speed and long‑distance driving

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор закрыт. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Комментарии

Сергей Иванов
21 марта 2019

Можно сделать и без фиксированной ширины: обернем button в .footer, а по бокам поставим по div'у

Антон Головинов
21 марта 2019

Решение можно доработать и для прерывания заранее неизвестной ширины. Для этого надо обернуть текст кнопки в еще один элемент. Например:
<div class="bottom-border"> <button>Shop all</button> </div>
 
Элементу button задать display: inline-block и разместить его по центру родителя. Псевдоэлементам :before и :after задать ширину заведомо превышающую ширину всего блока (не забыв про overflow: hidden у родителя) и сместить их на 100%, относительно элемента button, причем элемент :before надо сместить на 100% справа (right: 100%), а элемент :after на 100% слева (left: 100%).

Рабочий пример:
https://codepen.io/golovinov/pen/rRqRGe

Виталий Кузнецов
21 марта 2019

Часто вёрстка нужна адаптивная.

Для этого width кнопки и псевдо-элементов :before :after нижней рамки стоит сделать в % хотя бы приблизительно.

У кнопки width: 30%;
Псевдо-элементы width: 36%;


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Вы используете Зеплин? 1 Несколько месяцев назад меня повысили из обычного разработчика до «тимлида» 1 Как правильно, эффективно и уважительно ставить KPI? Как готовить макеты для технологов? 6




Недавно всплыло

2 2 4 В бюро есть таймтрекинг для сотрудников? 5