Как двигать элементы в css

Методы позиционирования элементов в CSS

HTML-документ состоит из большого количества элементов, вложенных друг в друга. Чтобы из этих элементов и CSS построить изображение страницы , их необходимо как-то в ней расположить. По умолчанию размещение всех элементов на странице осуществляется в нормальном или базовом потоке .

Что это значит? Во-первых, вывод элементов на страницу браузер осуществляет в том порядке, в котором они следуют в HTML коде .

 
1
 
2
 
3
 

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

 Этот элемент находится позади других элементов. 
Этот вложенный элемент принадлежит воображаемому слою, который находится поверх слоя родителя. Этот элемент ещё ближе к нам, его слой располагается над слоем уже его родителя. 
 

В-третьих, положение элемента в потоке зависит от значения свойства display .

 
inline 1inline 2inline 3inline 4
 
inline 1inline 2
 
inline 1inline 2inline 3
 

Например, элементы, имеющее блочное отображение ( display: block ) отображаются в потоке как прямоугольные области, каждый из них на новой линии друг под другом сверху вниз.

Ширина элементов с блочным отображением по умолчанию равна доступной ширине родительского элемента, т.е. элемента, в который каждый из них непосредственно вложен. Высота их по умолчанию равна такой величине, которой будет достаточно, чтобы отобразить весь контент, который находится в каждом из них.

Элементы со строчным отображением ( display: inline ) выводятся иначе. Они в отличии от блочных элементов не размещаются каждый на новой строке, а следуют друг за другом слево направо. Если пространство справа закончилось, то они переносятся на следующую строку, а не на новую линию как элементы с блочным отображением.

Кроме block , inline есть и другие варианты отображения элементов, но все они располагаются в базовом потоке документа.

В CSS есть свойства, с помощью которых элементы можно «вырвать» из основного потока документа и задать им другое положение вне базового потока элементов.

К этим свойствам относятся position и float .

CSS-свойство position

CSS свойство position — это одно из свойств с помощью которого можно изменить базовое поведение элементов в потоке. Другими словами, данное свойство позволяет «выдернуть» любой элемент из потока документа и разместить его в другом месте относительно окна браузера или других элементов на веб-странице.

Свойство position имеет 5 значений:

• static (статичное позиционирование);
• relative (относительное);
• absolute (абсолютное);
• fixed (фиксированное);
• sticky (липкое).

static — это значение по умолчанию. Оно означает что элемент находится в базовом потоке.

Каждый элемент в потоке занимает определённую область. Но область элемента не всегда сохраняется за ним при его позиционировании.

Это, например, происходит при задании элементу position: absolute или position: fixed . В этом случае место не сохраняется за элементом. Другие элементы его «не видят» и располагаются, игнорируя его присутствие в коде.

Статичное позиционирование (static)

Свойство position со значением static элементам назначается по умолчанию . Это значение означает что элемент является не позиционированным , т.е. отображается как обычно (в потоке).

Явная установка элементу CSS-свойства position: static может понадобиться только в том случае, когда нужно переопределить другое значение position установленное элементу.

Установка CSS свойств для задания положения элемента left , top , right и bottom никакого влияния на него не оказывают, т.к. его местонахождение определяется потоком документа .

Пример выстраивания статично позиционированных элементов:

Относительное позиционирование (relative)

Установка относительного позиционирования элементу осуществляется посредством задания ему CSS свойства position: relative .

Относительно позиционированный элемент ведёт себя как элемент в потоке за исключением того, что его текущее положение можно при помощи определённых CSS свойств сместить. К этим CSS свойствам относятся left , top , right и bottom .

Например, для того чтобы элемент сдвинуть вверх или вниз относительного его исходного положения к нему нужно применить CSS свойство top или bottom :

position: relative; /* для сдвига элемента вверх на 10px */ top: -10px; /* или bottom: 10px; */ /* для сдвига элемента вниз на 10px */ top: 10px; /* или bottom: -10px; */

