Программы
Советы и приёмы: как сделать треугольник (кнопку «play») в CSS

Советы и приёмы: как сделать треугольник (кнопку «play») в CSS

Если посмотреть на миниатюру заметки, можно увидеть какой-то видео-ролик, который можно стартовать, нажав на «play». Это довольно частый элемент на сайтах, где размещаются видео-материалы. Сделать его можно, использовав картинку png с прозрачным фоном. Ну и наложить её на фото из ролика — а ля «preview».

Попробуем сделать это так и сделать без картинки play.

Сделаем превью для видео, используя кадр + картинку «play»:

<div class="video">
  <img class="video__img" src="/media/uploads/2017/08/28/moinerobot2217-1920x1080.jpg">
  <img class="video__play-icon" src="/media/uploads/2017/08/30/play.png">
</div>

<style>
.video {
  /* чтобы можно было внутри всё разместить через absolute */
  position: relative;
 
  width: 825px;
  height: 510px;
}

.video__img {
  position: absolute;
  top: 0;
  left: 0;
}

.video__play-icon {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
</style>

Выглядеть это будет примерно так:

Второй вариант интереснее — мы не будем использовать картинку значка play, а нарисуем его через CSS:

<div class="video">
  <img class="video__img" src="/media/uploads/2017/08/28/moinerobot2217-1920x1080.jpg">
  <div class="video__play-icon">
    <div class="video__play-triangle"></div>
  </div>
</div>

<style>
.video {
  /* чтобы можно было внутри всё разместить через absolute */
  position: relative;

  width: 825px;
  height: 510px;
}

.video__img {
  position: absolute;
  top: 0;
  left: 0;
}

.video__play-icon {
  height: 44px;
  width: 44px;
  padding: 32px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(0, 0, 0, 0.8);

  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.video__play-triangle {
  width: 0;
  height: 0;
  margin-left: 8px;
  border-style: solid;
  border-width: 22px 0 22px 37px;
  border-color: transparent transparent transparent #ffffff;
}
</style>

Вся «магия» происходит в правилах border для класса .video__play-triangle.

Само свойство border не подразумевает создание треугольника, но если задать нулевую ширину и высоту элемента, а также установить толстую границу, то мы увидим набор из четырёх треугольников:

 <div style="
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-color: #c0c #cc0 #000 #0cc;
">
</div>

В свойстве border-color цвета бордюров указываются по кругу, по часовой стрелке: сверху, справа, снизу, слева.

Соответственно, чтобы оставить только треугольник, нужно 3 стороны покрасить «прозрачным», а четвёртую обычным цветом:

 <div style="
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-color: transparent transparent transparent #0cc;
">
</div>

В свойстве border-width задаётся ширина границ также по кругу, по часовой стрелке. За счёт этого можно «вытянуть» треугольник:

 <div style="
  width: 0;
  height: 0;
  border: solid;
  border-color: transparent transparent transparent #0cc;
  border-width: 100px 100px 100px 170px;
">
</div>

На этом всё, добро пожаловать в треугльнико-строение!

Также может быть вам интересно:

7-ой день сотворения

Читать »

Правильная комбинация смены раскладки клавиатуры

Есть много комбинаций смены раскладки... Но какая же всё таки правильная?

Читать »
Фото Как сделать свою middleware в Django (с примерами)

Как сделать свою middleware в Django (с примерами)

Middleware или "промежуточное программное обеспечение" - элегантный способ установить общие правила обработки запросов и ответов приложения. Давайте напишем парочку middleware, чтобы понять, как они работают.

Фото Как настроить отправку почты из Django

Как настроить отправку почты из Django

Письма об ошибках, отчёты на почту, восстановление паролей - всё это полезно при работе с сайтом. Django предоставляет удобный способ это сделать с минимумом настроек!

Фото Добавляем поддержку медиа-файлов в Django проект

Добавляем поддержку медиа-файлов в Django проект

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

Фото Настройка журналирования (логирования) в Python с примерами

Настройка журналирования (логирования) в Python с примерами

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

Фото Добавляем переменные в контекст Django шаблонов (свой контекст-процессор)

Добавляем переменные в контекст Django шаблонов (свой контекст-процессор)

В Django вы можете передавать данные в шаблоны посредством контекстов. Контекст передаётся из контроллера (view в терминах Django), однако, если одни и те же данные нужны в разных местах, лучше сделать свой контекст-процессор.

Фото Пример своей консольной команды в Django проекте

Пример своей консольной команды в Django проекте

Если вы работали с Django проектом, то, скорее всего, запускали команды из консоли (manage.py). В Django есть простой способ писать свои команды для управления проектом.

Фото Разграничение прав доступа на Django сайте

Разграничение прав доступа на Django сайте

Почти на любом веб-сайте необходимо разделять пользователей на группы и предоставлять им разные возможности. В Django есть довольно серьёзная система прав доступа для пользователей - давайте её рассмотрим!

Фото Пользователи и их создание в Django - своя регистрация на сайте

Пользователи и их создание в Django - своя регистрация на сайте

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