Как изменить форму div css

Перевод
статьи
«How to style forms with CSS: A beginner’s guide».

Приложения получают данные от
пользователей, в основном, через формы.
Возьмем для примера обычную форму
регистрации. Там всегда будет несколько
полей, куда пользователь может ввести
нужную информацию (свое имя, email и т. д.).

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

И это не мое личное мнение. На иллюстрации
ниже вы видите, как выглядит обычная
HTML-форма без CSS.

А вот та же форма, в оформлении которой
использовали каскадные таблицы стилей.

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

Наше руководство по стилизации форм
при помощи CSS будет состоять из шести
пунктов.

1. Определение размеров формы
   (box-sizing).
2. Селекторы CSS для элементов ввода
   (input).
3. Базовые методы стилизации для
   текстовых полей ввода.
4. Стилизация прочих полей ввода.
5. Псевдоклассы UI.
6. Элементы ввода, недоступные для
   кастомизации.

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

Поехали!

1. Устанавливаем box-sizing

Я обычно устанавливаю *
{box-sizing:border-box;} не только для форм, но и
для веб-страниц. Благодаря этому ширина
(width) всех элементов будет содержать
внутренние отступы (padding).

Пример:

.some-class {
  width:200px;
  padding:20px;
}

Ширина
.some-class без box-sizing:border-box будет больше
200px, что может стать проблемой. Поэтому
большинство разработчиков используют
border-box для всех элементов.

Ниже приведена улучшенная версия
нашего первоначального кода. В нее также
добавлены псевдоэлементы :before и :after.

*, *:before, *:after {
  box-sizing: border-box;
}

Совет:
универсальный селектор * выбирает все
элементы в документе.

2. Селекторы CSS для элементов
ввода

Самый простой способ выбрать элементы
ввода — использовать селекторы атрибутов.

input[type=text] {
  // input elements with type="text" attribute
}
input[type=password] {
  // input elements with type="password" attribute
}

Эти селекторы будут выбирать все элементы ввода в документе. Если вам нужно выбрать какие-то специфические селекторы, следует добавить классы:

<input type="text" class="signup-text-input" />

Тогда:

.signup-text-input {
   // styles here
}

3. Базовые методы стилизации
для однострочных текстовых полей ввода

Чаще всего поля ввода в формах бывают
однострочными. Обычно такое поле
представляет собой простой блок с
границей (его вид зависит от браузера).

Вот HTML-разметка для однострочного
текстового поля с плейсхолдером.

<input type="text" placeholder="Name" />

Выглядеть это будет так:

Чтобы
сделать это текстовое поле более
привлекательным, можно использовать
следующие свойства CSS:

• Padding (внутренние отступы)
• Margin (внешние отступы)
• Border (граница)
• Box shadow (тень блока)
• Border radius (для скругления границ)
• Width (ширина)
• Font (шрифт)

Давайте пройдемся по каждому из этих
свойств.

Padding

Добавление некоторого внутреннего
пространства может повысить четкость.
Чтобы это сделать, применяем свойство
padding.

input[type=text] {
  padding: 10px;
}

Margin

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

input[type=text] {
  padding:10px;
  margin:10px 0; // add top and bottom margin
}

Border

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

.border-customized-input {
   border: 2px solid #eee;
}

Вы также можете вообще убрать границу.

.border-removed-input {
  border: 0;
}

Совет:
если убираете границу, обязательно
добавьте цвет фона или тень. В противном
случае пользователь просто не увидит
ваше поле.

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

.border-bottom-input {
  border:0; // remove default border
  border-bottom:1px solid #eee; // add only bottom border
}

Box shadow

Свойство CSS box-shadow позволяет добавить
тень элемента. Меняя 5 значений этого
свойства, вы сможете добиться самых
разнообразных эффектов.

input[type=text] {
  padding:10px;
  border:0;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.06);
}

Border radius

Свойство border-radius может очень сильно
изменить вид ваших форм. Поля для ввода
текста, имеющие скругление углов,
выглядят совсем иначе.

