Твои коллеги-разрабы пилят фичи пока ты ушел в отпуск)

Блок на всю ширину с помощью CSS Grid

Разберем интересный способ выделения блока на странице так, чтобы он выходил за пределы основного контента.

HTML:

<main>
  <!-- Обычный контент внутри сетки -->
  <h1>Full-Bleed Layout</h1>
  <h2>Break elements out of their containers</h2>
  <p>Lorem ipsum dolor sit amet...</p>

  <!-- Full-Bleed элемент -->
  <div class="full-bleed-banner">
    <img src="banner.jpg" alt="">
  </div>

  <!-- Продолжение обычного контента -->
  <p>Lorem ipsum dolor sit amet consectetur...</p>
</main>

Здесь всё просто: контент идёт последовательно, а баннер обернут в full-bleed-banner.

Базовая сетка контейнера:

main {
  display: grid;
  grid-template-columns: 1fr 50% 1fr; 
  grid-column-gap: 3rem;
}

main > * {
  grid-column: 2;
}

Мы создаем сетку с тремя колонками, где центральная занимает 50% ширины, а боковые — по 1fr. Все дочерние элементы помещаются во вторую колонку.

Баннер:

.full-bleed-banner {
  grid-column: span 3;
  height: 300px;
  margin-block-end: 2rem;
}

Вот эта самая фишка) Свойство grid-column: span 3 заставляет элемент растягиваться на все три колонки, "вырывая" его из ограничений контейнера.

Очень интересный эффект, разумеется, работает не только с баннерами)

Затестить код можно здесь.

Большая подборка CSS Toggle

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

Там их больше 100 штук, удобно, что можно можно посмотреть, как выглядит переключатель, выбрать то, что больше нравится и сразу скопировать код, а там уже при необходимости допилить его под себя)

В общем вот — https://csstoggles.github.io/

Переключатели на любой вкус и цвет)

Эффект тетради в линейку с помощью CSS

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

HTML:

<div class="notebook">
  <div class="lined-paper">
    <h1>Labore et tempor</h1>
    <p>Sit incididunt labore...</p>
    <h2>Elit dolore lorem</h2>
    <p>Dolore dolore sit...</p>
  </div>
</div>

Простая разметка, самое интересное здесь в CSS)

Вынесем настройки шрифтов и отступов в переменные:

:root {
  --base-font-size: 16px;
  --h1-font-size: 24px;
  --h2-font-size: 20px;
  --line-height: 24px;
  --margin-left: 70px;
  --red-line-pos: 59px;
}

Запиливаем разлиновку:

background: 
  /* Красная линия */
  linear-gradient(
    to right,
    transparent var(--red-line-pos),
    #ff6b6b var(--red-line-pos),
    #ff6b6b calc(var(--red-line-pos) + 1px),
    transparent calc(var(--red-line-pos) + 1px)
  ),
  /* Линии */
  repeating-linear-gradient(
    transparent,
    transparent calc(var(--line-height) - 1px),
    #ddd calc(var(--line-height) - 1px),
    #ddd var(--line-height)
  );

Первый градиент создает красную вертикальную линию для полей.
Второй — создает повторяющиеся горизонтальные линии.

Типографика и отступы:

.lined-paper {
  font-size: var(--base-font-size);
  line-height: var(--line-height);
  padding: var(--line-height) 20px var(--line-height) var(--margin-left);
}

Вертикальные отступы равны высоте линии var(--line-height) — это обеспечивает совпадение текста с линиями.

Самое ценное, я считаю, что изменение размера шрифта или высоты линии автоматически влияют на всю композицию)

Потестить можно здесь.

Прозрачный заголовок с mix-blend-mode

Нашел еще одно интересное применение свойства mix-blend-mode, на этот раз со значением lighten. Можно сделать классное выделение заголовка, например, на первом экране лендинга, ну или в каком-нить другом блоке)

HTML:

<header class="header">
  <h1>формошлёп</h1>
</header>

Для блока header зададим фон:

.header {
  width: 100vw;
  height: 100vh;
  background: url(image.jpg);
}

Стилизуем заголовок:

.header h1 {
  font-size: 8vw;
  padding: 4rem 8rem;
  background-color: #fff;
  color: #000000;
  mix-blend-mode: lighten;
}

Создаем белый прямоугольник с заголовком черного цвета, но благодаря mix-blend-mode: lighten цвет фона заменяется цветом элемента там, где элемент светлее, а т.к. цвет заголовка черный, то "побеждает" и проступает фоновое изображение.

Вот так просто можно получить классный эффект)

Посмотреть код можно здесь.

Интерактивная шпаргалка по CSS Transform

Сегодня хочу поделиться с вами крутой шпаргалкой по CSS Transform, которая поможет быстро освежить в памяти все основные трансформации или изучить их с нуля)

Полный набор демок всех важных CSS Transform функций:
■ Поворот: rotate(), rotateX(), rotateY(), rotateZ().
■ Масштаб: scale(), scaleX(), scaleY().
■ Наклон: skew(), skewX(), skewY().
■ Перемещение: translate(), translateX(), translateY().
■ Матрица: matrix().
■ 3D трансформации: translate3d(), scale3d(), rotate3d().
■ Перспектива: perspective().
■ Комбинированные трансформации.

В общем вот — https://codepen.io/frontbox/pen/NPGOaBr

Всё довольно удобно и наглядно, пользуйтесь на здоровье)

Еще бы ИИ добавить)

Цветной цикл для списков

Все знают, как сделать «зебру» для списка, чтобы строки были попеременно окрашены в два цвета. Мы даже рассматривали это здесь.

А что, если дизайнер зашел дальше и хочет не двухцветный паттерн, а трехцветный?

Давайте посмотрим, как реализовать это с помощью :nth-child.

HTML:

<ul>
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
  <li>Четыре</li>
  <li>Пять</li>
</ul>

CSS:

li:nth-child(3n + 1) {
  background-color: rebeccapurple;
}

li:nth-child(3n + 2) {
  background-color: darkcyan;
}

li:nth-child(3n + 3) {
  background-color: lightskyblue;
}

Вся фишка в формуле An + B внутри :nth-child().
A — длина нашего цикла (сколько элементов в паттерне).
n — счетчик (начинается с 0: 0, 1, 2, 3...).
B — смещение (с какого элемента начать).

Получается такая история:
3n + 1
■ n=0: 3*0 + 1 = 1 (первый элемент)
■ n=1: 3*1 + 1 = 4 (четвертый элемент) и т.д.

3n + 2
■ n=0: 3*0 + 2 = 2 (второй элемент)
■ n=1: 3*1 + 2 = 5 (пятый элемент) и т.д.

3n + 3
■ n=0: 3*0 + 3 = 3 (третий элемент)
■ n=1: 3*1 + 3 = 6 (шестой элемент) и т.д.

Вот так вот получаем бесконечно повторяющийся трехцветный паттерн. Если нужно больше вариаций, то на изи добавляем еще формулу со своим цветом и всё)

Пример тут.

Заголовок с градиентом

Довольно попсовая тема, но на всякий случай, давайте тоже разберем, чтобы и у нас тоже это было под рукой)

HTML:

<h1>Формошлёп</h1>

CSS:

h1 {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: linear-gradient(165deg, yellowgreen, cyan, mediumpurple);
}

Разберем, что для чего:

■ -webkit-text-fill-color: transparent — делаем текст прозрачным.
■ -webkit-background-clip: text — обрезаем фон по форме текста.
■ background-image — создаем градиент.

Довольно просто и лаконично, но эффект получается классный)

Код глянуть можно здесь.