Формошлёп

Друзья, год подходит к концу, и хочу сказать спасибо, что вы здесь. Спасибо за ваши вопросы, обсуждения и поддержку) Желаю всем в Новом году крепкого здоровья, денег нескончаемый поток и проектов, в которые хочется возвращаться по понедельникам) Отличных праздников и до встречи в 2026-м!

Декоративные линии в заголовках на CSS Для выделения заголовков иногда используется прием с декоративными линиями слева, справа или с обеих сторон. Давайте рассмотрим, как это можно реализовать. HTML:

    
        <h1>Title #1</h1>
<p>Lorem ipsum dolor sit amet</p>

<h1>Title #2</h1>
<p>Lorem ipsum dolor sit amet</p>

<h1>Title #3</h1>
<p>Lorem ipsum dolor sit amet</p>{}
    

CSS:

    
        h1 {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

h1::before,
h1::after {
  content: '';
  flex: 1;
  height: 2px;
  background: #000;
}{}
    

■ display: flex превращает заголовок в flex-контейнер. ■ gap: 0.5em создаёт отступ между текстом и линиями. ■ Псевдоэлементы ::before и ::after создают линии. ■ flex: 1 растягивает линии на всё доступное пространство. Таким образом мы получаем заголовок по центру и линии с обеих сторон. Управление видимостью:

    
        /* Линия только справа */
h1:first-of-type::before {
  display: none;
}

/* Линия только слева */
h1:nth-of-type(2)::after {
  display: none;
}{}
    

Здесь мы убираем левую линию у первого заголовка и правую у второго, создавая разнообразные варианты оформления. Можно легко кастомизировать, поменять цвет, добавить градиент, изменить толщину или стиль линии) Потестить код можно здесь.

Монументальный учебник по фронтенду и не только Если вы уже подустали от многочасовых обучающих видосов по фронтенду, то у меня есть для вас кое-что) Очень крутой учебник от Дмитрия Трепачёва — https://code.mu/ru/ Не просто ещё один сайт с уроками. Это структурированный учебный портал, от самых основ вёрстки до фреймворков React, Vue и Angular. Весь материал разделён на учебники, справочники и задачники, можно изучать теорию и сразу закреплять её на практике. В общем — крайне советую)

Переключатель размера шрифта на CSS Видели на сайтах кнопки или ссылки для изменения размера шрифта? Давайте сегодня разберем, как сделать нечто подобное, используя "трюк с радиокнопками". HTML:

    
        <input id="size-small" type="radio" name="size">
<label for="size-small">Small</label>
<!-- + medium, large... -->
<section>
  <p>Ваш текст...</p>
</section>{}
    

Чтобы переключатель выглядел как меню, а не как формы для опроса, скрываем сами радиокнопки:

    
        input[name="size"] {
  display: none;
}

input[name="size"]:checked + label {
  border-bottom: 2px solid #3498db;
}{}
    

Переключение:

    
        #size-small:checked ~ section {
  font-size: 0.9rem;
}

#size-large:checked ~ section {
  font-size: 1.1rem;
}{}
    

Это самая суть нашего метода. Мы говорим браузеру: "Если выбрана радиокнопка с таким-то ID, найди любой следующий соседний элемент section и измени его шрифт". Такое вот CSS-only решение) Потестить код можно здесь.

Адаптивные разделители для меню Давайте сегодня разберем, как сделать адаптивные разделители, чтобы, когда у нас широкий контейнер (горизонтальное меню) — разделители были вертикальными, а когда контейнер узкий (вертикальное меню) — разделители горизонтальные. HTML:

    
        <div class="demo-container">
  <nav>
    <ul>
      <li>Первый</li>
      <li>Второй</li>
      <li>Третий</li>
      <li>Четвертый</li>
    </ul>
  </nav>
</div>{}
    

Базовые стили списка:

    
        nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: row;
}{}
    

■ Убираем маркеры списка и сбрасываем стандартные отступы. ■ По умолчанию элементы располагаются вертикально. Вертикальное меню (по умолчанию):

    
        nav li:not(:first-child) {
  border-top: 1px solid white;
}{}
    