.rounded-input {
  padding:10px;
  border-radius:10px;
}

Комбинируя box-shadow и border-radius, вы можете существенно изменить вид полей.

Width

Используйте свойство width, чтобы
установить ширину поля ввода.

input {
  width:100%;
}

Font

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

input, textarea {
  font-family:inherit;
  font-size: inherit;
}

4. Стилизация прочих типов полей ввода

Вы также можете прописывать стили и
для других полей — области текста,
радиокнопок, чек-боксов и пр.

Давайте рассмотрим подробнее каждое
из них.

Текстовые области (text areas)

Текстовые области напоминают
однострочные текстовые поля ввода, с
той лишь разницей, что здесь пользователь
может ввести не одну строку текста.
Обычно они используются, если нужно
принимать более «многословные» данные:
комментарии, сообщения и т. п. Для
стилизации этих областей вы можете
использовать все свойства, о которых
мы говорили ранее.

Также для текстовых областей применимо
и очень полезно свойство resize. В большинстве
браузеров текстовые области по умолчанию
могут растягиваться как по оси x, так и
по оси y (значение: both). Но вы можете
установить для этого свойства также
значение horizontal или vertical.

Посмотрите на пример:

See the Pen
Styled Textarea (for LogRocket) by Supun Kavinda (@SupunKavinda)
on CodePen.

Здесь
я использовал resize:vertical, чтобы разрешить
изменение размера исключительно по
вертикали. Такая практика применяется
в большинстве форм, поскольку позволяет
избежать появления горизонтальной
полосы прокрутки.

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

Чекбоксы и радиокнопки

Дефолтные чекбоксы и радиокнопки
очень сложно стилизовать, для этого
требуется более сложный CSS-код (и HTML —
тоже).

Для стилизации чекбокса используйте
следующий HTML-код.

<label>Name
  <input type="checkbox" />
  <span></span>
</label>

Несколько
вещей, на которые нужно обратить внимание:

• Поскольку мы используем <label> в
  качестве обертки для <input>, если вы
  кликнете на любой элемент внутри
  <«label«>, «кликнутым» будет <input>.
• Мы спрячем <input>, потому что
  браузеры практически не позволяют нам
  его модифицировать.
• <span> создает пользовательский
  чекбокс.
• Чтобы получить положение «отмечено»
  и стилизовать пользовательский чекбокс,
  мы будем использовать псевдокласс
  input:checked.

Вот пользовательский чекбокс
(комментарии в CSS-коде поясняют происходящее
более подробно):

See the Pen
yLNKQBo by Supun Kavinda (@SupunKavinda)
on CodePen.

Вот пользовательская радиокнопка:

See the Pen
eYNMQNM by Supun Kavinda (@SupunKavinda)
on CodePen.

В
обоих примерах мы использовали одну и
ту же концепцию (input:checked).

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

Раскрывающийся список

Раскрывающийся список позволяет
пользователю выбрать элемент из
нескольких предложенных вариантов.

<select name="animal">
    <option value="lion">Lion</option>
    <option value="tiger">Tiger</option>
    <option value="leopard">Leopard</option>
</select>

Вы
можете стилизовать элемент <select>,
чтобы он выглядел более привлекательно.

select {
  width: 100%;
  padding:10px;
  border-radius:10px;
}

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

Кнопки

Как и у большинства элементов, у кнопок
есть стили, установленные по умолчанию.

<button>Click Me</button>

Давайте немного украсим нашу кнопку.

button {

  /* remove default behavior */
  appearance:none;
  -webkit-appearance:none;

  /* usual styles */
  padding:10px;
  border:none;
  background-color:#3F51B5;
  color:#fff;
  font-weight:600;
  border-radius:5px;
  width:100%;

}

5. Псевдоклассы UI

Ниже приведен список псевдоклассов,
которые широко используются с элементами
форм.

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

• :required
• :valid и :invalid
• :checked (этим мы уже пользовались)

Эти могут использоваться для создания
эффектов для каждого состояния:

