Плавная прокрутка с помощью scroll-behavior

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

За плавность прокрутки отвечает свойство scroll-behavior со значением smooth:

html {
  scroll-behavior: smooth;
}

Пример этого чуда в действии можно увидеть здесь:
https://codepen.io/frontbox/pen/pomKyQg

Ровняем блок по центру экрана

Тривиальная задача, с которой сталкивается каждый верстальщик. Это может быть необходимо, чтобы выровнять модальное окно, какой-то контент на первом экране лендинга и т.п.

Есть несколько способов, но давайте разберем самый простой — с помощью флексов.

Делаем родителя флекс-контейнером и задаём свойства для выравнивания по центру вертикальной и горизонтальной осей:

.container {
   height: 100vh; /* это высота вьюпорта */
   display: flex;
   align-items: center;
   justify-content: center;
}

Полный код можно глянуть здесь.

Все просто, красиво и без костылей)

Простой zoom-эффект на CSS для изображения

Давайте в несколько строк, добавим интерактивности для сайта. Создадим эффект зума при наведении на картинку.

Пример работы можно глянуть на видео к этому посту.

А вот и сам код:

html:

<div class="image-container">
    <img src="img.jpg">
</div>

css:

.image-container {
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    box-shadow: 3px 2px 13px rgba(0, 0, 0, 0.5);
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.image-container:hover img {
    transform: scale(1.2);
}

Как это работает:
— Контейнер image-container имеет фиксированный размер, а изображение увеличивается внутри него, сохраняя свои пропорции;
— При наведении курсора изображение увеличивается, тем самым создаётся необходимый эффект.

Необычный генератор заглушек для изображений

Не всегда, когда разрабатывается сайт уже есть готовые изображения для него. Для того, чтоб обозначить в нужных местах изображения обычно используют заглушки (placeholder).

Обычно используют типа таких сервисов - https://imgholder.ru/
Где задаются размеры изображения и цвет, если нужно, а потом уже вставляем полученную ссылку в тег img и лицезреем картинку.

Но недавно мне скинули еще один генератор, здесь все также, только вставляются изображения наших четвероногих друзей)

Собственно вот сайт - https://placedog.net/

Захотелось с вами поделиться, го тестить)

Я пишу на JavaScript

Делаем числа в таблицах красивыми

Иногда приходится верстать таблицы, которые (внезапно) содержат числа. Так вот, чтобы улучшить восприятие этих чисел, бывает полезно использовать свойство:
font-variant-numeric: tabular-nums;

Это свойство задает одинаковую ширину для каждой цифры.

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

Го удивлять всех юзеров стильными таблицами)

Декоративная линия между колонками

На днях смотрел, как сверстан многоколоночный текст на одном сайте и заметил, что колонки разделяли с помощью border-right. Как то не очень красиво, специально для разделения колонок в тексте, есть свойство column-rule.

column-rule: 3px solid red;

Задаем ширину, стиль и цвет разделительной линии.

Пример можно глянуть здесь.

А более подробное описание работы с этим свойством и в целом работу со столбцами можно прочитать тут.

Пойду сыну предъявлю, 8 лет пацану, а он без офера сидит на шее у родителей) Канал паренька здесь.

Текст на размытом фоне

Этот эффект популярен в лендингах, особенно на первом экране, чтобы акцентировать внимание, на тексте, а не на приколдесной картинке.

Делается довольно просто, вот код:

<div class="glass-backdrop">
    <span>Текст на размытом фоне</span>
</div>

.glass-backdrop {
    height: 300px;
    width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    background: url("background.jpg") center no-repeat;    
}
.glass-backdrop span {
    position: relative;
    text-align: center;
    color: #FFF;
    width: 80%;
    font-size: 34px;
    line-height: 40px;
    padding: 40px 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2), 0 16px 28px rgba(0,0,0,0.2);
    text-shadow: 0 0 12px rgba(0,0,0,0.6);   
    text-transform: uppercase;
    font-family: 'Roboto', Tahoma, sans-serif;
    letter-spacing: 4px;
    z-index: 1;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

Пощупать код можно здесь.

Прячем html-элемент без помощи CSS

Все знают, про display: none, с помощью которого можно скрыть элементы страницы, но не все знают про атрибут hidden, который тоже может скрывать элементы.

Использовать можно так:

<p hidden>Здесь текст который будет скрыт<p/>
<p>Здесь текст который будет виден<p/>

Вот так просто.

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

🌀turn в CSS

Если вы делаете анимации и запарились считать обороты элементов в градусах, то turn спешит на помощь)

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

➧ 1 turn равен одному полному обороту, или 360 градусам;
➧ 0.5 turn равен пол-оборота, или 180 градусам;
➧ 0.25 turn равен четверти оборота, или 90 градусам.

