Формошлёп – Telegram

Формошлёп

3.31K subscribers

141 photos

83 videos

150 links

Шлёпаем формы и красим кнопки...

Блог про фронтенд — просто, понятно и с юмором. Всех обнял, приподнял, пошел пилить для вас годноту)

Связь: @advertos

Download Telegram

About

Blog

Apps

Platform

Формошлёп

3.31K subscribers

Формошлёп

Умный перенос слов в CSS

Давайте сегодня рассмотрим еще одно интересное CSS свойство — hyphens.

Оно определяет, как будут переноситься слова через дефис, если строка не помещается в родительский контейнер.

В отличие от свойств overflow-wrap и word-break, свойство hyphens переносит слова именно по слогам и ставит дефис.

Но нужно помнить, что для правильного переноса слов нужно, чтобы язык страницы был определен <html lang="ru">.

Реализация:

.text {
  hyphens: auto;
}

Сравнение блоков текста с использованием свойства hyphens и без можно глянуть здесь.

👍12🔥6

1.44K views07:10

Формошлёп

Единица ch для работы с текстом

Разберем еще одну интересную единицу измерения в CSS.

Это единица ch, она основана на ширине символа "0" в текущем шрифте. Позволяет эффективно управлять шириной текстовых блоков.

Реализация:

<p>Этот текст ограничен по ширине с помощью ch. Единица ch равна ширине символа "0", и 60ch — это примерно 60 символов в строке.</p>

p {
  max-width: 60ch;
  line-height: 1.5;
  font-family: Arial, sans-serif;
  margin: 0 auto;
  padding: 16px;
  background: #f0f0f0;
  border-radius: 8px;
}

Единицу ch можно использовать не только для max-width, но и для других свойств, например:
— width: 20ch — для фиксированной ширины поля ввода.
— text-indent: 2ch — для отступа первой строки.

Если шрифт моноширинный (например, font-family: "Courier New"), ch будет ещё точнее соответствовать количеству символов.

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

🔥8👍3

1.86K views06:01

Формошлёп

Исправление бага на продакшене 😎

😁12🤝9😎3👍2

1.52K views07:45

Формошлёп

Отображение результатов формы через <output>

Предлагаю сегодня разобрать еще один интересный тег <output>.

Это удобный способ показать результаты формы в реальном времени.

Реализация простого калькулятора суммы:

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" name="a"> +
  <input type="number" name="b"> =
  <output name="result"></output>
</form>

— Атрибут oninput — это событие, которое срабатывает каждый раз, когда юзер что-то вводит или меняет в любом поле внутри формы. В нашем случае — при изменении значений в <input>.
— parseInt(a.value) — преобразуем значения в числа
— result.value - суммируем числа
— <output name="result"> — выводим результат

Все просто и эффектно)

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

👍12🔥3

1.57K views07:10

Формошлёп

Красная строка в CSS

Недавно потребовалось запилить красную строку (первую строку абзаца с отступом), пришлось гуглить, потому что забыл. Поэтому, чтоб не забывать, решил здесь пост запилить об этом.

Выделил два основных способа реализации — классика, с помощью свойства text-indent и с помощью псевдоэлемента ::first-letter.

Вариант 1:

p {
  text-indent: 2em;
}

Вариант 2:

p::first-letter {
  margin-left: 2em;
  color: red; /* Сделаем еще первую букву красной */
}

Теперь будет под рукой, надеюсь и вам пригодится)
Посмотреть наглядно можно здесь.

👍14🔥6

1.62K views07:09

Формошлёп

This media is not supported in your browser

VIEW IN TELEGRAM

Как использовать min() для адаптивности

Хотите писать меньше медиа-запросов? CSS функция min() к вашим услугам)

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

1️⃣ Адаптивная ширина блока:

width: min(100%, 500px);

На узких экранах — 100%, на широких — до 500px.

2️⃣ Гибкие отступы:

padding: min(10vw, 50px);

Отступы растут с экраном (10vw), но не больше 50px.

3️⃣ Адаптивный шрифт:

font-size: min(8vw, 48px);

Заголовок масштабируется, но ограничен 48px — читаемо на любом устройстве.

Демонстрация работы здесь.

👍24🔥6❤2

1.72K views06:47

Формошлёп

Список с точками-разделителями на чистом CSS

Если вам нужно сверстать список с разделителями в виде точек, как в старых добрых меню или прайс-листах, то вот вам интересный способ на Flexbox.

Разметка может быть такой:

<ul class="dotted-list">
  <li>
    <span class="number">101</span>
    <span class="dots"></span>
    <span class="text">Пожарная (МЧС)</span>
  </li>
</ul>

Реализация точек:

.dotted-list .dots {
  flex-grow: 1;
  border-bottom: 2px dotted #333;
  height: 1em;
  margin: 0 4px;
  transform: translateY(-1px);
}

Как это работает?

— Flex-контейнер display: flex позволяет легко расположить элементы в строку.
— flex-grow: 1 для элемента с точками заставляет его растягиваться на всё доступное пространство.
— border-bottom: dotted создаёт видимость точек-разделителей.
— transform: translateY тонко настраивает выравнивание точек.