• :hover
• :focus
• :active

Сообщения, генерируемые при
помощи :required

Показываем сообщение о том, что
заполнение поля является обязательным:

<label>Name
  <input type="text">
  <span></span>
</label>
<label>Email
  <input type="text" required>
  <span></span>
</label>


label {
  display:block;
}
input:required + span:after {
  content: "Required";
}

Если
вы удалите атрибут required при помощи
JavaScript, сообщение «Required» исчезнет
автоматически.

Примечание: <input> не может содержать
другие элементы. А значит, и псевдоэлементы
:after или :before. Поэтому нам нужно использовать
другой элемент — <span>.

Мы можем сделать то же самое с
псевдоклассами :valid и :invalid.

:hover и :focus

:hover выбирает элемент, когда на него
наводится курсор мыши. :focus выбирает
элемент, когда тот в фокусе.

Эти псевдоклассы часто используются
для создания переходов и легких визуальных
изменений. Например, можно менять ширину,
цвет фона, цвет границы, густоту тени и
т. п. Если вместе с этими свойствами
использовать свойство transition, изменения
будут более плавными.

Вот несколько эффектов наведения для
элементов формы (попробуйте навести
курсор на разные поля):

See the Pen
yLNKZqg by Supun Kavinda (@SupunKavinda)
on CodePen.

Когда пользователь видит небольшие
изменения в элементе, происходящие при
наведении мыши, он понимает, что с
элементом можно что-то делать. Это важно
для дизайна элементов форм.

Вы замечали, что в некоторых браузерах
вокруг элемента, находящегося в фокусе,
появляется синяя внешняя граница? Вы
можете использовать псевдокласс :focus,
чтобы удалить ее и добавить другие
эффекты для элемента в фокусе.

Следующий код удаляет внешнюю границу
для всех элементов:

*:focus {outline:none !important}

Добавляем внешнюю границу для элементов
в фокусе:

input[type=text]:focus {
  background-color: #ffd969;
  border-color: #000;
  // and any other style
}

6. Элементы ввода, недоступные для
кастомизации

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

• <input type=»color»>
• <input type=»file»>
• <progress>
• <option>, <optgroup>, <datalist>

Эти элементы предоставляются браузером
и стилизуются в зависимости от вашей
ОС. Единственный способ изменить их
стиль — использовать кастомные контролы
(Custom Controls), созданные при помощи div, span и
прочих HTML-элементов, поддающихся
стилизации.

Например, чтобы стилизовать <input
type=»file»>, мы можем спрятать дефолтный
input и использовать пользовательскую
кнопку.

Кастомные контролы для элементов форм
уже разработаны для основных
JavaScript-библиотек. Найти их можно на
GitHub.

Заключение

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

В качестве совета напоследок: не забывайте делать все ваши формы отзывчивыми.

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

Свойство transform поставляется в двух разных наборах — двумерных и трёхмерных. В каждом из них есть свои индивидуальные свойства и значения.

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

Синтаксис transform

Фактический синтаксис для свойства transform достаточно прост и включает свойство transform, за которым идёт значение. Значение определяет тип трансформации, внутри скобок которого следует определённая величина.

div {
  -webkit-transform: scale(1.5);
     -moz-transform: scale(1.5);
       -o-transform: scale(1.5);
          transform: scale(1.5);
}

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

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

Двумерная трансформация

Элементы могут быть искажены или преобразованы как в двух, так и в трёх плоскостях. Двумерные преобразования работают по осям х и у, известных как горизонтальная и вертикальная оси. Трёхмерные преобразования работают по осям х и у, а также оси z. Эти трёхмерные преобразования помогают определить не только длину и ширину элемента, но и глубину. Мы начнем с обсуждения, как трансформировать элементы в двумерной плоскости, а затем перейдём к работе с трёхмерными преобразованиями.

2d rotate

