Основные способы центрирования колонки

Допустим, у нас есть колонка с максимальной шириной 1024px, и нам нужно ее отцентровать. Разберем самые основные способы.

Классический способ

.container {
  max-width: 1024px;
  margin: 0 auto;
}

Автоматические отступы слева и справа заставляют элемент центрироваться. Работает абсолютно везде и понятен любому разработчику, нестареющая классика)

CSS Grid

.wrapper {
  display: grid;
  place-items: center;
}
.container {
  width: 100%;
  max-width: 1024px;
}

place-items: center центрирует содержимое как по горизонтали, так и по вертикали. Родитель активно управляет позиционированием дочерних элементов.

Flexbox

.wrapper {
  display: flex;
  justify-content: center;
}
.container {
  width: 100%;
  max-width: 1024px;
}

Flexbox превращает родитель в гибкий контейнер, а justify-content: center выравнивает содержимое по центру главной оси.

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

Код, как всегда, здесь.

Простой параллакс на чистом CSS

Разберем, как сделать простейший параллакс эффект, который есть практически на всех модных лендингах)

Основа эффекта:

.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

Здесь background-attachment: fixed — ключевой момент. Он "фиксирует" фон относительно окна, а контент прокручивается — создаётся эффект объёма.

HTML:

<section class="section-text">Текст</section>
<section class="parallax-bg bg-1"></section> 
<section class="section-text">Еще текст</section>

Чередуем текстовые блоки и параллакс-изображения.

Все довольно просто, но красиво)

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

Звездный рейтинг на CSS

Разберём простой способ создания рейтинга без JS.

HTML-структура:

<input type="radio" name="rating" value="5" id="star5">
<label for="star5" title="5 звёзд"></label>

Радиокнопки скрыты, но управляют состоянием через связь for с id.

row-reverse переворачивает порядок отображения:

.rating {
  display: flex;
  flex-direction: row-reverse;
}

Прячем исходные radio-кнопки:

.rating input { display: none; }

Псевдоэлемент заменяет пустые label на звёзды:

.rating label::before {
  content: "★"; /* создаём визуальные звёзды */
}

Селектор ~ находит все последующие label после выбранного input:

.rating input:checked ~ label {
  color: #ffc107; /* подсветка выбранных звёзд */
}

Принцип работы:
Благодаря row-reverse и селектору ~, при выборе звезды — подсвечиваются все предшествующие ей в визуальном порядке.

Возможных реализаций звездного рейтинга много, но этот вроде самый простой)

Код лежит здесь.

Тень хедера при скролле

На днях пытался запилить тень, которая появляется под хедером, при прокрутке страницы. Самое интересное из того, что перепробовал — это использование animation-timeline: scroll().

Всё получается очень классно, но есть одно "НО": пока что не работает эта история в Firefox.

animation-timeline: scroll() — эта фича позволяет привязать CSS-анимацию к прокрутке страницы.

header {
  position: sticky;
  top: 0;
  background: white;
  
  /* Изначально без тени */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  
  /* Привязываем анимацию к скроллу */
  animation: shadow-fade both linear;
  animation-timeline: scroll(root);
  animation-range: 0px 50px;
}

@keyframes shadow-fade {
  to {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

Как это работает:
■ animation-timeline: scroll(root) — анимация управляется прокруткой страницы.
■ animation-range: 0px 50px — анимация происходит в первые 50px скролла.
■ both — анимация работает в обе стороны (при скролле вверх тень исчезает).
■ linear — равномерная скорость изменения.

Всё было бы очень классно и круто, если бы это поддерживал Firefox, но пока, к сожалению это не так(

Вот, что говорит caniuse — animation-timeline: scroll().

Ну, а пример можно глянуть здесь.

Смешивание цветов с mix-blend-mode

Давайте сегодня разберём mix-blend-mode: difference — эффект, при котором текст сам становится читаемым, инвертируясь на контрастном фоне.

HTML-разметка:

<div class="container">
  <div class="text">ФОРМОШЛЁП</div>
</div>

Фон — диагональный градиент:

.container {
  height: 100vh;
  background: linear-gradient(45deg, #000 50%, #fff 50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

Текст:

.text {
  color: #fff;
  font-size: 120px;
  font-weight: bold;
  mix-blend-mode: difference;
}

Благодаря mix-blend-mode: difference мы получаем инвертированный цвет текста: на чёрном фоне - текст остаётся белым, на белом фоне - текст становится чёрным.

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

Код можно найти здесь.

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

Блок на всю ширину с помощью 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 — создаем градиент.

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

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