Нарезаем изображения
Сегодня давайте бегло пробежимся по CSS-свойству, благодаря которому мы можем делать изображения таких форм, которые нафантазировали в своих головах дизайнеры)
Это свойство
Основные формы:
1. Круг:
50% — радиус круга, at center — положение центра.
2. Эллипс:
25% — горизонтальный радиус, 40% — вертикальный радиус, at 50% 50% — центр эллипса.
3. Многоугольник:
Каждая пара значений — это координаты точки в формате
Это самые простые примеры, можно создавать любые фигуры, а также использовать svg, в качестве маски.
Пример код можно глянуть здесь.
Сегодня давайте бегло пробежимся по CSS-свойству, благодаря которому мы можем делать изображения таких форм, которые нафантазировали в своих головах дизайнеры)
Это свойство
clip-path, которое позволяет обрезать изображение по заданной форме.Основные формы:
1. Круг:
.circle {
clip-path: circle(50% at center);
}50% — радиус круга, at center — положение центра.
2. Эллипс:
.ellipse {
clip-path: ellipse(25% 40% at 50% 50%);
}25% — горизонтальный радиус, 40% — вертикальный радиус, at 50% 50% — центр эллипса.
3. Многоугольник:
.rhombus {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}Каждая пара значений — это координаты точки в формате
X% Y%. Точки соединяются в указанном порядке.Это самые простые примеры, можно создавать любые фигуры, а также использовать svg, в качестве маски.
Пример код можно глянуть здесь.
🔥19👍11✍2❤1
clip-path для блоков
Кстати, свойство
С помощью этого свойства можно стилизовать в целом любые блоки, к примеру, на лендингах можно выделять различные смысловые секции.
Так можно запилить скошенный блок для первой секции, как на картинке в превью поста:
Здесь можно глянуть на импровизированный лендинг из 3х секций)
Кстати, свойство
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%);
}Здесь можно глянуть на импровизированный лендинг из 3х секций)
👍22🔥7❤2
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;
}В итоге получаем такой классный эффект, как в шапке поста)
Код можно посмотреть здесь.
👍28❤9🔥5😁1🗿1