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

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

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

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

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

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

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

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

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