Если одновременно установить top и bottom , то будет применено значение top , т.к. оно является более приоритетным, чем bottom :

position: relative; /* элемент или элементы, к которым применяется эти стили будут сдвинуты на 15px вверх, а не на 10px как указано в bottom */ top: -15px; bottom: 10px;

Для сдвига элемента вправо или влево используется CSS свойство left или right :

position: relative; /* для сдвига элемента влево на 20px */ left: -20px; /* или right: 20px; */ /* для сдвига элемента вправо на 20px */ left: 20px; /* или right: -20px; */

Если одновременно установить left и right , то приоритетным будет значение, находящееся в left :

position: relative; /* элемент или элементы, к которым применяется эти стили будут сдвинуты на 25px вправо, т.к. значение left более приоритетно чем right */ left: 25px; right: -20px;

Для сдвига по двум осям нужно использовать top или bottom , и left или right :

position: relative; /* стили для сдвига элементов вверх и влево на 5px */ top: -5px; left: -5px;

Пример, в котором 2 элементу установим относительное позиционирование и сместим его на 20px вверх и влево относительно его исходного положения:

 
FIRST ELEMENT
 
SECOND ELEMENT
 
THIRD ELEMENT
 

Если в некоторой области страницы оказываются несколько позиционированных элементов, то они перекрывают друг на друга в определённом порядке. При этом по умолчанию выше оказывается тот элемент, который ниже описан в коде. Но порядок перекрытия элементов (их положение перпендикулярное экрану, т.е. вдоль оси Z) можно изменить. Осуществляется в CSS это с помощью свойства z-index . z-index может принимать отрицательные и положительные целые число, auto и 0 . Но, хорошей практикой является использование в качестве z-index чисел из диапазона 0-9999 .

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

Абсолютное позиционирование (absolute)

Установка абсолютного позиционирования элементу осуществляется посредством задания ему position: absolute .

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

Позиционирование выполняется относительно ближайшего позиционированного предка.

Под позиционированным элементом понимается элемент с position , равным relative , absolute , fixed или sticky .

В этом примере позиционирование элемента #id-3 будет выполнять относительно #id-2 , т.к. он является позиционированным и является по отношению к нему более близким предком.

Если данный элемент не был бы позиционированным, то позиционирование #id-3 выполнялось бы относительно #id-1 :

Если среди предков у элемента с position: absolute нет позиционированного элемента, то в этом случае он будет позиционироваться относительно HTML страницы, т.е. элемента body .

Когда элементу устанавливаем position: absolute без указания CSS-свойств ( top , left , right и bottom ), определяющих его положение , он будет находиться в том месте, в котором он был бы расположен, если бы находился в потоке (при этом при вычислении его положения учитываются только элементы, расположенные до него в коде и находящиеся в потоке).

При этом другие элементы его видеть не будут, и, следовательно, они будут расположены на странице, не обращая никакого внимание на него.

 
FIRST ELEMENT
 
SECOND ELEMENT
 
THIRD ELEMENT
 

CSS-свойства для управления положением абсолютно позиционированного элемента работают по-другому чем с position: relative .

CSS-свойства top , bottom , left и right задают положение элемента относительно ближайшего позиционированного предка или body , если такого предка нет.

Установить ширину (высоту) абсолютно позиционированному можно с помощью установки ему двух координат top и bottom ( left и right ).

Если элементу одновременно установить top , bottom и height , то предпочтение будет отдано top и height .

Абсолютное позиционирование применяется очень часто совместно с относительным позиционированием в дизайнерских целях, когда необходимо разместить различные элементы относительного друг друга, так же может применяться для создания выпадающих меню, разметки сайта и т.д.

Фиксированное позиционирование (fixed)

Задание элементу фиксированного позиционирования осуществляется посредством установки ему position: fixed .

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

Фиксированное позиционирование применяется для закрепления на странице навигационных меню, кнопки «вверх», панелей с социальными кнопками и многого другого.