Все довольно просто, но задача решается)

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

👍12🔥6

1.81K views06:57

Формошлёп

Нестандартное подчёркивание текста на CSS

По умолчанию подчеркивание "разрывается" под определенными буквами (например, "g", "p", "y"). Но иногда по макету нужно сверстать так, чтобы этого разрыва не было.

Так вот, чтобы пофиксить разрыв, достаточно использовать свойство text-decoration-skip-ink: none;

Ну и вдобавок другие свойства для стилизации подчеркивания:

h1 {
  text-decoration: underline; /* Добавляем подчеркивание */
  text-decoration-color: #fac133; /* Задаем цвет линии */
  text-decoration-thickness: 10px; /* Устанавливаем толщину */
  text-decoration-skip-ink: none; /* Отключаем разрывы под буквами */
}

Посмотреть демку можно здесь.

Микро-лайфхак, про который возможно кто-то не знает, но теперь узнает)

🔥9👍8

2.03K views06:58

Формошлёп

Работает — не трогай!⁠⁠

😁12❤4✍1👍1

1.93K views07:31

Формошлёп

Эффект матового стекла на CSS

Сегодня поговорим о том, как делать крутой эффект матового стекла (glassmorphism), чтоб было прям, как на маке)

Всё волшебство делает свойство backdrop-filter, которое добавляет фильтры к фону элемента.

Пример:

background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);

А чтобы вы вообще не парились с подбором параметров, можете заюзать этот сервис: https://css.glass/

Я, кстати, оттуда и взял пример)

🔥12👍7

2.12K views07:12

Формошлёп

This media is not supported in your browser

VIEW IN TELEGRAM

Видео-шпаргалка: адаптивная верстка на CSS Grid

Нашел наглядный видос по созданию адаптивных блоков на CSS Grid, без медиа-запросов.

Код из видео:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  width: 100%;
}

Еще одна видео-шпора в нашу коллекцию)

👍19🔥6

2.26K viewsedited 07:29

Формошлёп

This media is not supported in your browser

VIEW IN TELEGRAM

Плавающие лейблы для форм

Давайте сегодня разберем, как сделать плавающие лейблы для форм (floating labels).

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

HTML-структура:

<div class="input-group">
  <input type="text" class="input-field" id="name" placeholder=" ">
  <label for="name" class="input-label">Имя</label>
</div>

CSS:

Задаем относительное позиционирование элементов:

.input-group {
  position: relative; 
}

Задаем абсолютное позиционирование метки:

.input-label {
  position: absolute;
  left: 15px;
  top: 15px;
}

Перемещаем метку вверх при фокусе или заполнении поля:

.input-field:focus + .input-label,
.input-field:not(:placeholder-shown) + .input-label {
  top: -10px;
  left: 10px;
}

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

🔥24👍10

2.57K views06:53

Формошлёп

Стилизация радио-кнопок в виде иконок

Хотите сделать радио-кнопки стильными, модными, молодежными?) Давайте сегодня разберем, как превратить их красивые иконки.

HTML:

<label class="icon-radio">
  <input type="radio" name="delivery" checked>
  <div class="icon-radio-content">
  🚚<span class="icon-radio-label">Курьер</span>
  </div>
</label>

CSS:

Скрываем стандартный input:

.icon-radio input {
  position: absolute;
  opacity: 0;
}

Стилизуем контейнер варианта:

.icon-radio-content {
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  transition: all 0.3s;
}

Выбранный вариант:

input:checked + .icon-radio-content {
  border-color: #4a6bff;
  background: #f5f7ff;
}

Эффекты при наведении:

.icon-radio:hover .icon-radio-content {
  border-color: #b3c1ff;
}

И всё, получаем крутой визуальный вид стандартных радио-кнопок)

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

🔥14👍6✍1

2.51K views07:14

Формошлёп

This media is not supported in your browser

VIEW IN TELEGRAM

Резиновые шрифты с clamp()

Для тех, устал от медиа-запросов для каждого чиха. Держите лайфхак с clamp().

Помните, как было раньше? Сначала пишешь размер шрифта для мобилок, потом для планшетов, потом для десктопов. А между ними — пара-тройка брейкпоинтов:

h1 {
  font-size: 1.5rem; /* для телефонов */
}

@media (min-width: 768px) {
  h1 {
    font-size: 2rem; /* для планшетов */
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3rem; /* для десктопов */
  }
}

И так с каждым заголовком. Код растёт, а ты седеешь)

Функция clamp() решает эту проблему одной строкой:

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Синтаксис тут максимально простой:

● Первое число — минимальный размер
● Второе — предпочтительный размер (обычно в vw)
● Третье — максимальный размер

Работает это так:

● На смартфоне размер будет 1.5rem (минимум)
● На большом экране будет 3rem (максимум)
● А между ними — плавное изменение без скачков на брейкпоинтах

clamp() экономит наше время и нервы)

🔥39👍14❤1

3.3K views07:01

Формошлёп