Свойство transform принимает несколько разных значений. Значение rotate обеспечивает возможность поворота элемента от 0 до 360 градусов. Положительное значение поворачивает элемент по часовой стрелке, а использование отрицательного значения поворачивает элемент против часовой стрелки. По умолчанию точкой поворота является центр элемента, 50% 50%, по горизонтали и вертикали. Позже мы обсудим как вы можете изменить эту точку поворота.

HTML

<figure class="box-1">Блок 1</figure>
<figure class="box-2">Блок 2</figure>

CSS

.box-1 {
  transform: rotate(20deg);
}
.box-2 {
  transform: rotate(-55deg);
}

Демонстрация rotate

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

2d scale

Использование значения scale в свойстве transform позволяет изменить визуальный размер элемента. Значение масштаба по умолчанию равно 1, поэтому любое значение от .99 до .01 визуально уменьшает элемент, в то время как любое значение больше или равное 1.01 визуально увеличивает элемент.

HTML

<figure class="box-1">Блок 1</figure>
<figure class="box-2">Блок 2</figure>

CSS

.box-1 {
  transform: scale(.75);
}
.box-2 {
  transform: scale(1.25);
}

Демонстрация scale

Можно масштабировать только высоту или ширину элемента, используя значения scaleX и ScaleY. Значение scaleX будет масштабировать ширину элемента, в то время как значение ScaleY будет масштабировать его высоту. Для масштабирования высоты и ширины элемента, но с разными размерами, могут быть одновременно установлены значения по оси х и у. Для этого используя декларацию scale, задав сперва значение по оси x, затем через запятую значение по оси y.

HTML

<figure class="box-1">Блок 1</figure>
<figure class="box-2">Блок 2</figure>
<figure class="box-3">Блок 3</figure>

CSS

.box-1 {
  transform: scaleX(.5);
}
.box-2 {
  transform: scaleY(1.15);
}
.box-3 {
  transform: scale(.5, 1.15);
}

Демонстрация множественного масштабирования

2d translate

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

Как и со значением scale, чтобы одновременно установить значения по осям x и y, воспользуйтесь значением translate и сперва укажите значение по оси х, затем через запятую значение по оси y.

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

HTML

<figure class="box-1">Блок 1</figure>
<figure class="box-2">Блок 2</figure>
<figure class="box-3">Блок 3</figure>

CSS

.box-1 {
  transform: translateX(-10px);
}
.box-2 {
  transform: translateY(25%);
}
.box-3 {
  transform: translate(-10px, 25%);
}

Демонстрация translate

2d skew

Последнее значение skew в группе transform используется для искажения элементов по горизонтальной оси, вертикальной оси или двум осям сразу. Синтаксис очень похож на значения scale и translate. Применение значения skewX деформирует элемент по горизонтальной оси, в то время как значение skewY деформирует элемент по вертикальной оси. Чтобы исказить элемент по двум осям, используется значение skew, сперва задаётся значение по оси х, затем через запятую значение по оси у.

Значение skew измеряется в градусах. Единицы длины, такие как пиксели или проценты, здесь не применимы.

HTML

<figure class="box-1">Блок 1</figure>
<figure class="box-2">Блок 2</figure>
<figure class="box-3">Блок 3</figure>

CSS

.box-1 {
  transform: skewX(5deg);
}
.box-2 {
  transform: skewY(-20deg);
}
.box-3 {
  transform: skew(5deg, -20deg);
}

Демонстрация skew

Комбинация трансформаций

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

Применение нескольких деклараций transform не будет работать, так как каждая декларация перезапишет всё над ним. Поведение в этом случае такое же, как если бы вы установили height для элемента несколько раз.

HTML

<figure class="box-1">Блок 1</figure>
<figure class="box-2">Блок 2</figure>

CSS

.box-1 {
  transform: rotate(25deg) scale(.75);
}
.box-2 {
  transform: skew(10deg, 20deg) translateX(20px);
}

Демонстрация комбинации транформаций

За каждой трансформацией также стоит матрица, явно определяющая поведение transform. Использование значений rotate, scale, transition и skew обеспечивает простой путь задать эту матрицу. Тем не менее, если вы расположены к математике и предпочитаете глубже погрузиться в преобразования, попробуйте свои силы в использовании значения matrix.