Совместное использование относительного и абсолютного позиционирования

Относительное позиционирование очень часто используется вместе с абсолютным позиционированием.

Если расположить блоки с абсолютным позиционированием в блок с относительным, то расстояния будут уже задаваться не от края окна браузера, а от границ относительного блока.

Например: для создания фиксированных макетов состоящих из 3 блоков, выровненных по верхнему краю. Установим высоту «400px» относительному блоку для наглядности .

  
Левый блок
 
Основной блок
 
Правый блок
 
 

Дополнительно к блокам можно применять свойство z-index , которое предназначено для позиционирования элементов по оси Z. Чем больше значение свойства z-index , тем ближе элемент расположен к нам, и наоборот, чем меньше значение, тем дальше расположен элемент от нас.

Основы и практика CSS Grid Layout: как использовать двумерную раскладку для повседневных задач

Наш фронтенд-разработчик Данила Абрамов @DanilAbr подготовил материал для новичков и практикующих разработчиков, которые еще не успели разобраться с Grid. В первой части статьи — основные CSS-свойства и принципы раскладки, без которых невозможно понять Grid. Если вы уже знакомы с основами, переходите ко второй части — там примеры решения реальных задач.

Сейчас есть множество статей про Grid. И если вам действительно интересно его освоить и хорошо с ним разобраться, изучите несколько источников. Только так картина в голове станет абсолютно ясной, и вы с лёгкостью станете использовать раскладки на Grid и все их возможности. Самым дотошным и терпеливым рекомендуем прочитать спецификацию. И если вы легко можете понять её, то наш материал не для вас.

CSS Grid Layout — что это?

CSS Grid Layout (далее просто Grid) — это способ двумерной раскладки. Именно ДВУмерной, в отличии от Flexbox. Flexbox позволяет полноценно управлять элементами только по одной оси.

Grid чем-то похож на display: table (далее таблицы). Но есть важное отличие:

таблицы созданы для отображения табличных данных, а HE для раскладки элементов на страницах. Их стали использовать для создания сеток страниц, потому что на тот момент в CSS не было других (адекватных) вариантов сделать это. Grid же изначально разрабатывался для создания современных, интересных, часто нестандартных двумерных раскладок.

Grid даёт возможность контролировать одновременно и строки, и столбцы, в которых располагаются элементы. Эти элементы можно двигать внутри Grid-сетки практически как нам вздумается.

Давайте на примерах рассмотрим основные возможности Grid.

В HTML создадим следующую разметку и в CSS добавим ячейкам декоративные стили.

HTML:

 
1
 
2
 
3
 
4
 
5
 
6
 

CSS:

Добавим контейнеру свойство display: grid.

.container

Часть 1. Основные Grid-свойства

grid-template-columns / grid-template-rows

Добавим элементам с классом .el рамку и зададим контейнеру свойство grid-template-columns: https://codepen.io/danilabr/pen/jOayKYN

.el < . border: 2px dashed #aaa; >.container

К привычным нам единицам измерения в CSS спецификация Grid добавляет ещё одну — 1fr (fraction). Она похожа на единицу гибкости во Flexbox, flex-grow. В примере выше ширина первой и второй колонки 150px и 20vw. Третья колонка ужимается под контент (свойство auto). А 1fr здесь используется, чтоб занять всё оставшееся доступное место.

fr (fractional unit) всегда занимает свободное пространство. Когда несколько столбцов с ширинами в fr, цифрами мы указываем, какую часть свободного пространства должны делить между собой строки / колонки.

Эту единицу измерения можно использовать даже с дробными значениями:

Давайте посчитаем, чтоб разобраться. Общая доля свободного пространства (100%) будет равна сумме всех fr:

• ширина контейнера: 0.5fr + 1fr + 2.5fr = 4fr или 100%
• ширина первой колонки: 0.5fr / 4fr = 1/8 или 12.5%
• ширина второй колонки: 1fr / 4fr = 1/4 или 25%
• ширина третей колонки: 2.5fr / 4fr = 5/8 или 62,5%

Что если у нас есть несколько колонок, и все они должны быть равной ширины? Можно использовать функцию repeat(), которая автоматически создаст нужное количество столбцов, например:

.container

Первым параметром функция repeat() принимает количество, а вторым — ширину (или список ширин). Это значит, что если написать

.container

то мы получим шесть колонок со следующими ширинами: 1fr 2fr 1fr 2fr 1fr 2fr.

Чтобы описать количество и ширину строк, в Grid используется свойство grid-template-rows. Оно может принимать те же значения, что и grid-template-columns.

grid-auto-rows / grid-auto-columns

Есть такие понятия как «явный» и «неявный» Grid. «Явный» создаётся при помощи свойств grid-template-columns и grid-template-rows, когда мы явно указываем количество строк и столбцов. Но что если количество элементов больше, чем ячеек в «явном» гриде? В таком случае грид создаст «неявный» грид. Размеры колонок и строк будут рассчитаны автоматически, в зависимости от контента внутри них. Например:

.container

Чтоб контролировать размеры строк и столбцов, в «неявном» гриде есть свойства grid-auto-rows / grid-auto-columns.

.container

grid-auto-rows: minmax();

Иногда нужно задать минимальный размер строке, чтобы при заполнении она растягивалась под контент. С этим легко справляется функция minmax(), которая принимает минимальный и максимальный размер:

.container

repeat() — auto-fill / auto-fit

Создание адаптивной сетки — неотъемлемая часть вёрстки. Grid предоставляет нам возможности создавать простые адаптивные раскладки без применения медиа выражений. Функция repeat() первым аргументом может принимать не только количество, но и ключевые слова — auto-fill / auto-fit.

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

Делается это в ОДНУ строчку:

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

Ключевое слово auto-fill автоматически заполнит нашу сетку колонками, ширина которых будет минимум 300px. Если есть свободное место, колонки будут растягиваться в ширину до тех пор, пока нет места для ещё одной колонки в 300px. Попробуйте плавно изменить ширину окна и увидите, что происходит с сеткой: https://codepen.io/danilabr/pen/dyREbqv

Далее измените auto-fill на auto-fit, и вы увидите, что ничего не изменилось. Разница в их поведении станет видна только если уменьшить количество элементов (или их минимальную ширину). Если ширины и количества элементов не хватает, чтоб заполнить весь экран, начинают работать свойства auto-fill / auto-fit.

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

grid-lines

Неотъемлемой частью спецификации Grid являются grid-lines (линии). Если колонки и строки мы можем создать руками (grid-template-columns / grid-template-rows), то grid-lines всегда создаются автоматически. Мы не можем никак повлиять на их создание, но можем их использовать. Если открыть инспектор гридов в devtools, то видно, что grid создаёт линии и нумерует их:

Можно легко размещать элементы в Grid-сетке относительно нумерованных линий. Для этого существуют следующие свойства:

grid-column-start, grid-column-end / grid-row-start, grid-row-endgrid-column / grid-row

В последнем примере все элементы расположены в автоматическом порядке, по очереди. Но это легко можно изменить. Переставим последний элемент на место первого. Для этого элементу, который хотим переместить, укажем начальную и конечную линии по вертикали и горизонтали:

или (так как элемент по умолчанию занимает одну ячейку):

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

Развивая тему размещения от нумерованных линий, нужно добавить ещё некоторые особенности. Ключевое слово span позволит растянуть элемент на нужное количество ячеек:

Нумерация со знаком минус позволит считать линии с конца столбцов или строк:

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

Auto-placement

Далее затронем важнейшую тему для понимания принципов раскладки Grid — алгоритм автоматического размещения элементов внутри Grid-сетки. Ознакомьтесь с CSS в следующем примере и закомментируйте строчку 26 (grid-row: 1) https://codepen.io/danilabr/pen/KKyaPYM