Добавляем границу сверху всем элементам, кроме первого. Горизонтальное меню (при широком контейнере):

    
        @container (width > 600px) {
  nav ul {
    grid-auto-flow: column;
  }
  
  nav li:not(:first-child) {
    border-top: none;
    border-left: 1px solid white;
  }
}{}
    

■ Меняем направление Grid, элементы выстраиваются в ряд. ■ Убираем горизонтальную границу. ■ Добавляем вертикальную границу, у всех элементов кроме первого. В целом всё, получаем то, что нам требовалось — адаптивные разделители) Код можно потестить здесь.

Так вот кто забирает все офферы)

Frontend roadmap на русском Думаю многие знают про https://roadmap.sh/frontend, но мало кто знает, что есть и неплохой frontend roadmap на русском языке. Собственно вот — https://vallek.github.io/frontend-roadmap-ru/ Все структурированно, красиво, интерактивно, с кучей ссылок, в общем, все как нужно, надеюсь пригодится)

Градиентная тень для текста Сегодня разберем интересный трюк: как создать текст с градиентной тенью. Реализация очень необычная получается) HTML:

    
        <h1>Формошлёп</h1>{}
    

CSS:

    
        h1 {
  font-family: sans-serif;
  font-size: 10vw;
  background: linear-gradient(4deg, #548cff 10%, #f900bf 90%);
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: -0.08em -0.08em #fff;
}{}
    

■ background: linear-gradient() — создаём градиент. ■ -webkit-text-fill-color: transparent — делаем заливку текста прозрачной. ■ background-clip: text — обрезаем фон по форме букв. ■ text-shadow: -0.08em -0.08em #fff; — добавляем белую тень, смещённую влево-вверх с помощью отрицательных значений. Визуально мы видим: белый текст с градиентной тенью. Но на самом деле: ■ Белый "текст" — это text-shadow тень. ■ Градиентная "тень" — это настоящий текст с background-clip. Такие вот фокусы) Пример можно глянуть здесь.

Показываем URL рядом со ссылкой Давайте рассмотрим простой, но эффектный приём — как автоматически показывать адрес ссылки прямо в тексте. Используется это дело нечасто, но может пригодится там, где юзеру нужно видеть, куда ведет ссылка. HTML:

    
        <p>
  Идите в <a href="https://www.google.com/">Google</a>, 
  если вам нужно найти какую-либо информацию😎
</p>{}
    

Показываем URL:

    
        a::after {
  content: ' → ' attr(href);
  opacity: 0.8;
  font-size: 20px;
}{}
    

■ a::after — создаем псевдоэлемент после содержимого ссылки. ■ content: ' → ' attr(href) — добавляем стрелку → для визуального разделения. ■ attr(href) — функция CSS, которая вытаскивает значение атрибута href. ■ Браузер автоматически подставляет URL вместо attr(href). Если ссылка будет слишком длинная, то можно добавить word-break: break-all; для нормального переноса. Еще один простой CSS-трюк, в нашу коллекцию, который не требует JS) Пример, как всегда, здесь.

Счетчик отмеченных чекбоксов на CSS Сегодня давайте рассмотрим, как сделать визуальный счетчик отмеченных чекбоксов вообще без JS — на чистом CSS. HTML:

    
        <div class="wrapper">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <input type="checkbox">
  <span>=</span>
  <output></output>
</div>{}
    

Здесь у нас пять чекбоксов, знак равенства и пустой <output>, куда будем выводить число. Создаем счетчик:

    
        .wrapper {
  counter-reset: total;
}{}
    

counter-reset: total создает переменную-счетчик с именем total. Увеличиваем при отметке:

    
        input:checked {
  counter-increment: total;
}{}
    

Каждый отмеченный чекбокс :checked увеличивает счетчик total на единицу. Выводим результат:

    
        output::before {
  content: counter(total);
}{}
    

Псевдоэлемент ::before вставляет содержимое перед <output>. Функция counter(total) возвращает текущее значение счетчика — и оно автоматически обновляется при изменении. Можно использовать для ситуаций, когда нужны визуальные подсчеты, без логики на JS) Пример лежит здесь.