<div class="cube">
  <figure class="side top">1</figure>
  <figure class="side left">2</figure>
  <figure class="side right">3</figure>
</div>

.cube {
  position: relative;
}
.side {
  height: 95px;
  position: absolute;
  width: 95px;
}
.top {
  background: #9acc53;
  transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
  background: #8ec63f;
  transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
}
.right {
  background: #80b239;
  transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
}

Точка трансформации

Как упоминалось ранее, по умолчанию точкой трансформации является центр элемента, 50% по горизонтали и 50% по вертикали. Чтобы изменить это положение, может быть использовано свойство transform-origin.

Свойство transform-origin может принимать одно или два значения. Когда задано только одно значение, то оно используется для горизонтальной и вертикальной осях. Если указаны два значения, то первое применяется для горизонтальной оси, а второе для вертикальной.

Отдельно значения похожи на позиционирование фонового изображения с помощью размера или ключевых слов. Таким образом, 0 0 аналогично значению top left, а 100% 100% то же самое, что и bottom right. Более конкретные значения также могут быть установлены, к примеру, 20px 50px задаст исходную точку элемента как 20 пикселей от края и 50 пикселей вниз.

HTML

<figure class="box-1">Блок 1</figure>
<figure class="box-2">Блок 2</figure>
<figure class="box-3">Блок 3</figure>
<figure class="box-4">Блок 4</figure>

CSS

.box-1 {
  transform: rotate(15deg);
  transform-origin: 0 0;
}
.box-2 {
  transform: scale(.5);
  transform-origin: 100% 100%;
}
.box-3 {
  transform: skewX(20deg);
  transform-origin: top left;
}
.box-4 {
  transform: scale(.75) translate(-10px, -10px);
  transform-origin: 20px 50px;
}

Демонстрация transform-origin

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

Перспектива

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

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

Использование значения perspective в свойстве transform прекрасно работает для преобразования одного элемента относительно единичной уникальной перспективы. Если вы желаете преобразовать группу элементов с одинаковой перспективой или точкой схода, то применяйте свойство perspective для их родительского элемента.

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

HTML

<figure class="box">Блок 1</figure>
<figure class="box">Блок 2</figure>
<figure class="box">Блок 3</figure>

CSS

.box {
  transform: perspective(200px) rotateX(45deg);
}

Демонстрация значения perspective

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

HTML

<div class="group">
  <figure class="box">Блок 1</figure>
  <figure class="box">Блок 2</figure>
  <figure class="box">Блок 3</figure>
</div>

CSS

.group {
  perspective: 200px;
}
.box {
  transform: rotateX(45deg);
}

Демонстрация свойства perspective

Глубина перспективы

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

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

HTML

<figure class="box-1">Box 1</figure>
<figure class="box-2">Box 2</figure>

CSS

.box-1 {
  transform: perspective(100px) rotateX(45deg);
}
.box-2 {
  transform: perspective(1000px) rotateX(45deg);
}

Демонстрация глубины перспективы

Начало перспективы

Как и в случае установки transform-origin вы можете также задать perspective-origin. Те же значения, используемые для свойства transform-origin, могут быть использованы в свойстве perspective-origin и оказывают такое же влияние на элемент. Есть большая разница между этими двумя подходами — точка трансформации определяет координаты, используемые для расчёта изменения трансформации, тогда как начало перспективы определяет координаты точки схода преобразования.

HTML

<div class="original original-1">
  <figure class="box">Блок 1</figure>
</div>
<div class="original original-2">
  <figure class="box">Блок 2</figure>
</div>
<div class="original original-3">
  <figure class="box">Блок 3</figure>
</div>

CSS

.original {
  perspective: 200px;
}
.box {
  transform: rotateX(45deg);
}
.original-1 {
  perspective-origin: 0 0;
}
.original-2 {
  perspective-origin: 75% 75%;
}
.original-3 {
  perspective-origin: 20px 40px;
}

