3061
Шлёпаем формы и красим кнопки... Блог про фронтенд — просто, понятно и с юмором. Всех обнял, приподнял, пошел пилить для вас годноту) Связь: @advertos
Как владельцы макбуков в модной кофейне видят твой 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 резервирует место под скроллбар заранее, даже когда его еще нет и все, контент больше не прыгает)
Убираем отступ под изображением
Микро лайфхак для новичков.
Когда мы вставляем изображение на страницу, то тег <img src="image.jpg"> по умолчанию является строчным элементом, а поэтому и получаем отступ снизу (для "хвостиков" букв, вроде gjpqy).
Чтобы пофиксить этот момент достаточно изображение сделать блочным элементом:
img {
display: block;
}line-height: 0.img {
display: block;
max-width: 100%;
height: auto;
}
Управление цепочкой прокрутки окна
Замечали такое, что когда открыто модальное окно, в котором туча текста и есть скролл, мы скроллим модальное окно, а когда доскроллим его до конца, то начинается скроллиться уже окно барузера?
Вот это называется "цепочка прокрутки", когда после окончания одного скролла, идет скролл внешнего элемента.
Победить это дело можно с помощью свойства overscroll-behavior.
С его помощью можно настроить прокрутку так, чтобы вложенные элементы не передавали скролл родителю.
Достаточно указать overscroll-behavior: contain; — скролл только в пределах текущего элемента.
Пример работы можно увидеть здесь, попробуйте удалить overscroll-behavior: contain; и как говорится, ощутите разницу)
Плавная прокрутка с эффектом привязки: CSS Scroll Snap
Модный эффект для верстки лендингов) Когда нужна плавная прокрутка с привязкой к секциям.
Давайте разберем, как это дело можно реализовать.
Создадим разметку:
<div class="scroll-wrapper">
<div class="scroll-section section1"><h2>Section 1</h2></div>
<div class="scroll-section section2"><h2>Section 2</h2></div>
<div class="scroll-section section3"><h2>Section 3</h2></div>
</div>
.scroll-wrapper {
height: 100vh;
overflow-y: auto;
scroll-snap-type: y mandatory;
}
.scroll-section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}scroll-snap-type: y mandatory — включает привязку прокрутки по оси Y, фиксируя каждую секцию.scroll-snap-align: start — выравнивает секции по верхнему краю при прокрутке.
Горячие клавиши в VS Code
Принес еще немного годноты для ускорения верстки)
Вроде бы очевидные вещи, которые реально помогают, но многие про них не знают или забывают, так что если что, то теперь знайте или не забывайте)
Ну, а здесь можно найти официальные PDF с хоткеями для каждой ОС в VS Code:
■ Windows
■ macOS
■ Linux
Меняем кнопку Enter виртуальной клавиатуры
Разберем интересный и простой трюк, который сделает наши формы, на мобильных устройствах, умнее — атрибут enterkeyhint.
Он позволяет менять надпись на клавише Enter в зависимости от того, что делает пользователь — ищет информацию, отправляет сообщение или переходит к следующему полю.
Браузеры моб. устройств отображают эту кнопку по-разному, в зависимости от значения атрибута.
Добавляем атрибут к <input> или <textarea>:
<input type="text" id="message" placeholder="Введите сообщение..." enterkeyhint="send">
enter — стандартная кнопка (по умолчанию)done — «Готово»go — «Перейти» next — «Далее»search — «Найти»send — «Отправить»
Адаптивные колонки
Если вам вдруг позарез необходимо сверстать адаптивные текстовые колонки, то можно обойтись без флексов и гридов, использовав columns, все делается буквально одной строчкой:
.container {
columns: auto 20rem;
}auto — означает автоматическое определение количества колонок.20rem — минимальная ширина каждой колонки.
Нарезаем изображения
Сегодня давайте бегло пробежимся по CSS-свойству, благодаря которому мы можем делать изображения таких форм, которые нафантазировали в своих головах дизайнеры)
Это свойство clip-path, которое позволяет обрезать изображение по заданной форме.
Основные формы:
1. Круг:
.circle {
clip-path: circle(50% at center);
}.ellipse {
clip-path: ellipse(25% 40% at 50% 50%);
}.rhombus {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}X% Y%. Точки соединяются в указанном порядке.
Шпаргалка по 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
Нашел еще пару интересных видосов в виде шпаргалки, решил с вами поделиться.
Конечно, здесь только малая часть возможности гридов, но анимировано красиво и показано максимально доходчиво.
Новичкам будет полезно увидеть наглядно, как это работает)
Когда сеньор взял фреймворк и быстро сдал в прод, а джуну показал, как всё написать с нуля)
Читать полностью…
Предпросмотр картинки перед загрузкой
Если в форму на сайте нужно отправить какую-то картинку, то бывает полезно сделать предпросмотр этой картинки, перед загрузкой.
Давайте, разберем здесь простой пример, как это можно реализовать.
<div class="upload-container">
<label class="upload-label">Загрузите картинку любого формата (JPG, JPEG, PNG, GIF)</label>
<div class="file-input-wrapper">
<input type="file" id="imageInput" class="file-input" accept="image/*">
<label for="imageInput" class="file-button">Обзор...</label>
<span class="filename" id="filename">Файл не выбран</span>
</div>
</div>
URL.createObjectURL, потом отображаем ее в <img>.
Размытый фон для изображений на CSS
Бывает, что контейнер шире изображения, изображение растянуть нельзя, но хочется, чтобы фон выглядел красиво.
Разберем интересный способ заполнить пространство контейнера с помощью размытого фона.
Создадим контейнер с изображением:
<div class="image-container">
<img src="image.jpg" class="main-image">
</div>
.image-container {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}.image-container::before {
content: "";
position: absolute;
background-image: url("image.jpg");
background-size: 100% 100%;
filter: blur(5px) brightness(50%);
z-index: 0;
}.main-image {
z-index: 1;
object-fit: contain;
}
100vh vs 100dvh
Вы задали блоку высоту 100vh, чтобы он занимал весь экран, но на мобильном устройстве появился скролл. Бывало такое?)
Разберемся почему это происходит и как это пофиксить.
Когда мы используем 100vh — моб. браузеры интерпретируют это, как 100% от максимальной высоты экрана, а не фактической видимой области.
Результат: часть содержимого может быть "съедена" панелью навигации браузера и появляется лишний скролл.
Для решения этой проблемы существует единица измерения dvh (dynamic viewport height), которая учитывает фактическую доступную высоту экрана, исключая адресную строку и навигационную панель браузера на мобильных устройствах.
Поддерживается в большинстве современных браузеров, но если хотите подстраховаться, то можно сделать так:
.full-height {
height: 100vh; /* Fallback для старых браузеров */
height: 100dvh; /* Для современных браузеров */
}
Отступы для прокрутки — scroll-padding
Было у вас такое, что вы сделали якорную ссылку для скролла к элементу, все было классно, но потом узнали, что хедер должен быть фиксированным?
Зафиксировали хедер, теперь скролл доходит до элемента, но половина контента скрыта под этим хедером, который никому не нужен, но "по дизайну так надо")
Раньше мы решали это костыльными способами:
■ Добавляли невидимый div перед нужным элементом.
■ Писали JavaScript для подсчета высоты хедера.
Но теперь все проще, есть scroll-padding-top, который решает проблему в одну строчку:
html {
scroll-padding-top: 80px; /* Высота хедера */
}
Текстовый фрагмент
Недавно узнал про еще одну интересную фишку, под названием "ссылка на текстовый фрагмент". Т.е. мы можем напрямую ссылаться на определенную часть текста, не используя при этом идентификатор и т.п.
Делается это с помощью #:~:text= в ссылке.
Реализуется таким образом:
<a href="#:~:text=фрагмент">ссылка на фрагмент</a>
::target-text:::target-text {
background: black;
color: white;
}
CSS Nesting
Кто не знал, в нативном CSS уже есть такая штука, как nesting(вложенность). Вещь удобная, но в целом не новая, если вы раньше работали с SASS, LESS и.т.д.
Так вот, теперь CSS начал это уметь "из коробки".
Пример простой разметки:
<div class="card">
<h2 class="title">Карточка</h2>
<button class="button">Кнопка</button>
</div>
.card {
background: #f5f5f5;
padding: 16px;
.title {
font-size: 20px;
}
.button {
background: #007bff;
color: #fff;
padding: 8px;
&:hover {
background: #0056b3;
}
}
}.card {
background: #f5f5f5;
padding: 16px;
}
.card .title {
font-size: 20px;
}
.card .button {
background: #007bff;
color: #fff;
padding: 8px;
}
.card .button:hover {
background: #0056b3;
}
clip-path для блоков
Кстати, свойство clip-path можно юзать не только, для обрезки изображений.
С помощью этого свойства можно стилизовать в целом любые блоки, к примеру, на лендингах можно выделять различные смысловые секции.
Так можно запилить скошенный блок для первой секции, как на картинке в превью поста:
.hero {
min-height: 50vh;
background: #4a6bff;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
Фигурные обтекания с shape-outside
Частенько, особенно при верстке лендингов, приходится делать фигурное обтекание картинок текстом.
Свойство shape-outside, как раз на этом специализируется. Оно позволяет задать форму, вокруг которой будет обтекать текст и не просто прямоугольник, а круг, треугольник или даже сложную SVG-фигуру.
Чтобы все обтекало, как надо, достаточно задать блоку float и shape-outside. Форму можно определить через:
■ circle()
■ ellipse()
■ polygon()
■ url() если форма задана в SVG
Пример с кругом:
.shape {
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
background: #3498db;
border-radius: 50%;
}