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

Нашел интересный видос, который наглядно показывает, как изменяются элементы при помощи свойства 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;

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

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

Меняем стиль маркеров в списках

Иногда возникает необходимость заменить стандартные маркеры в списках, на что-то более интересное. Тогда к нам на помощь приходит псевдоэлемент ::marker.

<ul>
  <li>Меняем стандартные маркеры</li>
  <li>Этого ненумерованного списка</li>
  <li>На кактусы</li>
</ul>

li::marker {
  content: "🌵";
}

Помимо свойства content псевдоэлемент ::marker поддерживает еще и цвет маркера, шрифт, размер и насыщенность. В общем есть, где разгуляться)

Добавляем ноль к однозначным числам в упорядоченном списке

Короткий лайфхак, если нужно сделать, так, чтобы нумерация списков выглядела следующим образом 01, 02, 03 и т.д., то можно использовать свойство list-style-type: decimal-leading-zero;

<ol>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
  <li>Четвертый пункт</li>
</ol>

ol {
  list-style-type: decimal-leading-zero;
}

Таким образом, у вас будут красивые и ровные упорядоченные списки.

Судя по глазам, собаку тоже сделали на JavaScript)

Избегаем случайный выбор чекбокса

Представьте: у вас есть какой-нибудь вертикальный список с чекбоксами, юзер скроллит страницу и случайно кликает в области строки чекбокса и тем самым переключает его.

Возможно коряво расписал проблему, увидеть ее можно на видосе в шапке этого поста)

Давайте пофиксим ее, всё, что нужно для этого — свойство max-width: fit-content;

Задаем для label, который оборачивает чекбокс свойство max-width: fit-content и все, теперь теперь label не растянут на весь блок, а занимет ровно столько места, сколько нужно для его содержимого.

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

Демку кода можно посмотреть здесь.

Как прижать подвал сайта к низу экрана

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

Вот один из рабочих способов:
1️⃣ Оборачиваем всю страницу в блок, делаем его флекс-контейнером display: flex.
2️⃣ Внутрь кладём header, main и footer.
3️⃣ Родителю задаём flex-direction: column, чтобы блоки встали друг под другом, а не в ряд.
4️⃣ Добавляем min-height: 100vh, чтобы он занимал минимум всю высоту экрана (даже если контента мало).
5️⃣ Блоку main задаем flex: 1, чтобы он растягивался на всё свободное пространство.

И все. Футер теперь всегда прижат к низу, а main растягивается, сколько душе угодно. Если контента мало — футер внизу. Если контента много — main растянется, а футер останется там, где и должен быть. Ничего не ломается, всё работает, как швейцарские часы.

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

Видео-шпаргалка: CSS-свойство border-radius

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

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

Синтаксис:

/* все углы элемента */
border-radius: 10px;

/* левый верхний + правый нижний | правый верхний + левый нижний */
border-radius: 10px 5%;

/* левый верхний | правый нижний + левый нижний | правый нижний */
border-radius: 2px 4px 2px;

/* левый верхний | правый верхний | правый нижний | левый нижний */
border-radius: 1px 0 3px 4px;

/* скругления по горизонтальной оси и по вертикальной (эллипс) */
border-radius: 10px / 20px;

Чтобы скруглить только один угол, используем свойства:

/* верхний левый угол */
border-top-left-radius: 10px;

/* верхний правый угол */
border-top-right-radius: 10px;

/* нижний левый угол */
border-bottom-left-radius: 10px;

/* нижний правый угол */
border-bottom-right-radius: 10px;