Демонстрация perspective-origin

Трёхмерная трансформация

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

3d rotate

До сих пор мы обсуждали, как повернуть объект по часовой или против часовой стрелки на плоской поверхности. С помощью трёхмерных преобразований мы можем вращать элемент вокруг любых осей. Для этого мы используем три новые значения, включая rotateX, rotateY н rotateZ.

Значение rotateX позволяет поворачивать элемент вокруг оси х, как будто он сгибается пополам по горизонтали. Значение rotateY позволяет поворачивать элемент вокруг оси у, как будто он сгибается пополам по вертикали. И, наконец, значение rotateZ позволяет вращать элемент вокруг оси z.

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

HTML

<figure class="box-1">Блок 1</figure>
<figure class="box-2">Блок 2</figure>
<figure class="box-3">Блок 3</figure>

CSS

.box-1 {
  transform: perspective(200px) rotateX(45deg);
}
.box-2 {
  transform: perspective(200px) rotateY(45deg);
}
.box-3 {
  transform: perspective(200px) rotateZ(45deg);
}

Демонстрация 3d rotate

3d scale

При использовании scaleZ для трёхмерных преобразованиях элементы могут масштабироваться по оси z. Это не очень интересно, когда никаких других трёхмерных преобразований нет, так как нечего, в частности, и масштабировать. В демонстрации ниже масштаб элементов увеличивается и уменьшается по оси z, при этом добавляется значение rotateX, чтобы увидеть поведение scaleZ. При удалении rotateX элементы будут выглядеть не изменёнными.

HTML

<figure class="box-1">Блок 1</figure>
<figure class="box-2">Блок 2</figure>

CSS

.box-1 {
  transform: perspective(200px) scaleZ(1.75) rotateX(45deg);
}
.box-2 {
  transform: perspective(200px) scaleZ(.25) rotateX(45deg);
}

Демонстрация 3d scale

3D translate

Элементы могут также передвигаться по оси z с помощью значения translateZ. Отрицательное значение будет толкать элемент дальше по оси z, что приводит к уменьшению элемента. Положительное значение будет тянуть элемент ближе по оси z, что приводит к увеличению элемента.

Хотя это может показаться очень похоже на двумерную трансформацию scale, на самом деле у них есть различия. Преобразование происходит по оси z, а не по осям х или у. При работе с трёхмерными преобразованиями возможность переместить элемент по оси z даёт серьёзные преимущества, как при построении куба в примере ниже.

HTML

<figure class="box-1">Блок 1</figure>
<figure class="box-2">Блок 2</figure>

CSS

.box-1 {
  transform: perspective(200px) translateZ(-50px);
}
.box-2 {
  transform: perspective(200px) translateZ(50px);
}

Демонстрация 3d translate

3D skew

skew является единственной двумерной трансформацией, которая не может быть преобразована в трёхмерном масштабе. Элементы могут быть наклонены по осям х и у, затем преобразованы трёхмерно как хотелось бы, но они не могут быть наклонены по оси z.

Сокращённые трёхмерные трансформации

Как и в случае комбинаций двумерных преобразований, есть также значения для записи сокращённых трёхмерных преобразований. Эти значения включают rotate3d, scale3d, transition3d и matrix3d. Эти свойства требуют чуть больше математики, а также глубокого понимания матриц, стоящих за каждой трансформацией. Если вам интересно чуть глубже взглянуть на это, тогда вперёд!

transform-style

В некоторых случаях трёхмерные трансформации будут применяться к элементу, вложенному в родительский элемент, который в свою очередь также трансформируется. В этом случае вложенные преобразованные элементы не будут появляться в своём собственном трёхмерном пространстве. Чтобы позволить вложенным элементам трансформироваться в их собственной трёхмерной плоскости применяется свойство transform-style со значением preserve-3d.

