24.09.2021

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

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

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

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

grid + place-items

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

CSS

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

CSS

flex + margin

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

CSS

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

CSS

flex + gap

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

CSS

inline-flex

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

CSS

columns

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

CSS

background-repeat

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

CSS

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

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

CSS

background-clip

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

CSS

filter

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

url()

blur()

brightness()

contrast()

drop-shadow()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

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

CSS

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

drop-shadow

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

CSS

object-fit

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

CSS

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

cursor

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

scroll-behavior

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

CSS

text-overflow

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

CSS

caret-color

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

CSS

@supports

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

CSS

var()

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

CSS

calc()

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

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

CSS

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

CSS

attr()

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

CSS

:target

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

CSS

::marker

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

::selection

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

CSS

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *