[Разработка веб-сайтов, CSS, Совершенный код] Трюки CSS, которые сделают из вас ниндзя верстки
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Сегодня я хочу рассказать вам о нескольких CSS-свойствах и значениях, которые редко упоминаются в специальной литературе, но, на мой вгляд, представляют определенный интерес с точки зрения скорости и качества разработки веб-интерфейсов.
Многие свойства, о которых пойдет речь, являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами, однако, если вы решите использовать какое-либо из названных свойств в продакшне, не поленитесь зайти на Can I use и уточнить поддержку (недавно сильно расстроился, обнаружив, что Safari не поддерживает атрибут loading="lazy").
Там, где можно обойтись сниппетом, я ограничусь кодом. Там, где потребуется визуализация, будет приведена ссылка на песочницу.
Я не стал делать примеры слишком красивыми, чтобы не затенять рассматриваемые свойства другими стилями.
Итак, вы готовы к нашему небольшому путешествию в удивительный и почти безграничный мир CSS? Тогда вперед.
grid + place-items
Здесь вы найдете полное визуальное руководство по Grid и Flexbox.
Данная техника позволяет выравнивать элементы по горизонтали и вертикали при помощи всего лишь двух строк кода.
.parent {
display: grid;
place-items: center;
}
place-items является сокращением для justify-items и align-items.
Это свойство может использоваться как в отношении одной, так и в отношении сразу нескольких (дочерних) ячеек.
.parent {
display: grid;
grid-template-columns: 1fr 1fr;
place-items: center
}
flex + margin
Другой современный способ выравнивания элементов по горизонтали и вертикали заключается в сочетании display: flex и margin: auto.
.parent {
display: flex;
}
.child {
margin: auto;
}
Справедливости ради следует отметить, что тоже самое можно реализовать с помощью такого сниппета:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
flex + gap
Раз уж мы заговорили о Flexbox, нельзя не упомянуть, что не так давно у нас появилась возможность добавлять отступ между flex-элементами с помощью свойства gap (этой возможности чертовски не хватало):
.parent {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
inline-flex
Данное свойство позволяет создавать строчные элементы, обладающие функциональностью Flexbox. Лучше один раз увидеть:
Извините, данный ресурс не поддреживается. :(
columns
Данная техника позволяет разделять текст на колонки. Свойство column-count определяет количество колонок, column-gap — отступ между колонками, column-rule — стили для вертикальной линии, разделяющей колонки.
Свойство columns является сокращением для column-count и column-width.
Извините, данный ресурс не поддреживается. :(
background-repeat
Свойство background-repeat определяет порядок заполнения фона указанным изображением. Значение round позволяет равномерно распределять изображения по всей ширине контейнера, а значение space добавляет между изображениями небольшой отступ:
Извините, данный ресурс не поддреживается. :(
background-blend-mode
Свойство background-blend-mode определяет порядок наложения фонового изображения и цвета (или нескольких фоновых изображений/цветов) друг на друга.
Возможные значения:
- color
- color-burn
- color-dodge
- darken
- difference
- exclusion
- hard-light
- hue
- lighten
- luminosity
- multiply
- overlay
- saturation
- screen
- soft-light
Когда-нибудь работали с Photoshop? Тогда, думаю, вы понимаете, о чем идет речь.
Представим, что у нас есть черно-белое изображение, которое мы хотим использовать в качестве фона. Но при этом мы хотим, чтобы оно было цветным. Как нам этого добиться?
Извините, данный ресурс не поддреживается. :(
background-clip
Свойство background-clip определяет, как цвет фона или фоновое изображение выводятся под границами блока. На мой взгляд, самым интересным значением данного свойства является text:
Извините, данный ресурс не поддреживается. :(
filter
Свойство filter позволяет применять к элементам некоторые художественные эффекты.
Возможные значения-функции:
- url() — svg-фильтр
- blur() — размытие
- brightness() — яркость
- contrast() — контрастность
- drop-shadow() — об этой функции поговорим отдельно
- grayscale() — обесцвечивание
- hue-rotate() — оттенок
- invert() — инверсия
- opacity() — прозрачность
- saturate() — насыщенность
- sepia() — сепия
Изменение цветовой темы (или схемы) сайта для ленивых:
Извините, данный ресурс не поддреживается. :(
Здесь вы найдете пример использования filter для реализации фильтров Instagram.
drop-shadow
Свойство filter со значением drop-shadow(), в отличие от похожего с точки зрения применяемого эффекта свойства box-shadow, позволяет добавлять тень к самому изображению (в формате PNG), а не к блоку, в котором оно размещается.
Извините, данный ресурс не поддреживается. :(
object-fit
Свойство object-fit управляет соотношением сторон заменяемых элементов, таких как img и video, когда у них задана ширина или высота, а также способом масштабирования.
Значение scale-down, например, позволяет сохранять пропорции изображения независимо от размеров блока:
Извините, данный ресурс не поддреживается. :(
Свойство object-position определяет выравнивание контента выбранного замещаемого элемента внутри блока.
cursor
Знаете ли вы о том, что кроме иконок для курсора, предоставляемых браузером (например, cursor: pointer), мы имеем возможность определять собственные изображения и svg?
Извините, данный ресурс не поддреживается. :(
scroll-behavior
Свойство scroll-behavior со значением smooth позволяет легко реализовать плавную прокрутку между секциями (разделами) страницы:
Извините, данный ресурс не поддреживается. :(
text-overflow
Свойство text-overflow со значением ellipsis позволяет добавлять ... в конец текста при его выходе за пределы контейнера.
p {
text-overflow: ellipsis;
}
caret-color
Свойство caret-color позволяет определять цвет каретки — видимого маркера (|), указывающего на место вставки следующего символа.
textarea {
caret-color: #00b74a;
}
scroll-snap
Группа свойств scroll-snap (scroll-span-type, scroll-snap-align и scroll-snap-stop) позволяет управлять поведением прокрутки. Данная группа свойств заслуживает отдельной статьи, но если кратко, то суть заключается в том, что в стилях определяются контрольные точки, при приближении к которым выполняется автопрокрутка:
Извините, данный ресурс не поддреживается. :(
Среди других возможностей scroll-snap можно назвать легкое создание слайдеров с помощью одного CSS.
supports
Правило @supports позволяет проверять поддержку браузером определенного свойства или свойств (или сочетания свойство/значение) перед их использованием.
/* проверяем поддержку свойств `grid` и `image-rendering` */
@supports (display: grid) {
section {
display: grid;
}
}
@supports (image-rendering) {
img {
image-rendering: pixelated;
}
}
var()
Функция var() позволяет использовать значения пользовательских переменных в качестве значений свойств. Вторым опциональным параметром данной функции является резервное значение.
/* определяем пользовательскую переменную - основной цвет фона */
:root {
--primary-bg-color: #1266f1;
}
/* и используем ее */
button {
background-color: var(--primary-bg-color)
}
calc()
Функция calc() используется для указания вычисляемого значения свойств, которые в качестве значений используют размер, угол, время или число. Это позволяет задавать значения, основанные на сложении или вычитании разных единиц измерений.
Обычно, абсолютно позиционируемый элемент выравнивается по горизонтали и вертикали следующим образом:
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Если нам известны размеры такого элемента, мы можем сделать следующее:
/* допустим, высота элемента составляет 100px, ширина - 200px */
.modal {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 100px);
}
attr()
С помощью функции attr() можно извлекать значение атрибута выбранного элемента и использовать его в стилях.
Реализация всплывающей подсказки средствами CSS:
Извините, данный ресурс не поддреживается. :(
:target
Псевдокласс :target позволяет создавать модальные окна, работающие без JavaScript:
Извините, данный ресурс не поддреживается. :(
::marker
Раньше мы удаляли маркер списка с помощью list-style: none и добавляли свой с помощью псевдоэлементов ::before или ::after. Сейчас существует более простой способ — псевдоэлемент ::marker.
Извините, данный ресурс не поддреживается. :(
::selection
Псевдоэлемент ::selection позволяет стилизовать выделение текста.
p::selection {
background-color: #262626;
color: #fbfbfb;
}
Напоследок, вот вам парочка полезных ссылок на ресурсы, которые сделают вас настоящим CSS-ниндзя:
- Руководство по CSS от MDN
- Справочник CSS от WebReference
- Справочник CSS от W3Schools
- Визуальное руководство по CSS
- 50+ интересных CSS-свойств и значений — CSSTricks
- 50 полезных CSS-сниппетов — Hongkiat — имейте ввиду, что сниппеты, приводимые в статье, по состоянию на 2021 год немного устарели
- 30 основных селекторов CSS — EnvatoTuts+
Благодарю за внимание и хорошего дня!
Облачные серверы от Маклауд на NVMe-дисках запускаются за 1 минуту.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
оригинал
===========
Источник:
habr.com
===========
Похожие новости:
- [Управление персоналом, Карьера в IT-индустрии, Научно-популярное, Здоровье] Почему мы купились на «культ» переработок и выгорания? (перевод)
- [Информационная безопасность, Криптография, Софт, Криптовалюты] Практическое руководство по анонимности в онлайне
- [Научно-популярное, Биотехнологии, Здоровье] Ахиллесова пята коронавируса (перевод)
- [Разработка веб-сайтов, Программирование, Haskell, Функциональное программирование] Создаем веб-приложение на Haskell с использованием Reflex. Часть 3
- [Реверс-инжиниринг, DIY или Сделай сам] Реверс-инжиниринг неизвестного микроконтроллера (перевод)
- [Программирование, Совершенный код, Управление разработкой] Почему в мире так много отстойного ПО (перевод)
- [Лайфхаки для гиков, Здоровье] Что такое компьютерный зрительный синдром и как от него защититься?
- [Разработка веб-сайтов, JavaScript, TypeScript] TypeScript: Раскладываем tsconfig по полочкам. Часть 2
- [Amazon Web Services, DevOps, Google Cloud Platform, Kubernetes] Как готовить Helm правильно: несколько полезных рецептов
- [Читальный зал, Мозг, Здоровье] Гений и не лечишься. Является ли одаренность психическим расстройством?
Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_css, #_sovershennyj_kod (Совершенный код), #_css, #_razrabotka_sajtov (разработка сайтов), #_verstka (верстка), #_vds, #_vps, #_deshevyj_vps (дешевый vps), #_bystryj_vds (быстрый vds), #_blog_kompanii_maklaud (
Блог компании Маклауд
), #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_css, #_sovershennyj_kod (
Совершенный код
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 19:20
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
 Сегодня я хочу рассказать вам о нескольких CSS-свойствах и значениях, которые редко упоминаются в специальной литературе, но, на мой вгляд, представляют определенный интерес с точки зрения скорости и качества разработки веб-интерфейсов. Многие свойства, о которых пойдет речь, являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами, однако, если вы решите использовать какое-либо из названных свойств в продакшне, не поленитесь зайти на Can I use и уточнить поддержку (недавно сильно расстроился, обнаружив, что Safari не поддерживает атрибут loading="lazy"). Там, где можно обойтись сниппетом, я ограничусь кодом. Там, где потребуется визуализация, будет приведена ссылка на песочницу. Я не стал делать примеры слишком красивыми, чтобы не затенять рассматриваемые свойства другими стилями. Итак, вы готовы к нашему небольшому путешествию в удивительный и почти безграничный мир CSS? Тогда вперед. grid + place-items Здесь вы найдете полное визуальное руководство по Grid и Flexbox. Данная техника позволяет выравнивать элементы по горизонтали и вертикали при помощи всего лишь двух строк кода. .parent {
display: grid; place-items: center; } place-items является сокращением для justify-items и align-items. Это свойство может использоваться как в отношении одной, так и в отношении сразу нескольких (дочерних) ячеек. .parent {
display: grid; grid-template-columns: 1fr 1fr; place-items: center } flex + margin Другой современный способ выравнивания элементов по горизонтали и вертикали заключается в сочетании display: flex и margin: auto. .parent {
display: flex; } .child { margin: auto; } Справедливости ради следует отметить, что тоже самое можно реализовать с помощью такого сниппета: .parent {
display: flex; justify-content: center; align-items: center; } flex + gap Раз уж мы заговорили о Flexbox, нельзя не упомянуть, что не так давно у нас появилась возможность добавлять отступ между flex-элементами с помощью свойства gap (этой возможности чертовски не хватало): .parent {
display: flex; flex-wrap: wrap; gap: 1em; } inline-flex Данное свойство позволяет создавать строчные элементы, обладающие функциональностью Flexbox. Лучше один раз увидеть: Извините, данный ресурс не поддреживается. :( columns Данная техника позволяет разделять текст на колонки. Свойство column-count определяет количество колонок, column-gap — отступ между колонками, column-rule — стили для вертикальной линии, разделяющей колонки. Свойство columns является сокращением для column-count и column-width. Извините, данный ресурс не поддреживается. :( background-repeat Свойство background-repeat определяет порядок заполнения фона указанным изображением. Значение round позволяет равномерно распределять изображения по всей ширине контейнера, а значение space добавляет между изображениями небольшой отступ: Извините, данный ресурс не поддреживается. :( background-blend-mode Свойство background-blend-mode определяет порядок наложения фонового изображения и цвета (или нескольких фоновых изображений/цветов) друг на друга. Возможные значения:
Когда-нибудь работали с Photoshop? Тогда, думаю, вы понимаете, о чем идет речь. Представим, что у нас есть черно-белое изображение, которое мы хотим использовать в качестве фона. Но при этом мы хотим, чтобы оно было цветным. Как нам этого добиться? Извините, данный ресурс не поддреживается. :( background-clip Свойство background-clip определяет, как цвет фона или фоновое изображение выводятся под границами блока. На мой взгляд, самым интересным значением данного свойства является text: Извините, данный ресурс не поддреживается. :( filter Свойство filter позволяет применять к элементам некоторые художественные эффекты. Возможные значения-функции:
Изменение цветовой темы (или схемы) сайта для ленивых: Извините, данный ресурс не поддреживается. :( Здесь вы найдете пример использования filter для реализации фильтров Instagram. drop-shadow Свойство filter со значением drop-shadow(), в отличие от похожего с точки зрения применяемого эффекта свойства box-shadow, позволяет добавлять тень к самому изображению (в формате PNG), а не к блоку, в котором оно размещается. Извините, данный ресурс не поддреживается. :( object-fit Свойство object-fit управляет соотношением сторон заменяемых элементов, таких как img и video, когда у них задана ширина или высота, а также способом масштабирования. Значение scale-down, например, позволяет сохранять пропорции изображения независимо от размеров блока: Извините, данный ресурс не поддреживается. :( Свойство object-position определяет выравнивание контента выбранного замещаемого элемента внутри блока. cursor Знаете ли вы о том, что кроме иконок для курсора, предоставляемых браузером (например, cursor: pointer), мы имеем возможность определять собственные изображения и svg? Извините, данный ресурс не поддреживается. :( scroll-behavior Свойство scroll-behavior со значением smooth позволяет легко реализовать плавную прокрутку между секциями (разделами) страницы: Извините, данный ресурс не поддреживается. :( text-overflow Свойство text-overflow со значением ellipsis позволяет добавлять ... в конец текста при его выходе за пределы контейнера. p {
text-overflow: ellipsis; } caret-color Свойство caret-color позволяет определять цвет каретки — видимого маркера (|), указывающего на место вставки следующего символа. textarea {
caret-color: #00b74a; } scroll-snap Группа свойств scroll-snap (scroll-span-type, scroll-snap-align и scroll-snap-stop) позволяет управлять поведением прокрутки. Данная группа свойств заслуживает отдельной статьи, но если кратко, то суть заключается в том, что в стилях определяются контрольные точки, при приближении к которым выполняется автопрокрутка: Извините, данный ресурс не поддреживается. :( Среди других возможностей scroll-snap можно назвать легкое создание слайдеров с помощью одного CSS. supports Правило @supports позволяет проверять поддержку браузером определенного свойства или свойств (или сочетания свойство/значение) перед их использованием. /* проверяем поддержку свойств `grid` и `image-rendering` */
@supports (display: grid) { section { display: grid; } } @supports (image-rendering) { img { image-rendering: pixelated; } } var() Функция var() позволяет использовать значения пользовательских переменных в качестве значений свойств. Вторым опциональным параметром данной функции является резервное значение. /* определяем пользовательскую переменную - основной цвет фона */
:root { --primary-bg-color: #1266f1; } /* и используем ее */ button { background-color: var(--primary-bg-color) } calc() Функция calc() используется для указания вычисляемого значения свойств, которые в качестве значений используют размер, угол, время или число. Это позволяет задавать значения, основанные на сложении или вычитании разных единиц измерений. Обычно, абсолютно позиционируемый элемент выравнивается по горизонтали и вертикали следующим образом: .modal {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } Если нам известны размеры такого элемента, мы можем сделать следующее: /* допустим, высота элемента составляет 100px, ширина - 200px */
.modal { position: absolute; top: calc(50% - 50px); left: calc(50% - 100px); } attr() С помощью функции attr() можно извлекать значение атрибута выбранного элемента и использовать его в стилях. Реализация всплывающей подсказки средствами CSS: Извините, данный ресурс не поддреживается. :( :target Псевдокласс :target позволяет создавать модальные окна, работающие без JavaScript: Извините, данный ресурс не поддреживается. :( ::marker Раньше мы удаляли маркер списка с помощью list-style: none и добавляли свой с помощью псевдоэлементов ::before или ::after. Сейчас существует более простой способ — псевдоэлемент ::marker. Извините, данный ресурс не поддреживается. :( ::selection Псевдоэлемент ::selection позволяет стилизовать выделение текста. p::selection {
background-color: #262626; color: #fbfbfb; } Напоследок, вот вам парочка полезных ссылок на ресурсы, которые сделают вас настоящим CSS-ниндзя:
Благодарю за внимание и хорошего дня! Облачные серверы от Маклауд на NVMe-дисках запускаются за 1 минуту. Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!  оригинал =========== Источник: habr.com =========== Похожие новости:
Блог компании Маклауд ), #_razrabotka_vebsajtov ( Разработка веб-сайтов ), #_css, #_sovershennyj_kod ( Совершенный код ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 19:20
Часовой пояс: UTC + 5