Вёрстка (HTML/CSS) - основы CSS (часть 2)

1 Свойство transition:

transition позволяет анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств.

Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом. Чаще всего используется псевдокласс :hover. Переходы применяются ко всем элементам, а также к псевдоэлементам :before и :after.

property	comment
transition-property	Содержит название CSS-свойств, к которым будет применен эффект перехода. Значение свойства может содержать как одно свойство, так и список свойств через запятую. Если поставить all - применит эффект перехода ко всем свойствам элемента.
transition-duration	Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет.
transition-timing-function	Свойство задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства. Возможные значения: ease , linear , ease-in , ease-out , ease-in-out , cubic-bezier.
transition-delay	Необязательное свойство, позволяет сделать так, чтобы изменение свойства происходило не моментально, а с некоторой задержкой.

Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition ({transition: transition-property transition-duration transition-timing-function transition-delay;}):

.link {
    color: white;
    transition: color 0.4s ease;
}

.link:hover {
    color: black;
}

2 Свойство transform:

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

К элементам, которые могут быть трансформированы, относятся элементы с display: block; и display: inline-block.

Существуют два вида трансформаций – 2D и 3D.

property	comment
translate(x,y)	Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты X и Y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения.
scale(x,y)	Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально.
rotate(угол)	Поворачивает элементы на заданное количество градусов, отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота.
skew(x-угол,y-угол)	Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически.

.box {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg); 
    transform: rotate(360deg);
}

Можно объединить несколько трансформаций одного элемента, перечислив их через пробел в порядке проявления.

.box {transform: scale(1.5) rotate(-10deg);}

3 Flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов. Flexbox состоит из flex-контейнера — родительского контейнера и flex-элементов — дочерних блоков.

3.1 Свойство display:

flex - отображает контейнер как блочный элемент;

.flex-container {
    display: flex;
}

inline-flex - отображает контейнер как строчный элемент;

.flex-container {
    display: inline-flex;
}

После установки данных значений свойства каждый дочерний элемент автоматически становится flex-элементом, выстраиваясь в ряд (вдоль главной оси) колонками одинаковой высоты, равной высоте блока-контейнера. При этом блочные и строчные дочерние элементы ведут себя одинаково, т.е. ширина блоков равна ширине их содержимого с учетом внутренних полей и рамок элемента.

3.2 Выравнивание элементов по горизонтали justify-content:

Свойство выравнивает flex-элементы по ширине flex-контейнера, распределяя оставшееся свободное пространство, незанятое flex-элементами.

property	comment
flex-start	Значение по умолчанию. Flex-элементы позиционируются от начала flex-контейнера.
flex-end	Flex-элементы позиционируются относительно правой границы flex-контейнера.
center	Flex-элементы выравниваются по центру flex-контейнера.
space-between	Flex-элементы выравниваются по главной оси, свободное место между ними распределяется следующим образом: первый блок располагается в начале flex-контейнера, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве, а свободное пространство равномерно распределяется между элементами.
space-around	Flex-элементы выравниваются по главной оси, а свободное место делится поровну, добавляя отступы справа и слева.

.flex-container {
    display: flex;
    justify-content: space-between;
}

3.3 Выравнивание элементов по вертикали align-items:

Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по перпендикулярной оси (по высоте).

property	comment
stretch	Значение по умолчанию. Flex-элементы растягиваются, занимая все пространство по высоте.
flex-start	Flex-элементы выравниваются по левому краю flex-контейнера относительно верхнего края блока-контейнера.
flex-end	Flex-элементы выравниваются по левому краю flex-контейнера относительно нижнего края блока-контейнера.
center	Flex-элементы выравниваются по центру flex-контейнера.

.flex-container {
    display: flex;
    align-items: flex-start;
}

3.4 Направление главной оси flex-direction:

Свойство определяет, каким образом flex-элементы укладываются во flex-контейнере, задавая направление главной оси flex-контейнера. Они могут располагаться в двух главных направлениях — горизонтально, как строки или вертикально, как колонки. Главная ось по умолчанию идет слева направо. Поперечная – сверху вниз.

property	comment
row	Значение по умолчанию, слева направо. Flex-элементы выкладываются в строку.
row-reverse	Направление справа налево. Flex-элементы выкладываются в строку относительно правого края контейнера.
column	Направление сверху вниз. Flex-элементы выкладываются в колонку.
column-reverse	Колонка с элементами в обратном порядке, снизу вверх.

.flex-container {
    display: flex;
    flex-direction: row-reverse;
}

3.5 Многострочность элементов flex-wrap:

Свойство управляет тем, как flex-контейнер будет выкладывать flex-элементы — в одну строку или в несколько, и направлением, в котором будут укладываться новые строки. По умолчанию flex-элементы укладываются в одну строку. При переполнении контейнера их содержимое будет выходить за границы flex-элементов. Не наследуется.

property	comment
nowrap	Значение по умолчанию. Flex-элементы не переносятся, а располагаются в одну линию слева направо
wrap	Flex-элементы переносятся, располагаясь в несколько горизонтальных рядов
wrap-reverse	Flex-элементы переносятся, располагаясь в обратном порядке слева-направо, при этом перенос происходит снизу вверх.

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

3.6 Порядок отображения элементов order

Свойство определяет порядок, в котором flex-элементы отображаются внутри flex-контейнера. По умолчанию для всех flex-элементов задан порядок order: 0; и они следуют друг за другом по мере добавления во flex-контейнер. Самый первый flex-элемент по умолчанию расположен слева. Чтобы поставить любой flex-элемент в начало строки, ему нужно назначить order: -1; в конец строки — order: 1.

.flex-container {
    display: flex;
}

.flex-item {
    order: 1;
}

*** шпаргалка по flexbox - https://habr.com/post/313938/ ***

03_css.md 20 KB Permalink Histórico Raw