This media is not supported in your browser
VIEW IN TELEGRAM
Адаптивные колонки
Если вам вдруг позарез необходимо сверстать адаптивные текстовые колонки, то можно обойтись без флексов и гридов, использовав
Вы получаете сбалансированный многоколоночный макет, где:
-
-
Кстати, это можно использовать не только для текста, но и для списков, например, в футере, где обычно располагается по 50 ссылок)
Потестить код можно здесь.
Если вам вдруг позарез необходимо сверстать адаптивные текстовые колонки, то можно обойтись без флексов и гридов, использовав
columns, все делается буквально одной строчкой:.container {
columns: auto 20rem;
}Вы получаете сбалансированный многоколоночный макет, где:
-
auto — означает автоматическое определение количества колонок.-
20rem — минимальная ширина каждой колонки.Кстати, это можно использовать не только для текста, но и для списков, например, в футере, где обычно располагается по 50 ссылок)
Потестить код можно здесь.
👍25🔥15❤2
CSS Nesting
Кто не знал, в нативном CSS уже есть такая штука, как nesting(вложенность). Вещь удобная, но в целом не новая, если вы раньше работали с SASS, LESS и.т.д.
Так вот, теперь CSS начал это уметь "из коробки".
Пример простой разметки:
CSS Nesting:
То же самое, на стандартном CSS:
Здесь приготовил для вас более продвинутый пример со сравнением разных подходов.
Кто не знал, в нативном CSS уже есть такая штука, как nesting(вложенность). Вещь удобная, но в целом не новая, если вы раньше работали с SASS, LESS и.т.д.
Так вот, теперь CSS начал это уметь "из коробки".
Пример простой разметки:
<div class="card">
<h2 class="title">Карточка</h2>
<button class="button">Кнопка</button>
</div>
CSS Nesting:
.card {
background: #f5f5f5;
padding: 16px;
.title {
font-size: 20px;
}
.button {
background: #007bff;
color: #fff;
padding: 8px;
&:hover {
background: #0056b3;
}
}
}То же самое, на стандартном CSS:
.card {
background: #f5f5f5;
padding: 16px;
}
.card .title {
font-size: 20px;
}
.card .button {
background: #007bff;
color: #fff;
padding: 8px;
}
.card .button:hover {
background: #0056b3;
}Здесь приготовил для вас более продвинутый пример со сравнением разных подходов.
🔥32👍15❤1👌1🤝1
Текстовый фрагмент
Недавно узнал про еще одну интересную фишку, под названием "ссылка на текстовый фрагмент". Т.е. мы можем напрямую ссылаться на определенную часть текста, не используя при этом идентификатор и т.п.
Делается это с помощью
Реализуется таким образом:
После перехода по этой ссылке, браузер проскроллит до первого совпадения с указанным в ссылке текстом и подсветит его.
А для стилизования этого выделения можно использовать псевдокласс
Кстати, еще один способ использования:
нашли вы интересную статью и хотите поделиться с кентом определенной инфой из статьи, чтобы не объяснять "читай с 7 абзаца, после третьей картинки", вы можете сделать так: https://www.w3.org/standards/#:~:text=W3C%20publishes%20recommendations
Ну и как обычно, код можно посмотреть здесь.
Недавно узнал про еще одну интересную фишку, под названием "ссылка на текстовый фрагмент". Т.е. мы можем напрямую ссылаться на определенную часть текста, не используя при этом идентификатор и т.п.
Делается это с помощью
#:~:text= в ссылке.Реализуется таким образом:
<a href="#:~:text=фрагмент">ссылка на фрагмент</a>
После перехода по этой ссылке, браузер проскроллит до первого совпадения с указанным в ссылке текстом и подсветит его.
А для стилизования этого выделения можно использовать псевдокласс
::target-text:::target-text {
background: black;
color: white;
}Кстати, еще один способ использования:
нашли вы интересную статью и хотите поделиться с кентом определенной инфой из статьи, чтобы не объяснять "читай с 7 абзаца, после третьей картинки", вы можете сделать так: https://www.w3.org/standards/#:~:text=W3C%20publishes%20recommendations
Ну и как обычно, код можно посмотреть здесь.
🔥48👍18❤2
Меняем кнопку Enter виртуальной клавиатуры
Разберем интересный и простой трюк, который сделает наши формы, на мобильных устройствах, умнее — атрибут
Он позволяет менять надпись на клавише Enter в зависимости от того, что делает пользователь — ищет информацию, отправляет сообщение или переходит к следующему полю.
Браузеры моб. устройств отображают эту кнопку по-разному, в зависимости от значения атрибута.
Добавляем атрибут к
После этого кнопка Enter в моб. браузере будет называться "Отправить".
Доступные значения:
■
■
■
■
■
■
Пример можно глянуть здесь.
Разберем интересный и простой трюк, который сделает наши формы, на мобильных устройствах, умнее — атрибут
enterkeyhint. Он позволяет менять надпись на клавише Enter в зависимости от того, что делает пользователь — ищет информацию, отправляет сообщение или переходит к следующему полю.
Браузеры моб. устройств отображают эту кнопку по-разному, в зависимости от значения атрибута.
Добавляем атрибут к
<input> или <textarea>:<input type="text" id="message" placeholder="Введите сообщение..." enterkeyhint="send">
После этого кнопка Enter в моб. браузере будет называться "Отправить".
Доступные значения:
■
enter — стандартная кнопка (по умолчанию)■
done — «Готово»■
go — «Перейти» ■
next — «Далее»■
search — «Найти»■
send — «Отправить»Пример можно глянуть здесь.
👍40🔥13✍4❤2😎1
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