Когда Данила увидел подобное, он очень сильно удивился: почему в одном случае остаются свободные места, а в другом — нет. Ответ здесь гораздо проще чем кажется.

У Grid-раскладки есть специальный алгоритм размещения элементов:

1. В начале располагаются те элементы, которые были вырваны из обычного потока размещения. Чтобы вырвать элемент из этого потока, достаточно явно указать линию, от которой должен быть расположен элемент. Например, во втором варианте .el-2 вырван из потока авто-размещения с помощью grid-row: 1

1. Далее все оставшиеся элементы ищут свободное место, и заполняют его слева направо, сверху вниз, что и происходит во втором варианте. .el-1 видит свободную ячейку на второй колонке и первой строке, и встаёт туда. Остальные элементы располагаются по очереди за ним.

А так работает алгоритм в первом варианте:

У нас нет элементов, «вырванных» из обычного потока размещения Grid, поэтому работает правило размещения по порядку, друг за другом.

• сначала .el-1 встаёт на своё место (первая линия по вертикали и первая по горизонтали):

• элементу .el-2 мы указали grid-column: 1. Ему нужно встать на первую линию по вертикали, а первая свободная ячейка на этой линии — это ячейка, которая находится на первой линии по вертикали и второй по горизонтали:

• далее по порядку в DOM располагаются остальные элементы, но уже ПОСЛЕ второго элемента (следуя обычному потоку размещения в Grid: слева направо, сверху вниз):

grid-area

Используя Grid, можно размещать элементы не только относительно конкретных линий. Также есть возможность создавать области, и размещать элементы внутри конкретной области.

Для примера оставим четыре элемента (.el-1 .el-2 .el-3 .el-4), и каждому элементу с помощью grid-area дадим псевдоним, по которому будем к нему обращаться, выстраивая сетку в свойстве grid-template у родителя:

.el-1 < grid-area: header; >.el-2 < grid-area: aside; >.el-3 < grid-area: main; >.el-4

С помощью свойства gap добавим отступы между ячейками сетки, и в ОДНОМ свойстве родителя grid-template мы можем создать сетку, задать ей размеры, и наглядно описать раскладку наших элементов на странице:

Это может выглядеть проще. Размеры строк и колонок можно задавать отдельно любыми другими способами. Результат такой: https://codepen.io/danilabr/pen/BampVbg

Не будем описывать все особенности данного способа создания сетки, его синтаксические правила (кавычки, пробелы и прочее). Всё это легко можно найти во множестве статей, и разобраться в этом довольно просто. Главное — теперь вы знаете, что в Grid есть возможность сделать так, чтоб сетка была видна наглядно и понятно, даже внутри CSS-кода.

Это далеко не все возможности Grid. Мы рассказали лишь малую часть того, что есть в спецификаци. Но даже этого достаточно, чтоб легко и просто начать делать сетки с помощью Grid.

Теперь перейдём к практике.

Часть 2. Применение CSS Grid Layout. Использование для повседневных реальных задач

Ключевой момент в описании стилей, который отличает использование Grid от других технологий:

стили сетки часто описываются в стилях родителя. Это очень удобно для разработки и поддержки — всё, что касается сетки в одном месте, точнее в одном селекторе.

Адаптивный список карточек с помощью auto-fit

Первым примером будет адаптивный список карточек с минимальной шириной 240px, в котором карточки растягиваются на всю доступную ширину родителя. Нам не понадобится перестраивать сетку на разных ширинах экрана, — Grid сделает это сам. Попробуйте изменить ширину экрана и увидите результат: https://codepen.io/danilabr/pen/mdqRjQy

&__list

Форма с помощью grid-template

Следующий пример демонстрирует возможности применения свойств grid-area и grid-template. Сделаем форму, и на четырех разных разрешениях у этой формы будет разная сетка. Выделим два ключевых момента использования Grid в этом примере:

1) Мы можем задавать размеры только некоторых столбцов и строк, остальные будут иметь размеры auto.

2) При использовании Flexbox, для выстраивания в ряд полей name и email мы создали бы дополнительную обёртку над ними в html. Grid позволяет избежать этого: https://codepen.io/danilabr/pen/XWzqQRx

.form__container < grid-template: "text text" "name email" "message message" minmax(120px, auto) "button button" / 4fr 3fr; >

12-колоночная сетка с помощью Grid. Расположение блоков по этой сетке

Третий пример располагает на странице два крупных блока. С помощью грида можно создать сетку, в том числе и стандартную 12-колоночную. И на разных разрешениях можно располагать блоки от разных линий. Для наглядности добавим декоративные стили сетки, чтоб было понятно, по каким линиям располагаются блоки. Попробуйте в примере изменять размеры экрана: https://codepen.io/danilabr/pen/JjOvqaW

Часть 3. Итоги

В этом разделе Даня поделится своими мыслями о том, когда нужно или не нужно использовать Grid, о плюсах, минусах и о том, почему до сих пор многие не знакомы с этой технологией, и что с этим делать.

Как начать использовать

Grid представляет мощнейший инструмент, который позволяет делать многие вещи легко, для которых раньше приходилось писать костыли. Спецификация Grid добавляет много разных свойств и подходов в использовании CSS. Невероятно сложно абсолютно полностью изучить, понять и начать использовать все Grid-свойства. И в этом нет необходимости. В статье мы показали всего несколько подходов, но их в Grid гораздо больше.

Чтобы начать использовать Grid, достаточно выбрать один способ из тех, что вы видели. Тот, который понравился и показался интересным. Со временем, попробовав разные подходы, вы будете знать, в какой момент лучше подходит тот или иной. Главное — начать.

Почему не все разработчики хотят изучить grid

Часто, когда много работаешь, выбираешь те или иные технологии, которые нравятся и подходят по всем требованиям для решения задач. Привыкая к определённым паттернам и используя только их, очень легко упустить из вида что-то новое, особенно если новое кажется непонятным. Важно иногда посмотреть по сторонам и подумать, нет ли чего-то более интересного и более подходяшего, чем то, к чему привык. И когда речь идёт о создании адаптивных сеток, особенно двумерных, то Grid — это и есть то более интересное и подходящее. Главное — попробовать.

Если ты знаешь и правильно используешь Grid, то ты:

• Более востребован на рынке, чем тот, кто не знает Grid.
• Пишешь меньше кода (меньше HTML-элементов (обёрток), меньше строк в CSS).
• При построении простой сетки можешь писать все стили в одном месте (в grid-container).
• Можешь делать те раскладки, которые нереально сделать без Grid.
• Делаешь раскладки проще и быстрее.
• Экономишь время, своё и коллег на поддержку проекта.
• Можешь потратить это свободное время на более качественную вёрстку макета (делать интересную анимацию, уделить время доступности, улучшить performance и т.п.).
• Grid — это будущее

Если говорить о преимуществах использования Grid в CSS для бизнеса, то они напрямую связаны с вышеперечисленными плюсами. В частности это скорость разработки, простота в поддержке, возможность делать более крутые макеты сайтов и приложений, и т. д.

В заключении хотим сказать, что данная статья написана для знакомства с Grid. И ни в коем случае не призывает забыть обо всех других способах раскладок и микрораскладок блоков на странице, будь то flex, inline-flex или inline-block. CSS Grid Layout — это технология, и каждую технологию нужно использовать с умом и для тех задач, для которых она подходит лучше всего.

• css
• css grid
• css grid layout
• frontend
• front-end
• frontend-разработка
• frontend development

Общие характеристики CSS3 2D Transforms

Свойство transform в CSS3 может изменять размер, форму и положение элемента на веб-странице. Оно преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него. По умолчанию трансформация происходит относительно центра элемента. В сочетании с transition и animation мы можем создавать элементы и интерфейсы, которые вращаются, “танцуют” и масштабируются. Существуют два вида CSS3-трансформаций — 2D и 3D. В данной статье мы пройдёмся по самым часто-используемым методам CSS3-трансформаций — 2D.