Реализация:

.element {
  transform: rotate(1turn); /* Полный оборот, эквивалентно 360 градусам */
}

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

Список-зебра 🦓

Бывает задача сделать списки более читаемыми, для этого можно использовать эффект зебры. Т.е. мы можем раскрасить пункты списка разными цветами.

Проще всего это сделать с помощью псевдокласса :nth-of-type, выбираем четные и нечетные пункты списка.

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

li:nth-of-type(odd){ background: #f7d776}
li:nth-of-type(even){ background: #c9d5ea}

Получается примерно такая зебра, как в шапке поста.

Пока выходной, давайте отвлечемся и порешаем правильные алгоритмические задачки

Используем counter() для нумерации заголовков

Если на странице сайта много подзаголовков, которые нужно пронумеровать (например, список шагов), а руками это делать лень, то можно использовать CSS-счётчик counter(num), он это сделает автоматически.

Пример использования:

В нужном блоке создаём счётчик с именем chapter:

body {
  counter-reset: chapter;
}

Далее подставляем значение счётчика chapter через функцию counter() и увеличение значения счётчика свойством counter-increment:

h2::before {
  color: red;
  content: "Шаг " counter(chapter) ": ";
  counter-increment: chapter;
}

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

Наглядная трансформация элементов

Нашел интересный видос, который наглядно показывает, как изменяются элементы при помощи свойства transform и его функций.

Показана работа этих функций:

● scale(x,y) — масштабирует элемент по осям X и Y. Единица соответствует нормальному масштабу. Числа от 0 до 1 — это уменьшенный масштаб. Числа больше единицы — увеличенный масштаб.

● scaleX(X), scaleY(Y), scaleZ(Z) - растягивают или сжимают элемент только по горизонтали, вертикали или третьей оси Z

● rotate(angle) — вращает элемент на заданный угол.

● skewX(X), skewY(Y) — выполняют сдвиг одной стороны элемента относительно противолежащей. В результате элемент как бы наклоняется.

● translate(x,y) — смещение элемента вверх-вниз или влево-вправо.

Отступ между заголовком и содержимым таблицы

Иногда в макетах дизайнеры проявляют свою фантазию и делают таблицы не совсем стандартными. Берут и для красоты отделяют заголовок таблицы от ее содержимого. А нам потом голову ломать, как это сделать на html и css)

Давайте рассмотрим один довольно годный вариант, как это можно сделать.

Добавим псевдоэлемент tbody:before с блочным отображением и невидимым символом Zero Width Non-Joiner — "\200C":

tbody:before {
  line-height:1em; 
  content:"\200C"; 
  display:block;
}

Благодаря этому получим красивый визуальный отступ.

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

Простой способ показать/скрыть пароль

Видели в формах, где требуется зарегаться или авторизоваться, иногда присутствует чекбокс "показать пароль"?

Это штуку очень просто можно реализовать с помощью изменения типа поля с password на text, делается буквально в пару строк:

<input type="password" id="password" value="123456">
<input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'"> Показать пароль

Или так, если хотите вынести JS функцию отдельно:

<input type="password" id="password" value="123456">
<input type="checkbox" onclick="show_hide_password()"> Показать пароль

function show_hide_password() {
  let x = document.getElementById("password");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

Так что можете добавить еще немного юзабилити для своих форм)

Однострочник для центрирования

Все знают, как легко выровнять блок по центру, если используется flexbox или grid. Но с марта 2024 года современные браузеры поддерживают align-content: center и для блочных макетов.

Теперь можно легко центрировать дочерние элементы с помощью одной строки:

align-content: center;

Также, для обычного блочного элемента теперь можно использовать и align-content: end;

Пример кода здесь.

Так что, если вдруг не знали, то берите на вооружение)

Но тимлид то знает, что надо было пилить ворота)

Популярные названия классов HTML/CSS

Тоже мучаетесь, когда нужно придумывать названия для классов в HTML?

Тогда это вам пригодится — https://tpverstak.ru/common-css-class-names/

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

А вообще я щас пытаюсь перейти на БЭМ, целая методология, как лучше именовать классы (но названия придумывать все равно придется).

<div class="block">
    <div class="block__element"></div>
</div>

А как вы выбираете названия классов? Используете ли БЭМ?

Красивый перенос текста с CSS свойством text-wrap

Часто при верстке, особенно лендингов бывают длинющие заголовки и если их просто вставить, то смотрятся они не очень.

Бывает, что на вторую строку переносится вообще только одно слово и выглядит все это дело, как полная шляпа. Можно, конечно, взять и в нужном месте запилить тег <br>, но это может выйти боком при адаптиве.

Чтобы решить эту задачу можно использовать свойство text-wrap: balance;

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

Пример кода здесь.