Открываешь ссылку в инкогнито, Гугл такой — "он открыл ее в инкогнито, значит это самое интересное, так и запишем..."

😁47👎4❤1

3.08K views07:34

Формошлёп

Группировка элементов одной строкой CSS

Сегодня поговорим о маленьком, но полезном CSS-трюке для группировки элементов.

Стандартная запись:

header a,
main a,
footer a,
nav a,
.sidebar a {
  color: red;
}

Теперь можно так — чисто и компактно:

:where(header, main, footer, nav, .sidebar) a {
  color: red;
}

Как это работает:
:where() — это псевдокласс, который позволяет группировать селекторы без увеличения специфичности. Т.е. мы говорим браузеру: "найди все ссылки a, которые находятся внутри header, main, footer, nav и .sidebar, и сделай их красными!".

Вы уже пробовали использовать :where() в своих проектах?

👍17🔥12🗿1

3.32K views06:49

Формошлёп

This media is not supported in your browser

VIEW IN TELEGRAM

:has() для интерактивных карточек с чекбоксами

Хочу показать вам еще одну интересную идею применения селектора :has().

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

.card:has(input:checked) {
  background-color: #e3f2fd;
  border-color: #2196f3;
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
  transform: translateY(-5px);
}

Как это работает:

● Селектор :has() ищет родительский элемент (карточку), содержащий определенный дочерний элемент
● input:checked — это условие: отмеченный чекбокс
● Когда чекбокс отмечен, карточка получает:
■ Фоновый цвет #e3f2fd
■ Синюю рамку #2196f3
■ Тень box-shadow
■ Смещение вверх через transform: translateY(-5px)
■ Плавную анимацию благодаря transition: all 0.3s ease

Пример работы можно увидеть на видосе в шапке поста, круто, согласитесь)

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

👍27🔥14❤4

3.77K views06:47

Формошлёп

This media is not supported in your browser

VIEW IN TELEGRAM

Подсказки с :focus-within

Помните, здесь мы обсуждали форму с плавающими лейблами? Давайте добавим в нее новую фичу с :focus-within, которая будет показывать подсказки при фокусе.

Добавим атрибут data-hint с текстом подсказки.

<div class="input-group" data-hint="Введите ваше полное имя">
  <input type="text" class="input-field" id="name" placeholder=" ">
  <label for="name" class="input-label">Имя</label>
</div>

:focus-within срабатывает, когда фокус попадает на элемент или его потомков. Мы используем это, чтобы показать подсказку.

Подсказка у нас — псевдоэлемент ::after, который берёт текст из data-hint.

Когда .input-group получает :focus-within, мы меняем стили: opacity становится 1, и подсказка плавно "всплывает" на место с помощью transform.

.input-group::after {
  content: attr(data-hint);
  position: absolute;
}
.input-group:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}

Все просто и лаконично, а наша форма хорошеет на глазах)

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

👍26🔥11❤1

2.86K views06:50

Формошлёп

This media is not supported in your browser

VIEW IN TELEGRAM

Aspect-ratio в CSS: сохраняем пропорции без лишнего кода

Хотите, чтобы квадрат был квадратом даже при масштабировании?

Свойство aspect-ratio в CSS помогает элементам сохранять заданное соотношение ширины и высоты. Это идеально для адаптивных дизайнов, где нужно, чтобы блоки, изображения или видео не теряли пропорции при изменении размеров.

Давайте сравним два блока:
— Первый — с фиксированной высотой (height: 200px), которая не меняется.
— Второй — использует aspect-ratio: 1 / 1, чтобы оставаться квадратом.

При уменьшении ширины экрана первый блок "сжимается" только по ширине, теряя форму, а второй сохраняет квадратные пропорции.

<div class="card fixed">1</div>
<div class="card aspect-ratio">2</div>

.fixed {
  height: 200px;
}

.aspect-ratio {
  aspect-ratio: 1;
}

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

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

👍17🔥8❤2😎1

2.74K views07:35

Формошлёп

Нативные поповеры в HTML

Помните, как мы годами писали кастомные решения для поповеров? Кучу JS, позиционирование, обработку кликов вне элемента... А потом ещё фиксили баги на мобилках.

Можно выдохнуть) Браузеры наконец-то добавили нативную поддержку поповеров.

Для открытия используем атрибут popovertarget, который ссылается на id поповера. А сам контейнер помечаем атрибутом popover.

<button popovertarget="mypopover">Покажи попап</button>
<div id="mypopover" popover>Контент поповера</div>

Вот и всё. Два атрибута, и работает из коробки. Никакого JS!

И да, стилизация, поповеры — это просто HTML-элементы, так что их можно стилизовать как угодно:

#mypopover {
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  padding: 16px;
  border: none;
  animation: fadeIn 0.2s ease-out;
}

#mypopover::backdrop {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
}

Поддержка по caniuse - 86.83%

Глянуть код можно здесь.

👍25🔥12❤1

3.39K views07:17

Формошлёп

This media is not supported in your browser

VIEW IN TELEGRAM

Когда джун получил первый апрув на свой пул-реквест)

😁32👍6❤2

2.87K views07:27