Свойство transform-style должно быть добавлено к родительскому элементу, выше любых вложенных преобразований. Значение preserve-3d позволяет преобразованным дочерним элементам появляться в их собственной трёхмерной плоскости, в то время как значение flat заставляет преобразованные дочерние элементы лежать в двухмерной плоскости.

HTML

<div class="rotate three-d">
  <figure class="box">Блок 1</figure>
</div>
<div class="rotate">
  <figure class="box">Блок 2</figure>
</div>

CSS

.rotate {
  transform: perspective(200px) rotateY(45deg);
}
.three-d {
  transform-style: preserve-3d;
}
.box {
  transform: rotateX(15deg) translateZ(20px);
  transform-origin: 0 0;
}

Демонстрация transform-style

Чтобы увидеть дополнительный пример использования свойства transform-style в действии прочитайте объяснение WebKit.

backface-visibility

При работе с трёхмерными преобразованиями, элементы время от времени трансформируются таким образом, что их поверхность отворачивается от экрана. Это может быть вызвано установкой значения rotateY(180deg), к примеру. По умолчанию эти элементы показываются с обратной стороны. Так что если вы не желаете видеть эти элементы вообще, установите свойство backface-visibility как hidden, и вы спрячете элемент всякий раз, когда он отворачивается от экрана.

Другим значением для backface-visibility является значение по умолчанию visible, оно всегда показывая элемент, независимо от того, в каком направлении он смотрит.

В демонстрации ниже обратите внимание, что второй блок не отображается, поскольку установлена запись backface-visibility: hidden. Свойство backface-visibility имеет более важное значение при использовании анимации.

HTML

<figure class="box-1">Блок 1</figure>
<figure class="box-2">Блок 2</figure>

CSS

