This media is not supported in your browser
VIEW IN TELEGRAM
Отступы для прокрутки — scroll-padding
Было у вас такое, что вы сделали якорную ссылку для скролла к элементу, все было классно, но потом узнали, что хедер должен быть фиксированным?
Зафиксировали хедер, теперь скролл доходит до элемента, но половина контента скрыта под этим хедером, который никому не нужен, но "по дизайну так надо")
Раньше мы решали это костыльными способами:
■ Добавляли невидимый
■ Писали JavaScript для подсчета высоты хедера.
Но теперь все проще, есть
И всё. Теперь браузер сам знает, что нужно оставить место сверху. Без костылей и расчетов)
Демку потестить можно здесь.
Было у вас такое, что вы сделали якорную ссылку для скролла к элементу, все было классно, но потом узнали, что хедер должен быть фиксированным?
Зафиксировали хедер, теперь скролл доходит до элемента, но половина контента скрыта под этим хедером, который никому не нужен, но "по дизайну так надо")
Раньше мы решали это костыльными способами:
■ Добавляли невидимый
div перед нужным элементом.■ Писали JavaScript для подсчета высоты хедера.
Но теперь все проще, есть
scroll-padding-top, который решает проблему в одну строчку:html {
scroll-padding-top: 80px; /* Высота хедера */
}И всё. Теперь браузер сам знает, что нужно оставить место сверху. Без костылей и расчетов)
Демку потестить можно здесь.
👍37🔥17✍6❤3
Горячие клавиши в VS Code
Принес еще немного годноты для ускорения верстки)
Вроде бы очевидные вещи, которые реально помогают, но многие про них не знают или забывают, так что если что, то теперь знайте или не забывайте)
Ну, а здесь можно найти официальные PDF с хоткеями для каждой ОС в VS Code:
■ Windows
■ macOS
■ Linux
Принес еще немного годноты для ускорения верстки)
Вроде бы очевидные вещи, которые реально помогают, но многие про них не знают или забывают, так что если что, то теперь знайте или не забывайте)
Ну, а здесь можно найти официальные PDF с хоткеями для каждой ОС в VS Code:
■ Windows
■ macOS
■ Linux
🔥21👍7✍3❤1
100vh vs 100dvh
Вы задали блоку высоту
Разберемся почему это происходит и как это пофиксить.
Когда мы используем
Результат: часть содержимого может быть "съедена" панелью навигации браузера и появляется лишний скролл.
Для решения этой проблемы существует единица измерения
Поддерживается в большинстве современных браузеров, но если хотите подстраховаться, то можно сделать так:
Демку кода делать не стал, результат можно глянуть на видосах к этому посту)
Вы задали блоку высоту
100vh, чтобы он занимал весь экран, но на мобильном устройстве появился скролл. Бывало такое?)Разберемся почему это происходит и как это пофиксить.
Когда мы используем
100vh — моб. браузеры интерпретируют это, как 100% от максимальной высоты экрана, а не фактической видимой области.Результат: часть содержимого может быть "съедена" панелью навигации браузера и появляется лишний скролл.
Для решения этой проблемы существует единица измерения
dvh (dynamic viewport height), которая учитывает фактическую доступную высоту экрана, исключая адресную строку и навигационную панель браузера на мобильных устройствах.Поддерживается в большинстве современных браузеров, но если хотите подстраховаться, то можно сделать так:
.full-height {
height: 100vh; /* Fallback для старых браузеров */
height: 100dvh; /* Для современных браузеров */
}Демку кода делать не стал, результат можно глянуть на видосах к этому посту)
👍42🔥15❤4🤝2✍1
This media is not supported in your browser
VIEW IN TELEGRAM
Плавная прокрутка с эффектом привязки: 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 — выравнивает секции по верхнему краю при прокрутке.Довольно просто, но интересно, поддержка браузерами неплохая.
Глянуть код в действии можно здесь.
👍26🔥13❤2
Размытый фон для изображений на 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;
}В итоге получаем такой классный эффект, как в шапке поста)
Код можно посмотреть здесь.
👍29❤9🔥5😁1🗿1
Управление цепочкой прокрутки окна
Замечали такое, что когда открыто модальное окно, в котором туча текста и есть скролл, мы скроллим модальное окно, а когда доскроллим его до конца, то начинается скроллиться уже окно барузера?
Вот это называется "цепочка прокрутки", когда после окончания одного скролла, идет скролл внешнего элемента.
Победить это дело можно с помощью свойства
С его помощью можно настроить прокрутку так, чтобы вложенные элементы не передавали скролл родителю.
Достаточно указать
Пример работы можно увидеть здесь, попробуйте удалить
Замечали такое, что когда открыто модальное окно, в котором туча текста и есть скролл, мы скроллим модальное окно, а когда доскроллим его до конца, то начинается скроллиться уже окно барузера?
Вот это называется "цепочка прокрутки", когда после окончания одного скролла, идет скролл внешнего элемента.
Победить это дело можно с помощью свойства
overscroll-behavior.С его помощью можно настроить прокрутку так, чтобы вложенные элементы не передавали скролл родителю.
Достаточно указать
overscroll-behavior: contain; — скролл только в пределах текущего элемента.Пример работы можно увидеть здесь, попробуйте удалить
overscroll-behavior: contain; и как говорится, ощутите разницу)👍27🔥13❤3
Предпросмотр картинки перед загрузкой
Если в форму на сайте нужно отправить какую-то картинку, то бывает полезно сделать предпросмотр этой картинки, перед загрузкой.
Давайте, разберем здесь простой пример, как это можно реализовать.
Плюс еще добавим предпросмотр и кнопки.
Без JS здесь обойтись не получится.
Нужно после выбора файла получить временную ссылку на изображение, используем
Ну и оживим кнопку «Отменить», чтобы всё сбрасывалось: картинка скрывалась, поле очищалось.
Конечно, такое себе описание получилось)
Вот здесь готовый код, думаю все будет понятно после просмотра)
Если в форму на сайте нужно отправить какую-то картинку, то бывает полезно сделать предпросмотр этой картинки, перед загрузкой.
Давайте, разберем здесь простой пример, как это можно реализовать.
<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>
Плюс еще добавим предпросмотр и кнопки.
Без JS здесь обойтись не получится.
Нужно после выбора файла получить временную ссылку на изображение, используем
URL.createObjectURL, потом отображаем ее в <img>. Ну и оживим кнопку «Отменить», чтобы всё сбрасывалось: картинка скрывалась, поле очищалось.
Конечно, такое себе описание получилось)
Вот здесь готовый код, думаю все будет понятно после просмотра)
👍14🔥11❤3
Убираем отступ под изображением
Микро лайфхак для новичков.
Когда мы вставляем изображение на страницу, то тег
Чтобы пофиксить этот момент достаточно изображение сделать блочным элементом:
Теперь отступ исчезнет. Мне кажется удобнее и логичнее, чем
Можно даже добавить правило в базовый CSS-сброс:
Это сделает работу с изображениями менее нервной)
Код, на всякий случай оставил здесь.
Микро лайфхак для новичков.
Когда мы вставляем изображение на страницу, то тег
<img src="image.jpg"> по умолчанию является строчным элементом, а поэтому и получаем отступ снизу (для "хвостиков" букв, вроде gjpqy).Чтобы пофиксить этот момент достаточно изображение сделать блочным элементом:
img {
display: block;
}Теперь отступ исчезнет. Мне кажется удобнее и логичнее, чем
line-height: 0.Можно даже добавить правило в базовый CSS-сброс:
img {
display: block;
max-width: 100%;
height: auto;
}Это сделает работу с изображениями менее нервной)
Код, на всякий случай оставил здесь.
❤23👍14🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
Когда сеньор взял фреймворк и быстро сдал в прод, а джуну показал, как всё написать с нуля)
😁63❤1
Убираем скачок контента при появлении полосы прокрутки
Замечали, что контент сайта может сдвигаться в зависимости от того отображается полоса прокрутки или нет?
Например, если у страницы нет скролла, затем нажать на раскрывающийся контент и при появлении этого контента появляется скролл и все сдвигается влево.
Теперь весь этот беспредел можно фиксить всего лишь одним свойством -
Достаточно добавить правило:
Поддержку браузерами можно глянуть тут.
Ну, а сам код из примера здесь.
Замечали, что контент сайта может сдвигаться в зависимости от того отображается полоса прокрутки или нет?
Например, если у страницы нет скролла, затем нажать на раскрывающийся контент и при появлении этого контента появляется скролл и все сдвигается влево.
Теперь весь этот беспредел можно фиксить всего лишь одним свойством -
scrollbar-gutter.Достаточно добавить правило:
html {
scrollbar-gutter: stable;
}scrollbar-gutter: stable резервирует место под скроллбар заранее, даже когда его еще нет и все, контент больше не прыгает)Поддержку браузерами можно глянуть тут.
Ну, а сам код из примера здесь.
🔥39👍12❤7✍1
Видео-шпаргалка: CSS Grid
Нашел еще пару интересных видосов в виде шпаргалки, решил с вами поделиться.
Конечно, здесь только малая часть возможности гридов, но анимировано красиво и показано максимально доходчиво.
Новичкам будет полезно увидеть наглядно, как это работает)
Нашел еще пару интересных видосов в виде шпаргалки, решил с вами поделиться.
Конечно, здесь только малая часть возможности гридов, но анимировано красиво и показано максимально доходчиво.
Новичкам будет полезно увидеть наглядно, как это работает)
👍39🔥18😐2❤1
Использование :empty как заглушки для изображений
Бывают такие ситуации, что во время верстки нет готового контента, особенно это касается изображений. Приходится применять различные заглушки от сервисов типа placeholder.com
Но есть и еще один интересный способ — использование псевдокласса
Псевдокласс
Таким образом заглушки создаются чистым CSS, никаких внешних зависимостей, нет задержек на загрузку изображений-заглушек.
А когда появится настоящий контент, можно просто добавить
Потестить можно здесь.
Бывают такие ситуации, что во время верстки нет готового контента, особенно это касается изображений. Приходится применять различные заглушки от сервисов типа 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;
}Таким образом заглушки создаются чистым CSS, никаких внешних зависимостей, нет задержек на загрузку изображений-заглушек.
А когда появится настоящий контент, можно просто добавить
<img> внутрь контейнера, и заглушка исчезает.Потестить можно здесь.
👍39🔥23❤3
Делаем элемент с margin, который не вылезает за границы родителя
Иногда бывает задача сделать так, чтобы элемент имел margin и растягивался на всю ширину, но при этом не выходил за пределы родительского контейнера.
Логично задать
Простой подход не работает, потому что margin добавляется к ширине, а не вычитается из неё:
■ Ширина элемента = 100% от родителя.
■ Плюс
■ Итого: 100% + 40px = переполнение.
Рабочее решение:
Принцип простой: вычитаем размер всех margin'ов из 100%.
Такие задачи встречаются не особо часто, но все же может пригодиться)
Код можно посмотреть здесь.
Иногда бывает задача сделать так, чтобы элемент имел margin и растягивался на всю ширину, но при этом не выходил за пределы родительского контейнера.
Логично задать
width: 100% и margin: 20px, но элемент вылезает за границы.Простой подход не работает, потому что margin добавляется к ширине, а не вычитается из неё:
■ Ширина элемента = 100% от родителя.
■ Плюс
margin 20px слева и справа.■ Итого: 100% + 40px = переполнение.
Рабочее решение:
calc().child {
width: calc(100% - 40px); /* вычитаем margin'ы */
margin: 20px;
}Принцип простой: вычитаем размер всех margin'ов из 100%.
Такие задачи встречаются не особо часто, но все же может пригодиться)
Код можно посмотреть здесь.
👍28🔥13😐4
Фильтр фона с помощью 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(%) — инвертирует цвета.Наглядно посмотреть на работу можно здесь.
👍37🔥13❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Если вас кто-то спросит, что такое div с классом wrapper)
😁46👏4🗿4❤1
Стилизация кнопки выбора файла
Раньше, для того, чтобы поменять стили для кнопки загрузки файлов, приходилось скрывать стандартный
Но теперь в современных браузерах появилась поддержка псевдоэлемента
Разметка:
Стилизация:
Согласитесь, стало удобнее)
Поддержку браузерами можно глянуть здесь.
Ну, а сам код из примера ждёт вас тут.
Раньше, для того, чтобы поменять стили для кнопки загрузки файлов, приходилось скрывать стандартный
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;
}Согласитесь, стало удобнее)
Поддержку браузерами можно глянуть здесь.
Ну, а сам код из примера ждёт вас тут.
🔥39👍16❤3