22 CSS-секрета, которые сделают вас макетным ниндзя

22 CSS-секрета, которые сделают вас макетным ниндзя

От автора: сегодня я хотел бы рассказать вам о нескольких свойствах, секретах и значениях CSS, которые редко упоминаются в технической литературе, но, на мой взгляд, представляют особый интерес для повышения скорости и качества разработки веб-интерфейсов.

Многие из обсуждаемых свойств являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами. Итак, вы готовы к небольшому путешествию в удивительный и почти безграничный мир CSS? Давайте начнем!

grid + place-items

Этот метод позволяет выравнивать элементы по горизонтали и вертикали всего двумя строками кода.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

place-items является сокращенным свойством для justify-items и align-items. Это свойство можно применить сразу к одной или нескольким (дочерним) ячейкам.

flex + margin

Еще один современный способ выровнять элементы по горизонтали и вертикали — использовать комбинацию display:flex и margin:auto.

Было бы справедливо сказать, что то же самое можно сделать с помощью следующего фрагмента:

flex + gap

Раз уж мы говорим о Flexbox, стоит упомянуть, что у нас наконец-то появилась возможность устанавливать промежутки между элементами с помощью свойства gap (нам это действительно нужно):

inline-flex

Это свойство позволяет создавать встроенные элементы, у которых есть функции Flexbox. Пример стоит многих слов:

columns

Этот метод позволяет разбивать текст на столбцы. Сolumn-count определяет количество столбцов, column-gap устанавливает размер зазора между колоннами, и column-rule задает стиль вертикальной линии между столбцами.
Columns является сокращенным свойством для column-count и column-width.

background-repeat

Background-repeat устанавливает порядок, в котором фон заполняется с указанным изображением. Круглое значение равномерно распределяет изображения по всей ширине контейнера, а значение пробела добавляет небольшое количество отступов между изображениями:

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

Вы когда-нибудь работали с фотошопом? Тогда я думаю, вы понимаете, о чем речь. Предположим, у нас есть черно-белое изображение, которое мы хотим использовать в качестве фона. Но в то же время мы хотим, чтобы оно было цветным. Как мы можем этого добиться?

background-clip

Свойство background-clip определяет, как далеко цвет фона или фоновое изображение должно выходить за рамки заполнения элемента. На мой взгляд, text самое интересное значение этого свойства:

filter

Свойство filter позволяет применить некоторые визуальные эффекты к элементам. Возможные значения функции:

url()

blur()

brightness()

contrast()

drop-shadow()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

sepia()

Изменение цветовых тем (или схем) сайта:

В CSSgram вы найдете пример использования filter для Instagram.

drop-shadow

Установленное значение drop-shadow() для свойства filter, в отличие от свойства box-shadow, позволяет добавлять тень к самому изображению (в формате PNG), а не к блоку, в котором оно находится.

object-fit

Свойство object-fit управляет соотношением сторон замещаемых элементов, такими, как img и video, если они имеют ширину или высоту, а также к ним применяется масштабирование. Например, значение scale-down позволяет сохранить соотношение сторон изображения независимо от размера блока:

Свойство object-position, позволяет сохранить пропорции изображения, независимо от размера контейнера.

cursor

Знаете ли вы, что в дополнение к значкам курсора, предоставляемым браузером (например, cursor:pointer), мы также можем определять наши собственные изображения и SVG?

scroll-behavior

Установив значение scroll-behavior равным smooth, мы имеем возможность легко осуществить плавный скроллинг между разделами страницы:

text-overflow

Cвойство text-overflow равное ellipsis позволяет добавлять «…» в конец текста, когда он выходит за пределы контейнера.

caret-color

Свойство caret-color устанавливает цвет каретки видимого маркера(|), указывающий, где будет вставлен следующий введенный символ.

@supports

Правило @supports позволяет проверить, поддерживает ли браузер свойства (или комбинацию свойства /значения) перед их использованием.

var()

Функция var() позволяет использовать значения пользовательских переменных в качестве значений свойств. Второй необязательный параметр этой функции – это резервное значение.

calc()

Функция calc() используется для определения расчетного значения свойств, размера использования, угла, времени или чисел в качестве значений. Это позволяет устанавливать значения на основе сложения или вычитания различных единиц.

Обычно позиционированный элемент выравнивается по горизонтали и вертикали следующим образом:

Если мы знаем размеры такого элемента, мы можем сделать следующее:

attr()

С помощью функции attr() вы можете получить значение атрибута выбранного элемента и использовать его в стилях. Создание всплывающих подсказок с помощью CSS:

:target

Псевдо-класс :target позволяет создавать модальности, которые работают без JavaScript:

::marker

Раньше мы удаляли маркеры списков с помощью list-style:none и добавляли свои собственные с помощью псевдоэлементов ::before или ::after. Теперь есть более простой способ сделать это — мы можем использовать псевдоэлемент ::marker.

::selection

Псевдо-элемент ::selection позволяет стилизовать выбор текста.

Спасибо за уделенное время и хорошего дня!

Автор: Alexey Shepelev

Источник: betterprogramming.pub

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.