Красивый перенос текста с 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;

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

В этом посте мы разбирали, как показать/скрыть пароль с помощью чекбокса.

Но вчера подписчик поинтересовался, как сделать тоже самое, но с переключением с помощью иконки-глаза, т.к. делать чекбокс под это дело не круто и по-древнему.

Поэтому запиливаю еще одну версию, на этот раз модную, теперь жмем на глаз, вместо чекбокса)

По сути, все тоже самое, просто используем иконки из шрифта Font Awesome, плюс подредактировал верстку и JS.

Код можно увидеть здесь.

Проверять ошибки пользователя или нет?

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

Для этого можно использовать атрибут spellcheck, у него два значения:
1) true (включает режим проверки правописания)
2) false (отключает проверку)

По умолчанию стоит значение true, даже если вы не указываете этот атрибут.

Отключение проверки:

<textarea spellcheck="false"></textarea>

Го проверять)

Обучение программированию по роликам на Ютубе)

Стилизация форм без боли с accent-color

Сегодня я хочу рассказать о CSS-свойстве, которое очень сильно упрощает стилизацию форм.

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

Реализация:

<form>
  <label><input type="checkbox"> Чекбокс</label>
  <label><input type="radio" name="option"> Радио</label>
  <progress value="70" max="100">70%</progress>
</form>

form {
  padding: 20px;
  background: #f5f5f5;
  accent-color: #e91e63; /* Один цвет для всех! */
}
progress {
  width: 200px;
}

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

Расширяем фон элемента за пределы его контейнера

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

Допустим у вас есть контейнер, который вы отцентровали и вот в нем есть блок, который вы хотите выделить.

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

Это можно очень просто и элегантно сделать, не прибегая к созданию доп. блоков с позиционированием и т.п.

Достаточно всего одного свойства:

border-image: conic-gradient(pink 0 0) fill 0 //0 100vw;

Т.к. border-image не поддерживает сплошной цвет мы используем градиент и с помощью него получаем однотонную заливку, далее указываем, что мы увеличиваем область border-image с левой и правой стороны на 100% ширины области просмотра (100vw).

И все, получаем крутое выделение блока на всю ширину страницы.

Полный код можно найти здесь.

Фронтенд — это не больно

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

Хочу показать её вам, вдруг кто не видел еще — https://bespoyasov.ru/front-not-pain/

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

Советую глянуть на досуге)