Свойства CSS3

На этой странице вы найдете все группы свойств CSS3 со ссылками и краткими описаниями.

Список свойств CSS3

Свойства анимации

Property	Description
animation	Анимирует (постепенно изменяет одно стилевое значение на другое) свойства CSS с дискретными значениями.
animation-delay	Указывает, когда начнется анимация.
animation-direction	Задает, как должна воспроизводиться анимация: вперед, назад или в чередующихся циклах.
animation-duration	Определяет длительность анимации в секундах или миллисекундах, необходимую для завершения одного цикла.
animation-fill-mode	Задает стиль элемента, когда анимация не выполняется (до начала, после окончания или в обоих случаях).
animation-iteration-count	Определяет, сколько раз должна воспроизводиться анимация.
animation-name	Определяет имя правила @keyframes, которое вы хотите применить. Оно имеет два значения: none и keyframename.
animation-play-state	Указывает, выполняется анимация или приостановлена.
animation-timing-function	Определяет, как анимация будет изменяться в течение длительности каждого цикла, а не на протяжении всей анимации.
@keyframes (at-rule)	Правило @keyframes является основой для keyframe animations, используемых для анимации (постепенного изменения одного стилевого значения на другое) многих свойств CSS.

Свойства фона

Property	Description
background-clip	Указывает, насколько далеко background-color и background-image должны находиться от элемента.
background-origin	Указывает область позиционирования background-image.
background-size	Определяет размер фонового изображения.

Свойства границ

Property	Description
border-bottom-left-radius	Определяет скругление нижнего левого угла элемента.
border-bottom-right-radius	Задает скругление нижнего правого угла элемента.
border-image	Позволяет указать изображение в качестве границы вокруг элемента.
border-image-outset	Указывает величину, на которую border image выходит за пределы рамки элемента.
border-image-repeat	Указывает, будет ли border-image скругляться, повторяться или растягиваться.
border-image-slice	Указывает, как разделить изображение, заданное border-image-source, на девять областей: четыре угла, четыре края и центральную часть.
border-image-source	Задает исходное изображение для создания border image элемента.
border-image-width	Определяет ширину border image.
border-radius	Создает скругленные углы внешней границы элемента.
border-top-left-radius	Определяет скругление верхнего левого угла элемента. Существует три вида скругления.
border-top-right-radius	Определяет скругление верхнего правого угла элемента. Существует три вида скругления.

Свойства цвета

Property	Description
opacity	Указывает прозрачность элемента.

Гибкая блочная раскладка

Property	Description
align-content	Выравнивает строки контейнера flex, когда по вертикали доступно свободное пространство (по поперечной оси).
align-items	Определяет выравнивание элементов flex по умолчанию вдоль поперечной оси.
flex	Указывает компоненты гибкой длины.
flex-basis	Определяет начальный основной размер гибкого элемента.
flex-direction	Определяет главную ось flex-контейнера и задает порядок, в котором появляются элементы flex.
flex-flow	Сокращенное свойство для flex-wrap и flex-direction.
flex-grow	Указывает, насколько элемент будет увеличиваться относительно остальных элементов flex-контейнера.
flex-shrink	Указывает, насколько элемент будет уменьшаться относительно остальных элементов flex-контейнера.
flex-wrap	Указывает, должны ли гибкие элементы переноситься на новую строку или нет.
justify-content	Выравнивает элементы, когда они не используют все доступное пространство по горизонтали.
order	Указывает порядок гибкого элемента внутри flex- или grid-контейнера.

Свойства шрифта

Property	Description
font-size-adjust	Управляет размером шрифта, когда первый выбранный шрифт недоступен.
font-stretch	Делает текст уже или шире.

Свойства многоколоночной раскладки

Property	Description
column-count	Указывает количество колонок, на которые делится содержимое элемента.
column-fill	Управляет содержимым элемента при его разделении на колонки.
column-gap	Задает размер промежутка между колонками.
column-rule	Определяет стиль, ширину и цвет линии между колонками.
column-rule-color	Задает цвет линии.
column-rule-style	Определяет стиль линии между колонками.
column-rule-width	Определяет ширину линии между колонками.
column-span	Указывает, занимает ли элемент одну колонку или все колонки.
column-width	Определяет ширину колонок.
columns	Сокращенное свойство для column-count и column-width.

Свойства контура

Property	Description
outline-offset	Указывает расстояние между контуром и краем границы элемента.

Свойства текста

Property	Description
tab-size	Задает ширину символа табуляции.
text-align-last	Задает выравнивание последней строки текста.
text-decoration-color	Задает цвет текстового оформления.
text-decoration-line	Указывает вид линии, которая будет использоваться для оформления текста.
text-decoration-style	Указывает стиль текстового оформления.
text-justify	Определяет поведение интервалов между словами или символами.
text-overflow	Указывает, как пользователю будет показано переполнение встроенного текста.
text-shadow	Позволяет добавлять тени к тексту.
word-break	Указывает, где должны разрываться строки.
word-wrap	Позволяет переносить строки по словам, чтобы они помещались в контейнер.

Свойства преобразования

Property	Description
backface-visibility	Указывает, должна ли быть видимой задняя сторона элемента.
perspective	Придает элементу, расположенному в 3D-пространстве, перспективу и определяет расстояние до плоскости z=0.
perspective-origin	Определяет позицию, с которой пользователь смотрит на элемент, расположенный в 3D-пространстве.
transform	Указывает двумерное или трехмерное преобразование элемента.
transform-origin	Позволяет изменить позицию преобразования элементов.
transform-style	Указывает, как дочерние элементы отображаются в трехмерном (3D) пространстве.

Свойства переходов

Property	Description
transition	Сокращенное свойство для следующих свойств: transition-property, transition-duration, transition-timing-function, transition-delay
transition-delay	Указывает, когда должен начаться эффект перехода.
transition-duration	Указывает, сколько времени должен занимать переход.
transition-property	Указывает имена свойств, к которым применяется переход.
transition-timing-function	Указывает, как будет происходить переход в течение своей длительности, позволяя изменять скорость.

Свойства визуального форматирования

Property	Description
overflow-x	Указывает, должно ли содержимое быть скрыто, видно или прокручиваться по горизонтали, когда оно выходит за левую и правую границы элемента.
overflow-y	Указывает, должно ли содержимое быть скрыто, видно или прокручиваться по вертикали, когда оно выходит за верхнюю и нижнюю границы элемента.
resize	Указывает, можно ли изменять размер элемента.
box-shadow	Позволяет создавать несколько теней вокруг блока, задавая значения цвета, размера, размытия, смещения и inset.
box-sizing	Определяет расчет width и height элемента, если они включают padding и borders.

Практика