2D-трансформации преобразовывают элементы в двумерном пространстве. В коде существуют четыре основных метода двумерного преобразования это: rotate , scale , skew , и translate . Остальные методы преобразовывают элемент в одном измерени, речь идёт об scaleX/scaleY , skewX/skewY , translateX и translateY .

Метод 2D Transform: rotate()

Данный метод вращает элемент вокруг его начала на угол, указанный вокруг точки начала преобразования. При положительном значении rotate(45deg) элемент повернется по часовой стрелке на
45 градусов, а при отрицательном значении rotate(-45deg) оно повернётся против часовой стрелки. Пример:

Метод rotate() может принимать значения в единицах угла. Угловые единицы определяются модулем CSS значений и единиц измерения уровня 3. Это могут быть deg (градусы), rad (радианы), grad (gradians), или turn (единицы оборота). Один полный оборот равен 360deg, 6.28rad, 400grad или 1turn.

Например: значения метода rotate() , превышающие один оборот (скажем, rotate(540deg) или rotate(1.5turn)), отображаются статично в соответствии с их остаточным значением. Другими словами, 540deg отображается так же, как 180deg (540deg-360deg), а 1.5turn получается таким же, как .5turn (1,5-1). Ну а если мы хотим анимировать данный метод, то нам необходимо добавить к нашему коду в CSS, transition или animation эффекты. В данном случае (rotate(540deg)), анимация прокрутила бы элемент в полтора раза.

Методы 2D Transform: scale , scaleX , и scaleY

С помощью метода scale() мы можем увеличить или уменьшить отображаемый размер элемента в X-размерности (scaleX), Y-размерности (scaleY) или обоих (scale). Работа данного метода проиллюстрирована ниже, где пунктирная граница указывает на исходные границы элемента, а знак + обозначает ее центральную точку.

В качестве аргумента метод scale() может принимать любое положительное или отрицательное число. Процентные значения не поддерживаются. Положительное значение, превышающие 1, увеличивают размер элемента. Например, scale(1.5) увеличивает размер элемента в направлениях X и Y в 1,5 раза. Положительные значения между 0 и 1 уменьшают размер элемента.

Значения, меньше нуля, также будут приводить к тому, что элемент будет увеличиваться или уменьшаться по размеру и создавать эффект отражения (flip).

Примечание: Использование scale(0) приведет приведет к визуальному исчезновению элемента.

Использование scale(1) никак не масштабирует элемент. scale(-1) так же не изменит размер элемента, но отрицательное значение вызовет эффект отражения элемента(flip). Несмотря на то, что элемент не изменяется, он по-прежнему запускает новый контекст стекирования и содержит блок.

Для более произвольного масштабирования можно указать два параметра — для горизонтали и вертикали соответственно. Например: scale(1.5, 2). Следующий код увеличит масштаб элемента в полтора раза по горизонтали и в два раза по вертикали. Мы могли бы так же, например, отразить объект только по оси Х, используя scale(-1, 1). А если scale будет иметь только одно значение, то это изменит элемент исходя из этого значения в оба направления одинаково.

Методы 2D Transform: translateX , translateY , and translate

Следующим методом, который мы рассмотрим это будет translate(x,y) , которая позволяет двигать объект по оси X — вправо/влево и Y—вверх/вниз.

Например: если элемент расположен с нулевыми пикселями слева, то использование transform: translateX (50px) сдвинет его положение на 50 пикселей вправо от его начальной позиции,
а transform: translateY (50px) сдвинет элемент по вертикали на 50 пикселей вниз.

Методы translateX() , translateY() и translate(x,y) — могут принимать такие единицы длины как пиксели px, em, rem и viewport units (vw и vh).