.box-1 {
  transform: rotateY(180deg);
}
.box-2 {
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

Демонстрация backface-visibility

<div class="cube-container">
  <div class="cube">
    <figure class="side front">1</figure>
    <figure class="side back">2</figure>
    <figure class="side left">3</figure>
    <figure class="side right">4</figure>
    <figure class="side top">5</figure>
    <figure class="side bottom">6</figure>
  </div>
</div>

.cube-container {
  height: 200px;
  perspective: 300;
  position: relative;
  width: 200px;
}
.cube { 
  height: 100%;
  position: absolute;
  transform: translateZ(-100px);
  transform-style: preserve-3d;
  width: 100%;
}
.side {
  background: rgba(45, 179, 74, .3);
  border: 2px solid #2db34a;
  height: 196px;
  position: absolute;
  width: 196px;
}
.front {
  transform: translateZ(100px);
}
.back {
  transform: rotateX(180deg) translateZ(100px);
}
.left {
  transform: rotateY(-90deg) translateZ(100px);
}
.right {
  transform: rotateY(90deg) translateZ(100px);
}
.top {
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

Ресурсы и ссылки

• Transform Property на CSS3 Files
• Understanding the CSS Transforms Matrix на Dev.Opera
• An Introduction to CSS 3-D Transforms на 24 Ways
• Transform Function на Mozilla Developer Network
• Transform Style на WebKit
• Backface Visibility на CSS-Tricks

Тег <div> — пустой контейнер, который определяет разделение или раздел. Он не влияет на контент или макет и используется для группировки HTML-элементов, которые должны быть написаны с помощью CSS или с помощью скриптов.

Мы рекомендуем использовать тег <div> только в случае, когда нецелесообразно использовать семантические элементы HTML5, такие как <nav> , <main> или <article>.

Тег <div> является блочным элементом, поэтому разрыв строки помещается до и после него.

Вы можете поместить любой элемент HTML в тег <div>, включая другой тег <div>.

Тег <div> не может быть дочерним элементом <p>, так как параграф будет разорван в месте включения тега <div> .

Для применения стилей внутри параграфа используется тег <span>.

Синтакс

Тег <div> — парный, состоит из двух частей, открывающего (<div>) и закрывающего (</div>) тегов.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Использование тега &lt;div&gt;</title>
  </head>
  <body>
    <h1> Тег &lt;div&gt; </h1>
    <div style="background-color:#8ebf42">
      <p> Мы использовали тег &lt;div&gt;, чтобы сгруппировать два параграфа и добавить фон к тексту, а для того, чтобы изменить цвет <span style="color:#1c87c9"> этого слова</span> мы использовали тег &lt;span&gt;.</p>
      <p> Обратите внимание, что тег &lt;div&gt; является блочным элементом, до и после него добавляется разрыв строки.</p>
    </div>
  </body>
</html>

Результат

При верстке HTML страниц с помощью слоев тег <div> является ее базовым фундаментом, так как именно этот тег определяет многочисленные структурные блоки веб-страницы.

Для корректного отображения блоков на странице необходимо их правильно расположить. Различают несколько способов расположения блоков в зависимости от целей и контента страницы. Давайте рассмотрим несколько из них.

Флексбокс¶

Спецификация CSS Flexible Box успешно пришла на замену верстке float-ами. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .flex-container {
      display: flex;
      align-items: center; /* Подставьте другое значение и посмотрите результат */
      width: 90%;
      height: 300px;
      background-color: #1c87c9;
      }
      .flex-container > div {
      width: 25%;
      padding: 5px 0;
      margin: 5px;
      background-color: lightgrey;
      text-align: center;
      font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Результат

CSS свойство float ¶

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
    <style>
      .content {
      overflow: auto;
      border: 3px solid #666666;
      }
      .content div {
      padding: 10px;
      }
      .content a {
      color: darkblue;
      }
      .blue {
      float: right;
      width: 45%;
      background: #1c87c9;
      }
      .green {
      float: left;
      width: 35%;
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="blue">
        <p>Параграф в блоке div.</p>
        <a href="#">Гиперссылка в теге div.</a>
        <ul>
          <li>Элемент списка 1</li>
          <li>Элемент списка 2</li>
        </ul>
      </div>
      <div class="green">
        <p>Параграф в блоке div.</p>
        <ol>
          <li>Элемент списка 1</li>
          <li>Элемент списка 1</li>
        </ol>
      </div>
    </div>
  </body>
</html>

Результат

Отрицательные отступы ¶

Использование отрицательных отступов (negative margins) открывает широкие возможности и позволяет сделать верстку более универсальной.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
    <style>
      .content div {
      padding: 2%;
      }
      .content a {
      color: darkblue;
      }
      .main-content {
      width: 30%;
      margin-left: 32%;
      }
      .blue {
      width: 25%;
      margin-top: -10%;
      background: #1c87c9;
      }
      .green {
      width: 20%;
      margin: -35% auto auto 70%;
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="main-content">
        <a href="#">Гиперссылка в теге div.</a>
      </div>
      <div class="blue">
        <p>Параграф в теге div.</p>
        <a href="#">Гиперссылка в теге div.</a>
        <ul>
          <li>Элемент списка 1</li>
          <li>Элемент списка 2</li>
        </ul>
      </div>
      <div class="green">
        <p>Параграф в теге div.</p>
        <ol>
          <li>Элемент списка 1</li>
          <li>Элемент списка 2</li>
        </ol>
      </div>
    </div>
  </body>
</html>

Результат

Позиционирование Relative + absolute positioning¶

Комбинация разных типов позиционирования для вложенных элементов — один из удобных и практичных приемов верстки. Если для родительского элемента задать position: relative, а для дочернего position: absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .content { position: relative; height: 400px; border: 1px solid #666666;}
      .content div { position: absolute; width: 35%; padding: 10px; }
      .blue { right: 20px; bottom: 0; background: #1c87c9; }
      .green { top: 10px; left: 15px; background: #8ebf42; }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="blue">
        <p>Параграф в теге div.</p>
      </div>
      <div class="green">
        <p>Параграф в теге div.</p>
      </div>
    </div>
  </body>
</html>

Результат

position: relative не влияет на позиционирование элементов в нормальном потоке, если вы не добавляете смещения.

Тег <div> поддерживает глобальные атрибуты и атрибуты событий.