3061
Шлёпаем формы и красим кнопки... Блог про фронтенд — просто, понятно и с юмором. Всех обнял, приподнял, пошел пилить для вас годноту) Связь: @advertos
Разбиваем список на колонки с помощью columns
Иногда бывает задача взять список и разбить его на несколько колонок. Наверное, самый простой способ для этого — это использовать CSS-свойство columns.
Допустим, у нас есть обычный HTML-список:
<ul class="multi-column-list">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<li>Пункт 5</li>
<li>Пункт 6</li>
</ul>
.multi-column-list {
columns: 2;
}columns — норм выбор)
Убираем стрелочки у <input type="number">
При использовании <input type="number"> браузеры автоматом добавляют к полю стрелочки (спиннеры), которые позволяют увеличивать или уменьшать значение с помощью клика. Это удобно, но не всегда желательно с точки зрения дизайна или логики работы интерфейса.
Убираем стрелки с помощью псевдоэлементов:
/* Убирает стрелки в Chrome, Safari, Edge */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Убирает стрелки в Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
Стилизуем первую строку текста
Ранее, здесь мы уже рассматривали использование псевдоэлемента ::first-letter, сегодня давайте вспомним о его близком "соседе" — ::first-line) Он чуть менее известен, но тоже интересен.::first-line применяется к первой строке текста внутри блочного элемента — чаще всего к абзацу <p>, но также может работать с любыми блоками с display: block.
Выглядит это так:
p::first-line {
font-weight: bold;
color: #2c3e50;
}
Счетчик уведомлений с помощью атрибутов
Если вам вдруг нужно сделать вывод уведомлений, рядом с кнопкой, без использования отдельного html элемента (типа <span class="badge">), то можно попробовать сделать это через data-count самой кнопки.
Используем ::before + attr(data-count)
Разметка:
<button data-count="7">Уведомления</button>
.button::before {
content: attr(data-count);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -0.75em;
right: -0.75em;
background-color: #dd7973;
border-radius: 50%;
width: 1.5em;
height: 1.5em;
}
/* Скрываем, если нет уведомлений */
.button[data-count=""]::before {
display: none;
}data-count пуст, бейдж исчезает display: none.
Live-preview проекта на мобильном устройстве
Если вы верстаете в VS Code, то вы знаете про Live Server, так вот, он позволяет смотреть результат не только в браузере ПК, но и на мобильном устройстве.
Для этого нужно:
■ Убедиться, что ПК и телефон в одной Wi-Fi сети.
■ Найти локальный IP ПК:
● Можно открыть "Параметры сети и Интернет", далее кнопка "Свойства" и там найти IPv4-адрес.
● Можно в командной строке прописать ipconfig и там также найти IPv4-адрес.
■ Открываем браузер в телефоне и вводим:http://[IP-компьютера]:5500 (например http://192.168.1.10:5500)
И всё, теперь изменения в коде автоматически обновляются и в браузере на телефоне)
У меня завелось не сразу, пришлось в защитнике Windows разрешать подключение для VS Code.
Решается проблема так:
■ откройте монитор защитника Windows:
● Жмем win+r и вводим wf.msc
● Переходим в "Правила для входящих подключений", находим там Visual Studio Code.
● Двойной клик и отмечаем "Разрешить подключение".
После этого всё должно заработать)
Выбрать камеру (фронтальную или основную) прямо из браузера
На днях я наткнулся на одну интересную фишку — возможность указать, какую камеру использовать при загрузке фото или видео с мобильного устройства.
Причем это работает прям через HTML атрибут.
<!-- Фото с фронтальной камеры -->
<input type="file" capture="user" accept="image/*" />
<!-- Фото с основной камеры -->
<input type="file" capture="environment" accept="image/*" />
<!-- Видео с фронтальной камеры -->
<input type="file" capture="user" accept="video/*" />
<!-- Видео с основной камеры -->
<input type="file" capture="environment" accept="video/*" />
capture="user" — открывает фронтальную камеру.capture="environment" — открывает основную (заднюю) камеру.
Выделение текста одним кликом
Еще один микро-лайфхак о том, как облегчить жизнь пользователям. Сделаем так, чтобы выделять текст можно было одним кликом - удобно для выделения кода, номеров заказов, реф. кодов и т.п.
Делается это с помощью свойства user-select.
CSS-свойство user-select контролирует, может ли пользователь выделить текст на странице. У него есть несколько значений, но нас интересует:
user-select: all;
<div class="code-block">
<code>npx create-react-app my-app</code>
</div>
.code-block code {
user-select: all;
}<code> будет выделен автоматически.
Как владельцы макбуков в модной кофейне видят твой Lenovo)
Читать полностью…
Автоотступ для выравнивания элементов
При верстке часто возникает задача — разместить несколько элементов в строку, а один из них вытолкнуть, чтобы он не зависел от остальных.
Например: логотип, меню и кнопка входа справа.
Flexbox с этим делом справляется на ура)
Разберем на примере:
<div class="header">
<div class="logo header-block">лого</div>
<div class="menu header-block">меню</div>
<div class="login header-block">вход</div>
</div>
display: flex, а чтобы блок <div class="login header-block">вход</div> отлетел вправо, добавим ему margin-left: auto..header {
display: flex;
}
.header-block {
display: flex;
align-items: center;
justify-content: center;
}
.login {
margin-left: auto;
width: 100px;
}
Скрываем текст на кнопках при нехватке места
Иногда в карточках бывает несколько кнопок в ряд, при адаптиве их нельзя переносить одну под другую, а если просто уменьшать их размер, то это выглядит мягко говоря не очень.
Выходом может быть скрытие текста кнопки и отображение только ее иконки, чтобы было понятно, что это вообще за кнопка)
Следить за моментом, когда нужно скрывать текст, удобно с помощью контейнерных запросов (container queries).
Просто указываем при каком размере контейнера скрыть текст и все:
.card {
container-type: inline-size; /* Превращаем элемент в контейнер для адаптивных стилей */
}
@container (max-width: 320px) {
.btn-text {
display: none; /* Скрываем текст */
}
}
Стилизация кнопки выбора файла
Раньше, для того, чтобы поменять стили для кнопки загрузки файлов, приходилось скрывать стандартный input и запиливать свою красивую кнопку. Т.к. браузеры ограничивают возможности прямой стилизации этой кнопки.
Но теперь в современных браузерах появилась поддержка псевдоэлемента ::file-selector-button, который дает возможность стилизовать эту кнопку)
Разметка:
<input type="file" class="styled-file-input" />
.styled-file-input::file-selector-button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
Фильтр фона с помощью CSS
Давайте сегодня разберем свойство backdrop-filter, оно добавляет эффекты к области за элементом.
Причем, сам элемент остаётся нетронутым, а фон под ним меняется. Например, можно сделать эффект матового стекла.
Работает это свойство просто:
.element {
background: rgba(255, 255, 255, 0.2); /* Полупрозрачный фон */
backdrop-filter: blur(5px); /* Размытие фона */
}backdrop-filter похоже на filter, но меняет не сам элемент, а его фон.blur(px) — размытие фона.brightness(%) — яркость.contrast(%) — контрастность. grayscale(%) — переводит фон в оттенки серого. opacity(%) — прозрачность фона. sepia(%) — придаёт фону тёплый, коричневатый оттенок. hue-rotate(deg) — изменяет оттенок фона. invert(%) — инвертирует цвета.
Использование :empty как заглушки для изображений
Бывают такие ситуации, что во время верстки нет готового контента, особенно это касается изображений. Приходится применять различные заглушки от сервисов типа placeholder.com
Но есть и еще один интересный способ — использование псевдокласса :empty.
Псевдокласс :empty срабатывает, когда элемент полностью пустой (без текста, дочерних элементов и даже пробелов). Это отлично подходит для создания заглушек:
.image-container:empty::before {
content: "No Image Available";
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
width: 100%;
height: 100%;
font-size: 1.2rem;
color: #888;
background-color: #ddd;
text-align: center;
}<img> внутрь контейнера, и заглушка исчезает.
Убираем скачок контента при появлении полосы прокрутки
Замечали, что контент сайта может сдвигаться в зависимости от того отображается полоса прокрутки или нет?
Например, если у страницы нет скролла, затем нажать на раскрывающийся контент и при появлении этого контента появляется скролл и все сдвигается влево.
Теперь весь этот беспредел можно фиксить всего лишь одним свойством - scrollbar-gutter.
Достаточно добавить правило:
html {
scrollbar-gutter: stable;
}scrollbar-gutter: stable резервирует место под скроллбар заранее, даже когда его еще нет и все, контент больше не прыгает)
Блок по ширине контента — width: fit-content
Если нужно, чтобы блок был ровно такой ширины, как его содержимое, но при этом не вылезал за границы родителя, то есть отличное решение — width: fit-content.fit-content заставляет элемент:
■ Сжиматься под содержимое, если оно меньше доступной ширины.
■ Оставаться в пределах родителя, если контент слишком широкий.
Т.е. грубо говоря, width: fit-content ведет себя, как inline-block.
.fit-content {
width: fit-content;
}
Css Grid Layout
Еще один интересный видос обнаружил, теперь про то, как быстро накидать стандартную сетку сайта (шапка, сайдбар, контент и подвал) с помощью гридов.
Код из видео, разметка:
<main>
<header>Header</header>
<article>Content</article>
<aside>Sidebar</aside>
<footer>Footer</footer>
</main>
main {
display: grid;
grid-template-areas:
"head head head"
"side content content"
"foot foot foot";
grid-template-rows: 30px auto 30px;
min-height: 100vh;
}
header {
grid-area: head;
}
article {
grid-area: content;
}
aside {
grid-area: side;
}
footer {
grid-area: foot;
}
Мощная шпаргалка по CSS
Нашел на гитхабе крутую шпаргалку по CSS, сразу захотелось с вами поделиться)
Она прям реально большая, вот что в ней есть:
■ Основы CSS
■ Селекторы
■ Блочная модель
■ Позиционирование
■ Flexbox
■ Grid Layout
■ Трансформации и переходы
■ Анимации
■ Современные функции и переменные
■ Адаптивный дизайн
■ CSS Modules и методологии
■ Новые CSS-свойства
■ Контейнерные запросы
■ Логические свойства
■ Субгриды
■ Слои каскада
■ Дополнительные современные возможности
Согласитесь круто)
Находится она здесь — https://gist.github.com/dmitry-osin/c64f7d8eb9ed60cc932c4c56ac7eae22
Эффект тряски полей в форме
Сегодня рассмотрим эффект тряски — простой, но интересный способ сделать валидацию форм живой и понятной)
Делается это с помощью двух вещей:
1. Keyframes анимация
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}
:user-invalidinput:user-invalid {
border: 2px solid red;
animation: shake 0.3s ease;
}:user-invalid, применяется анимация animation: shake 0.3s ease; которая слегка двигает поле влево-вправо, создавая эффект "ошибки".
Отключаем ховер на мобильных устройствах
Ховер-эффекты работают при наведении курсора, но на сенсорных экранах нет мыши — вместо этого есть касания.
Из-за этого могут возникать проблемы: "залипание" стилей — после тапа элемент остается в состоянии :hover, пока пользователь не коснётся другого места. Это может выглядеть странно)
Чтобы ховер работал только на устройствах с мышью, можно использовать CSS-медиазапросы:
/* Ховер только для мыши */
@media (hover: hover) {
.btn:hover {
background: #4CAF50;
}
}
Управление градиентом в DevTools
Если кто не знал (как я), то в DevTools, есть приблуда для управления направлением градиента.
Находится на вкладке Elements в стилях, на видео сверху, наглядно показал, как пользоваться.
Поэтому, если у вас есть градиент, в котором указан угол, то можно поиграться и подобрать оптимальный вариант)
Насколько понял такая фишка только в хроме, в firefox не нашел.
Улучшаем читаемость текста на фоновом изображении
Иногда фоновая картинка мешает нормально прочитать текст, который находится над ней. Для решения этой проблемы отлично подходит линейный градиент.
Буквально одной строчкой можно пофиксить проблему)
Наш фон:
background-image: url('image.jpg');background-image: linear-gradient(rgb(255, 255, 255, 0.4), rgb(255, 255, 255, 1)), url('image.jpg');linear-gradient добавляем белый полупрозрачный градиент — это сделает текст четким и сохранит красоту фона.
Аккордеон на чистом HTML и CSS
Сделаем такой аккордеон, чтобы одновременно был открыт только один элемент. В этом нам поможет старый добрый <details>, но с улучшением)
Будем использовать атрибут name, который превращает <details> в группу элементов.
И еще добавим атрибут open у первого элемента, чтобы сделать его раскрытым по умолчанию.
Получаем такой код:
<div class="accordion">
<details name="my-accordion" open>
<summary>Первый пункт</summary>
<div class="content">
<p>Текст</p>
</div>
</details>
<details name="my-accordion">
<summary>Второй пункт</summary>
<div class="content">
<p>Текст</p>
</div>
</details>
</div>
Шпаргалка по Emmet
Все знают про Emmet и про то, как он ускоряет процесс верстки. Но обычно в работе используется лишь малая часть того, что он позволяет делать.
Конечно, все его сокращения запомнить трудно, поэтому вот вам официальная шпаргалка — https://docs.emmet.io/cheat-sheet/
Освежите в памяти или может быть, найдете то, что раньше не замечали.
Там же есть ссылка pdf, если нужно распечатать)
Основные способы добавить иконку в input
Иногда требуется отображать в input иконку поиска и т.п., собрал здесь 3 основных способа сделать это)
1) Background-image
.bg-icon {
background-image: url('...');
background-repeat: no-repeat;
background-position: 10px center;
background-size: 16px;
}.wrapper::before {
content: "";
background-image: url('...');
position: absolute;
}input не может иметь псевдоэлементы, то требуется обёртка.<div class="input-wrapper">
<input type="text">
<svg class="icon">...</svg>
</div>
fill, анимируем, добавляем hover-эффекты и т.п.
Надеюсь, вы ответите именно так, после прочтения этого поста)
Наш канал вырос до 3000 подписчиков, вашу активность, вопросы и поддержку я ценю больше всего — это то, что делает наш канал таким уютным и живым!
Поэтому сейчас хочу открыто поделиться планами по развитию нашего канала.
Чтобы канал рос дальше и становился еще лучше, мне нужно покупать рекламу, а для этого нужны деньги.
Поэтому буду иногда размещать рекламные посты в нашем канале, такой вот круговорот)
Но не переживайте, рекламы будет немного, максимум пару постов в неделю)
Без спама и мусора, только по нашей теме.
Многие из вас, тоже пришли сюда через рекламу, и это нормально, так работает развитие.
Если есть вопросы, критика или предложения — всегда готов обсудить)
Если вас кто-то спросит, что такое div с классом wrapper)
Читать полностью…
Делаем элемент с margin, который не вылезает за границы родителя
Иногда бывает задача сделать так, чтобы элемент имел margin и растягивался на всю ширину, но при этом не выходил за пределы родительского контейнера.
Логично задать width: 100% и margin: 20px, но элемент вылезает за границы.
Простой подход не работает, потому что margin добавляется к ширине, а не вычитается из неё:
■ Ширина элемента = 100% от родителя.
■ Плюс margin 20px слева и справа.
■ Итого: 100% + 40px = переполнение.
Рабочее решение: calc()
.child {
width: calc(100% - 40px); /* вычитаем margin'ы */
margin: 20px;
}
Видео-шпаргалка: CSS Grid
Нашел еще пару интересных видосов в виде шпаргалки, решил с вами поделиться.
Конечно, здесь только малая часть возможности гридов, но анимировано красиво и показано максимально доходчиво.
Новичкам будет полезно увидеть наглядно, как это работает)
Когда сеньор взял фреймворк и быстро сдал в прод, а джуну показал, как всё написать с нуля)
Читать полностью…