С translate() , мы также можем изменять позицию элемента горизонтально и вертикально используя только один метод. В данном случае можно использовать два аргумента: X translation значение и Y translation значение. На примере внизу вы можете видеть квадрат на котором было использован метод transform: translate(120%, -50px) , где левый зелёный квадрат занимает оригинальную позицию, а правый зелёный квадрат смещён на 120% горизонтально и -50px вертикально от её оригинальной позиции.

Вместо translateX() и translateY() по отдельности можно использовать translate(x,y) это более короткий вариант данного метода. Как я уже указывал выше X — будет отвечать за горизонтальный сдвиг, а Y — за вертикальный. Более того, если мы в translate(x,y) укажем только одно значение, то оно автоматический будет использоваться как значение translateX() , а translateY() получит значенье 0.
Например: transform: translate(-50px); сдвинет элемент влево по оси X на 50px, а по оси Y оно останется на месте со значением 0.

Важно так же отметить, что при положительном значении аргумента translateX() , элемент сдвигается вправо по горизонтали, а translateY() вниз по вертикали. И наоборот при отрицательном значении translateX() сдвигает элемент влево по горизонтали, а translateY() вверх по вертикали.

Зачастую метод translate() используют:
— чтоб сдвигать элементы вправо-влево, вверх-вниз и наоборот
— для выравнивания элементов по центру страницы
— они служат одной из составляющих вместе с animation или transition для создания анимаций на странице и позволяют двигать элементы без какого-либо использования Java Script.

Методы 2D Transform: skew , skewX , and skewY

Метод transform: skew задает скос элемента, превращая тем самым его из прямоугольника в параллелограмм. Скос осуществляется вокруг точки, задаваемой свойством transform-origin (по умолчанию это центр элемента). Ниже приведён пример, о том как именно работает данный метод

Методы— skew , skewX , and skewY —так же как и rotate() поддерживают такие угловые значения аргумента как: deg, grad, rad (valid) и turn(not valid).

skew может принимать один или два параметра. Если параметров два — первый параметр задает скос по горизонтали, а второй — по вертикали. Если параметр один, то оно ведет себя как skewX , задает скос по горизонтали (а не по обеим сторонам. ) Пример:

skewY задаёт скос элемента по вертикали. Ниже приведён пример того как это работает transform: skewY(30deg) . Точки справа от позиции по умолчанию сдвигаются вниз с положительными значениями и вверх если эти значения отрицательные transform: skewY(-30deg) .

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

Немного о поддержке браузерами методов CSS Transforms

Заключение

В заключении хотелось бы сказать что вместе с transform мы получили уйму новых возможностей сделать наш сайт более красивым и современным. И что самое главное это намного облегчило нам веб девелоперам жизнь. Спасибо CSS3. Отпишитесь ниже в комментариях, как вам статья и о чём бы вы хотели чтоб я написал в следующий раз. Спасибо что дочитали и до следующей встречи на страницах Medium.

Подчеркивание, зачеркивание текста в CSS: свойство text-decoration

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

Значение	Что делает
underline	Нижнее подчеркивание текста
overline	Верхнее подчеркивание текста
line-through	Зачеркивание текста
blink	Мигание текста
none	Удаление всех эффектов
inherit	Наследование значений родителя

Пример записи стиля:

Применяя свойство text-decoration в CSS, следует соблюдать чувство меры и некоторые рекомендации. Перед использованием значения underline не для гиперссылки убедитесь, что текст на веб-странице не будет на нее похож. Многие пользователи воспринимают подчеркнутый текст как ссылку. Чтобы более гибко настроить стиль и иметь возможность изменять толщину, вид и цвет полосы подчеркивания, можно использовать свойство border (подробнее о нем мы будем говорить чуть позже).

Если вы желаете убрать стандартное подчеркивание гиперссылки в браузере, воспользуйтесь значением none .

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

Скриншот с примерами использования стиля:

Далее в учебнике: установка тени для текста при помощи свойства CSS text-shadow.