Применение цвета к HTML-элементам с помощью CSS - CSS: каскадные таблицы стилей

Применение цвета к HTML-элементам с помощью CSS
===============================================

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

К счастью, присвоить цвет к HTML-элементу очень просто, и это можно сделать практически со всеми элементами.

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

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

Что может иметь цвет
--------------------

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

На фундаментальном уровне, свойство `color` (en-US) определяет цвет текста HTML-элемента, а свойство `background-color` - цвет фона элемента. Они работают практически для всех элементов.

### Текст

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

`color` (en-US)

Свойство color применяется к тексту и любому оформлению текста, например: подчёркивание, линии на текстом, перечёркивание и т.д.

`background-color`

Цвет фона текста.

`text-shadow`

Добавляет и устанавливает параметры тени для текста. Один из параметров тени - это основной цвет, который размывается и смешивается с цветом фона на основе других параметров. См. Text drop shadows, чтобы узнать больше.

`text-decoration-color` (en-US)

По умолчанию, элементы оформление текста (подчёркивание, перечёркивание) используют цвет свойства `color`. Но вы можете присвоить другой цвет с помощью свойства `text-decoration-color`.

`text-emphasis-color` (en-US)

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

`caret-color` (en-US)

Цвет, который используется для каретки (caret (en-US)) (курсора ввода текста). Применимо только к редактируемым элементам, таким как `<input>` и `<textarea>` (en-US) или элементам , для которых установлен атрибут `contenteditable`.

### Блоки

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

`Borders`

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

`background-color`

Цвет фона блока.

`column-rule-color`

Цвет линий, которые разделяют колонки текста.

`outline-color`

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

### Границы

Вокруг любого элемента можно создать границу (en-US), т.е. линию вокруг содержимого элемента. См. Box properties, чтобы узнать больше про отношения между элементами и их границами, и статью Оформляем Границы с Помощью CSS (en-US), чтобы узнать больше про то, как применять стили к границам.

Существует краткая запись `border`, которая позволяет задать сразу все свойства границы, включая даже не связанные с цветом свойства, такие как толщина линии (width), стиль линии (style (en-US)): сплошная (solid), штриховая (dashed) и так далее.

`border-color` (en-US)

Задаёт единый цвет для всех сторон границы элемента.

`border-left-color` (en-US), `border-right-color` (en-US), `border-top-color` (en-US), and `border-bottom-color` (en-US)

Позволяет установить цвет соответствующей стороне границы элемента: **border-left-color** - левая граница, **border-right-color** - правая, **border-top-color** - верхняя, **border-bottom-color** - нижняя.

`border-block-start-color` (en-US) and `border-block-end-color` (en-US)

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

`border-inline-start-color` (en-US) and `border-inline-end-color` (en-US)

Эти свойства определяют цвет границы, расположенной ближе всего к началу и концу текста в блоке. Сторона начала и конца зависит от свойств `writing-mode`, `direction` и `text-orientation` (en-US), которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, то `border-inline-start-color` применяется к правой стороне границы.

### Как можно ещё использовать цвет

CSS не единственная web-технология, которая поддерживает цвет.

HTML Canvas API

Позволяет создавать растровую 2D-графику в элементе `<canvas>`. См. Canvas tutorial, чтобы узнать больше.

SVG (Scalable Vector Graphics - Масштабируемая Векторная Графика)

Позволяет создавать изображения с помощью команд, которые рисуют определённые фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе `<img>`, как и любое другое изображение.

WebGL

Библиотека Веб-Графики (The Web Graphics Library) - это кроссплатформенный API на основе OpenGL ES, используется для создания высокопроизводительной 2D и 3D-графики в браузере. См. Learn WebGL for 2D and 3D, чтобы узнать больше..

Как задать цвет
---------------

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

Подробнее о каждом значения цвета, можно прочитать в статье про CSS `<color>`.

### Ключевые слова

Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный (`red`), синий (`blue`), или оранжевый (`orange`)), оттенки серого (от чёрного (`black`) к белому (`white`), включая такие цвета как темносерый (`darkgray`) или светло-серый (`lightgrey`)), а также множество других смешанных цветов: `lightseagreen`, `cornflowerblue`, и `rebeccapurple`.

См. Color keywords - полный перечень всех доступных ключевых слов.

### RGB значения

Есть три способа передачи RGB цвета в CSS.

#### Шестнадцатеричная запись в виде строки

Шестнадцатеричная запись передаёт цвет, используя шестнадцатеричные числа, которые передают каждый компонент цвета (красный, зелёный и синий). Запись также может включать четвёртый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 - 0xFF) или, опционально, как число от 0 до 15 (0x0 - 0xF). Каждый компонент *необходимо* задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет рассчитывается используя число каждого компонента дважды: `"#D"` превращается в `"#DD"`.

Цвет в шестнадцатеричной записи всегда начинается с символа `"#"`. После него начинаются шестнадцатеричные числа цветового кода. Запись не зависит от регистра.

`"#rrggbb"`

Задаёт полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатеричным числом `0xrr`, зелёного - `0xgg` и синего - `0xbb`.

`"#rrggbbaa"`

Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом `0xrr`, зелёного - `0xgg` и синего - `0xbb`. Альфа канал представлен `0xaa`; чем ниже значение, тем прозрачнее становится цвет.

`"#rgb"`

Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом `0xr`, зелёного - `0xg` и синего - `0xb`.

`"#rgba"`

Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом `0xr`, зелёного - `0xg` и синего - `0xb`. Альфа канал представлен `0xa`; чем ниже значение, тем прозрачнее становится цвет.

Например, вы можете представить непрозрачный ярко-синий цвет как `"#0000ff"` или `"#00f"`. Для того, чтобы сделать его на 25% прозрачным, вы можете использовать `"#0000ff44"` или `"#00f4"`.

#### RGB запись в виде функции

RGB запись в виде функции, как и шестнадцатеричная запись, представляет цвет, используя красный, зелёный и синий компоненты (также, опционально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией `rgb()`. Данная функция принимает как вводные параметры значения красного, зелёного и синего компонентов и, опционально, четвёртого компонента - значение альфа канала.

Допустимые значения для каждого из этих параметров:

`red`, `green`, и `blue`

Каждый параметр должен иметь `<integer>` значение между 0 и 255 (включительно), или `<percentage>` от 0% до 100%.

`alpha`

Альфа канал - это числовое значение между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный). Также можно указать значение в процентах, где 0% соответствует 0.0, а 100% - 1.0.

Например, ярко-красный с 50% прозрачностью может быть представлен как `rgb(255, 0, 0, 0.5)` или `rgb(100%, 0, 0, 50%)`.

### HSL запись в виде функции

Дизайнеры часто предпочитают использовать цветовую модель HSL, где H - Hue (оттенок), S - Saturation (насыщенность), L - Lightness or Luminance (светлота). В браузерах HSL цвет представлен через запись HSL в виде функции. CSS функция `hsl()` очень похожа на `rgb()` функцию.

![HSL color cylinder](/ru/docs/Web/CSS/CSS_colors/Applying_color/640px-hsl_color_solid_cylinder.png)

***Рис. 1. Цилиндрическая модель HSL.** Hue (оттенок) определяет фактический цвет, основанный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентное соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого тёмного к самому светлому (от чёрного к белому). Изображение представлено пользователем SharkD в Wikipedia, распространяется на правах лицензии CC BY-SA 3.0 .*

Значение компонента *оттенок* (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через жёлтый, зелёный, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS-свойством `<angle>`, а именно - в градусах (`deg`), радианах (`rad`), градиентах (`grad`) или поворотах (`turn`). Но компонент *оттенок* никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.

Компонент *насыщенность* (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).

Подумайте об этом как о создании идеального цвета краски:

1. Вы начинаете с базовой краски, т.е. с максимально возможной интенсивности данного цвета. Например, наиболее насыщенный синий, который может быть представлен на экране пользователя. Это компонент *hue (оттенок)*: значение представляющее **угол** вокруг цветового круга для насыщенного оттенка, который мы хотим использовать в качестве нашей базы.
2. Далее выберете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это *luminance/ lightness (яркость)*. Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к чёрному, или что-то среднее? Данный компонент определяется в процентах, где 0% - совершенный чёрный цвет и 100% - совершенный белый (независимо от насыщенности или оттенка). Средние значения - это буквальная серая область.
3. Теперь, когда у есть серый цвет и идеально насыщенный цвет, вам необходимо их смешать. Компонент *saturation (насыщенность)* определяет какой процент конечного цвета должен состоять из идеально насыщенного цвета. Остаток конечного цвета формируется серым цветом, который представляет насыщенность.

Опционально вы также можете включить альфа-канал, чтобы сделать цвет менее прозрачным.

Вот несколько примеров цвета в HSL записи:
```

table {
  border: 1px solid black;
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
  text-align: left;
}

th {
  background-color: hsl(0, 0%, 75%);
}
```

```
<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notation</th>
      <th scope="col">Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)</code></td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)</code></td>
      <td style="background-color: hsl(90, 100%, 50%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)</code></td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)</code></td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)</code></td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> </td>
    </tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)</code></td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> </td>
    </tr>
  </tbody>
</table>
```

**Примечание:** Обратите внимание, что, когда вы не указываете единицу измерения оттенка (hue), то предполагается, что он указан в градусах (`deg`).

Использование цвета
-------------------

Теперь, когда вы знаете какие существуют свойства CSS для присваивания цвета к элементам и какие есть форматы описания цвета, вы можете соединить это вместе, чтобы начать использовать цвет. Как вы уже видели в списке под разделом Что может иметь цвет, существует множество вещей, к которым можно применить цвет, используя CSS. Давайте взглянем на это с двух сторон: использовать цвет в таблицах стилей (stylesheet (en-US)) и добавлять, изменять цвет, используя JavaScript код.

### Цвет в таблицах стилей CSS

Самый простой способ присвоить цвет элементу и то, как это обычно делается - это просто указать цвет в CSS. Мы не будем останавливаться на каждом из вышеупомянутых свойств, а просто рассмотрим несколько примеров. Где бы вы не использовали цвет, принцип один и тот же.

Давайте начнём наш пример с результата, который нам нужно достичь:

#### HTML

HTML, который создаёт вышеупомянутый пример:

```html
<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.</p>
  </div>
  <div class="box boxRight">
    <p>This is the second box.</p>
  </div>
</div>
```

Все довольно просто: первый `<div>` используется как обёртка (wrapper) содержимого, которое состоит из ещё двух `<div>`, каждый из которых содержит один параграф (`<p>`) и имеет свой стиль.

Все волшебство, как всегда, происходит в CSS, где мы и будем присваивать цвет к данным HTML-элементам..

#### CSS

CSS мы рассмотрим более детально, чтобы по очереди проанализировать все интересные части.

```css
.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}
```

Класс `.wrapper` определяет стиль для элемента `<div>`, который заключает в себе все остальные элементы. Он устанавливает размер контейнера с помощью свойств ширины `width`, высоты `height`, внешних `margin` и внутренних `padding` полей.

Но больше всего нас интересует свойство граница `border`, которое устанавливает границу вокруг внешнего края элемента. Данная граница представлена сплошной линией, шириной в 6 пикселей, светло-бирюзового цвета (`mediumturquoise`).

Два цветных блока имеют ряд одинаковых свойств, поэтому далее мы установим класс `.box`, который определит эти общие свойства:

```css
.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font:
    28px "Marker Felt",
    "Zapfino",
    cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}
```

Вкратце класс `.box` устанавливает размер каждого блока и параметры шрифта. Также мы используем CSS Flexbox, чтобы с лёгкостью отцентрировать содержимое каждого блока. Мы включаем режим `flex` с помощью `display: flex`, и присваиваем значение center `justify-content` и `align-items`. Затем мы создаём отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.

```css
.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}
```

Класс `.boxLeft`, который используется для стилизации левого блока, выравнивает контейнер по левому краю и присваивает цвета:

* `background-color` определяет цвет фона блока значением `rgb(245, 130, 130)`.
* `outline`, в отличие от привычного нам свойства `border`, не влияет на положение блока и его ширину. `Outline` представлен сплошной, темно-красной линией, шириной в 2 пикселя. Обратите внимание на ключевое слово `darkred`, которое используется для определение цвета.
* Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство `color` (en-US) будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это чёрный цвет.

```css
.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}
```

Класс `.boxRight` описывает свойства правого блока. Блок выравнивается по правому краю и становится рядом с предыдущим блоком. Затем определяются следующие цвета:

* `background-color` определяется значением HSL: `hsl(270deg, 50%, 75%)`. Это светло-фиолетовый цвет.
* `Outline` блока определяет, что вокруг блока должна быть прерывистая линия, шириной в четыре пикселя, фиолетового цвета немного темнее, чем цвет фона (`rgb(110, 20, 120)`).
* Цвет текста определяется свойством `color` (en-US), значение которого `hsl(0deg, 100%, 100%)`. Это один из многих способов задать белый цвет.
* С помощью `text-decoration` (en-US) мы добавляем зелёную волнистую линию под текстом.
* И наконец, свойство `text-shadow` добавляет небольшую чёрную тень тексту.
Предоставляем возможность пользователю выбрать цвет
---------------------------------------------------

There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own color picker, HTML now provides support for browsers to provide one for your use through the `<input>` element, by using `"color"` as the value of its `type` attribute.

The `<input>` element represents a color only in the hexadecimal string notation covered above.

### Example: Picking a color

Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.

**Примечание:** On macOS, you indicate that you've finalized selection of the color by closing the color picker window.

#### HTML

The HTML here creates a box that contains a color picker control (with a label created using the `<label>` element) and an empty paragraph element (`<p>`) into which we'll output some text from our JavaScript code.

```html
<div id="box">
  <label for="colorPicker">Border color:</label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output"></p>
</div>
```

#### CSS

The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...

```css
#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    "sans-serif";
}
```

#### JavaScript

The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the `<input type="color">` element.

```js
let colorPicker = document.getElementById("colorPicker");
let box = document.getElementById("box");
let output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener(
  "input",
  function (event) {
    box.style.borderColor = event.target.value;
  },
  false,
);

colorPicker.addEventListener(
  "change",
  function (event) {
    output.innerText = "Color set to " + colorPicker.value + ".";
  },
  false,
);
```

The `input (en-US)` event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.

The `change (en-US)` event is received when the color picker's value is finalized. We respond by setting the contents of the `<p>` element with the ID `"output"` to a string describing the finally selected color.

Using color wisely
------------------

Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.

### Finding the right colors

Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.

#### Base color

The first step is to choose your **base color**. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage Mountain Dew and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

* A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.
* A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.
* Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

**Примечание:** The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

#### Fleshing out the palette

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See Color and accessibility for a brief explanation of why this matters.

A few examples (all free to use as of the time this list was last revised):

* MDN's color picker tool
* Paletton
* Adobe Color CC online color wheel

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

**Примечание:** Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

### Color theory resources

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

Color Science (Khan Academy in association with Pixar)

An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.

### Color and accessibility

There are several ways color can be an accessibility problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.

You should do at least basic research into color blindness. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

**Примечание:** The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.

For more information about color blindness, see the following articles:

* Medline Plus: Color Blindness (United States National Institute of Health)
* American Academy of Ophthamology: What Is Color Blindness?
* Color Blindness & Web Design (Usability.gov: United States Department of Health and Human Services)
### Palette design example

Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.

Using an eyedropper tool, we identify a color we like and determine that the color in question is `#D79C7A`, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.

Having selected our base color, we need to build out our palette. We decide to use Paletteon to come up with the other colors we need. Upon opening Paletton, we see:

![Right after loading Paletton.](/ru/docs/Web/CSS/CSS_colors/Applying_color/paletton1.png)

Next, we enter our color's hex code (`D79C7A`) into the "Base RGB" box at the bottom-left corner of the tool:

![After entering base color](/ru/docs/Web/CSS/CSS_colors/Applying_color/paletton2.png)

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is `#508D7C`.

![Now with complementary colors included.](/ru/docs/Web/CSS/CSS_colors/Applying_color/paletton3.png)

If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

![Triad color scheme selected](/ru/docs/Web/CSS/CSS_colors/Applying_color/paletton4.png)

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's `#556E8D`. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

![Triad color scheme selected](/ru/docs/Web/CSS/CSS_colors/Applying_color/paletton-color-detail.png)

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

See also
--------

* Drawing graphics (en-US)
* Graphics on the web (en-US)
* MDN's color picker tool (en-US)


Использование медиавыражений - CSS: каскадные таблицы стилей

Использование медиавыражений
============================

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

Медиа для разных типов устройств
--------------------------------

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

```css
@media print { ... }
```

Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:

```css
@media screen, print { ... }
```

Список устройств вы можете найти перейдя по этой ссылке (en-US). Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.

Узконаправленные @media
-----------------------

Media features (en-US) описывают некие характеристики определённого user agent, устройства вывода или окружения. Например, вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещённости. В примере ниже стили будут применены только когда *основное* устройство ввода пользователя (например мышь) будет расположено над элементами:

```css
@media (hover: hover) { ... }
```

Многие медиавыражения представляют собой функцию диапазона и имеют префиксы "min-" или "max-". Минимальное значение и максимальное значение условия, соответственно. Например этот CSS-код применяется только если ширина viewport меньше или равна 12450px:

```css
@media (max-width: 12450px) { ... }
```

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

```css
@media (color) { ... }
```

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

```css
@media speech and (aspect-ratio: 11/5) { ... }
```

Дополнительные примеры медиавыражений, смотрите на справочной странице для каждой конкретной функции.

Создание комплексных медиавыражений
-----------------------------------

Иногда вы хотите создать медиавыражение, включающее в себя несколько условий. В таком случае применяются *логические операторы*: `not`, `and`, and `only`. Кроме того, вы можете объединить несколько медиавыражений в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.

В прошлом примере мы видели, как применяется оператор `and` для группировки *type* и функции. Оператор `and` также может комбинировать несколько функций в одно медиавыражение. Между тем, оператор not отрицает медиавыражение, полностью инвертируя его значение. Оператор *only* работает тогда, когда применяется всё выражение, не позволяя старым браузерам применять стили.

**Примечание:** In most cases, the `all` media type is used by default when no other type is specified. However, if you use the `not` or `only` operators, you must explicitly specify a media type.

### `and`

The `and` keyword combines a media feature with a media type *or* other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

```css
@media (min-width: 30em) and (orientation: landscape) { ... }
```

To limit the styles to devices with a screen, you can chain the media features to the `screen` media type:

```css
@media screen and (min-width: 30em) and (orientation: landscape) { ...  }
```

### comma-separated lists

You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680px *or* is a screen device in portrait mode:

```css
@media (min-height: 680px), screen and (orientation: portrait) { ... }
```

Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.

### `not`

The `not` keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The `not` keyword can't be used to negate an individual feature query, only an entire media query. The `not` is evaluated last in the following query:

```css
@media not all and (monochrome) { ... }
```

... so that the above query is evaluated like this:

```css
@media not (all and (monochrome)) { ... }
```

... rather than like this:

```css
@media (not all) and (monochrome) { ... }
```

As another example, the following media query:

```css
@media not screen and (color), print and (color) { ... }
```

... is evaluated like this:

```css
@media (not (screen and (color))), print and (color) { ... }
```

### `only`

The `only` keyword prevents older browsers that do not support media queries with media features from applying the given styles. *It has no effect on modern browsers.*

```html
<link
 rel="stylesheet"
 media="only screen and (color)"
 href="modern-styles.css" />
```

Смотрите также
--------------

* Media types (en-US)
* Media features (en-US)
* Testing media queries using code (en-US)
* CSS Animations Between Media Queries
* Extended Mozilla media features (en-US)
* Extended WebKit media features (en-US)


Тестирование медиавыражений программно - CSS: каскадные таблицы стилей

Тестирование медиавыражений программно
======================================

DOM предоставляет возможности, позволяющие тестировать результат медиавыражений программно, с помощью интерфейса `MediaQueryList` (en-US), его методов и свойств. Однажды, создав объект `MediaQueryList` (en-US) вы можете проверить результат выражения или получать уведомление, при изменении результата.

Создание списка медиавыражений
------------------------------

Прежде, чем вы сможете оценить результаты медиавыражений, вам необходимо создать объект `MediaQueryList` (en-US), отражающий выражение. Для этого используется метод `window.matchMedia`.

Например, настройка списка выражений, который определяет, находится ли устройство в альбомной или книжной ориентации:

```js
var mediaQueryList = window.matchMedia("(orientation: portrait)");
```

Проверка результата выражения
-----------------------------

После того, как вы создали свой список медиавыражений, вы можете проверить результат выражения, посмотрев на значение его свойства `matches`:

```js
if (mediaQueryList.matches) {
  /\* Окно просмотра в настоящее время находится в книжной ориентации \*/
} else {
  /\* Окно просмотра в настоящее время находится в альбомной ориентации \*/
}
```

Получение уведомлений о выражениях
----------------------------------

Если вам необходимо постоянно следить за изменениями в результате выражения, эффективнее зарегистрировать обработчик, чем вытаскивать результат выражений. Для этого вызовите метод `addListener()` объекта `MediaQueryList` (en-US) с функцией колбэка, которая вызывается при изменении статуса медиавыражения (например, тест медиавыражения переходит от `true` к `false`):

```js
var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Создание списка выражений.
function handleOrientationChange(mql) { ... } // Определение колбэк-функции для обработчика событий.
mediaQueryList.addListener(handleOrientationChange); // Добавление колбэк-функции в качестве обработчика к списку выражений.

handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз.
```

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

Функция `handleOrientationChange()` будет следить за результатом выражения и обрабатывать все, что нам нужно сделать при изменении ориентации:

```js
function handleOrientationChange(evt) {
  if (evt.matches) {
    /\* Окно просмотра в настоящее время находится в книжной ориентации \*/
  } else {
    /\* Окно просмотра в настоящее время находится в альбомной ориентации \*/
  }
}
```

Выше, мы определяем параметры как `evt` — event объект. Это имеет значение, поскольку новые реализации `MediaQueryList` (en-US) обрабатывают события стандартным способом. Они больше не используют нестандартный механизм `MediaQueryListListener` (en-US) , а используют стандартную настройку обработчика событий, передавая объект event `MediaQueryListEvent` (en-US) как аргумент колбэк-функции.

Этот event объект также включает свойства `media` (en-US) и `matches` (en-US), поэтому вы можете запросить эти свойства `MediaQueryList` путём прямого доступа к нему или доступа к event объекту.

Уведомление о завершении выражения
----------------------------------

Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод `removeListener()` для `MediaQueryList` (en-US), передав ему имя, ранее определённой функции:

```js
mediaQueryList.removeListener(handleOrientationChange);
```

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Media queries (en-US)
* `window.matchMedia()`
* `MediaQueryList` (en-US)
* `MediaQueryListEvent` (en-US)


scale3d() - CSS: каскадные таблицы стилей

scale3d()
=========

`scale3d()` CSS функция изменяет размер элемента. Благодаря величине масштабирования определённой вектором, может изменять различные размеры в разных масштабах.

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

Когда вне диапазона [-1, 1], масштабирование увеличивает элемент в направлении координаты; Когда внутри диапазона он сжимает элемент в этом направлении. При равном 1 он ничего не делает, а когда отрицательный, он выполняет точечное отражение и модификацию размера.

Синтаксис
---------
```

scale3d(sx, sy, sz)
```

Значения
--------

*sx*

Является `<number>` , представляющим абсцисс вектора масштабирования.

*sy*

Является `<number>` , представляющим ординату вектора масштабирования.

*sz*

Является `<number>`, представляющим z-компонент масштабирующего вектора.

| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
| --- | --- | --- | --- |
|
 Это преобразование применяется к пространству 3D и не может быть
 представлено на плоскости.
  |

sx
 0
0

0
 sy
0

0
0
sz

 |

sx
 0
0
0

0
 sy
0
0

0
0
sz
0

0
0
0
1

 |

Примеры
-------

### Without changing the origin

#### HTML

```html
<p>foo</p>
<p class="transformed">bar</p>
```

#### CSS

```css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
  background-color: blue;
}
```

#### Result

### Translating the origin of the transformation

#### HTML

```html
<p>foo</p>
<p class="transformed">bar</p>
```

#### CSS

```css
p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: scale3d(2, 3, 0);
  transform-origin: center;
  background-color: blue;
}
```

#### Result


skew() - CSS: каскадные таблицы стилей

skew()
======

CSS функция **`skew()`** трансформирует элемент, наклоняя его в 2D-пространстве.

Интерактивный пример
--------------------

Данная трансформация является линейным преобразованием векторного пространства (трансвекция или shear mapping), которое деформирует каждую точку элемента на определённый угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.

Синтаксис
---------

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

skew(ax)

skew(ax, ay)
```

### Значения

`ax`

Указывается значение `<angle>`, которое является углом наклона вдоль оси X.

`ay`

Указывается значение `<angle>`, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно `0`. В этом случае вертикального наклона не будет, а будет только горизонтальный.

| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
| --- | --- | --- | --- |
|

1
 tan(ax)

tan(ay)
 1

 |

1
 tan(ax)
0

tan(ay)
 1
0

0
0
1

 |

1
 tan(ax)
0

tan(ay)
 1
0

0
0
1

 |

1
 tan(ax)
0
0

tan(ay)
 1
0
0

0
0
1
0

0
0
0
1

 |
| `[1 tan(ay) tan(ax) 1 0 0]` |

Примеры
-------

### Используя только наклон по оси x

#### HTML

```html
<div>Обычный</div>
<div class="skewed">Наклонённый</div>
```

#### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg); /\* Equal to skewX(10deg) \*/
  background-color: pink;
}
```

#### Result

### Используя два угла

#### HTML

```html
<div>Обычный</div>
<div class="skewed">Наклонённый</div>
```

#### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}
```

#### Результат

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `transform`
* `<transform-function>` (en-US)


rotate() - CSS: каскадные таблицы стилей

rotate()
========

Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством `transform-origin` (en-US), не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется *точечным отражением*.

![](/ru/docs/Web/CSS/transform-function/rotate/rotate.png)

Синтаксис
---------
```

rotate(a)
```

Значения
--------

*a*

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

| Декартовы координаты на ℝ2 | Однородные координаты на ℝℙ2 | Декартовы координаты на ℝ3 | Однородные координаты на ℝℙ3 |
| --- | --- | --- | --- |
|

cos(a)
-sin(a)

sin(a)
cos(a)

 |

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 |

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 |

cos(a)
-sin(a)
0
0

sin(a)
cos(a)
0
0

0
0
1
0

0
0
0
1

 |
| `[cos(a) sin(a) -sin(a) cos(a) 0 0]` |

Примеры
-------

### Базовый пример

#### HTML

```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

#### CSS

```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /\* Equal to rotateZ(45deg) \*/
  background-color: pink;
}
```

#### Result

### Объединение вращения с другим преобразованием

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

#### HTML

```html
<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>
```

#### CSS

```css
div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}

.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}
```

#### Result

Спецификации
------------

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-rotate |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `transform`
* `<transform-function>` (en-US)
* `rotate3d()`


rotate3d() - CSS: каскадные таблицы стилей

rotate3d()
==========

Функция CSS **`rotate3d()`** трансформирует элемент без деформации, вращая его в трёхмерном пространстве вокруг зафиксированной оси. Её результатом является тип `<transform-function>` (en-US).Интерактивный пример
--------------------

In 3D space, rotations have three degrees of liberty, which together describe a single axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the `transform-origin` (en-US) property). If, as specified, the vector is not *normalized* (i.e., if the sum of the square of its three coordinates is not 1), the user agent will normalize it internally. A non-normalizable vector, such as the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invaliding the whole CSS property.

**Примечание:** Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.

Syntax
------

The amount of rotation created by `rotate3d()` is specified by three `<number>`s and one `<angle>`. The `<number>`s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The `<angle>` represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.
```

rotate3d(x, y, z, a)
```

### Values

`x`

Is a `<number>` describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1.

`y`

Is a `<number>` describing the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1.

`z`

Is a `<number>` describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1.

`a`

Is an `<angle>` representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

|  |  |
| --- | --- |
| Cartesian coordinates (en-US) on ℝ^2 |
 This transformation applies to the 3D space and can't be represented on
 the plane.
  |
| Homogeneous coordinates on ℝℙ^2 |
| Cartesian coordinates on ℝ^3 |

(

1
+
(
1
−
cos
(
a
)
)
(

x
2

−
1
)

z
⋅
sin
(
a
)
+
x
y
(
1
−
cos
(
a
)
)

−
y
⋅
sin
(
a
)
+
x
z
(
1
−
cos
(
a
)
)

−
z
⋅
sin
(
a
)
+
x
y
(
1
−
cos
(
a
)
)

1
+
(
1
−
cos
(
a
)
)
(

y
2

−
1
)

x
⋅
sin
(
a
)
+
y
z
(
1
−
cos
(
a
)
)

y
⋅
sin
(
a
)
+
x
z
(
1
−
cos
(
a
)
)

−
x
⋅
sin
(
a
)
+
y
z
(
1
−
cos
(
a
)
)

1
+
(
1
−
cos
(
a
)
)
(

z
2

−
1
)

)

\begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a))\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a))\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1)\end{pmatrix}

 |
| Homogeneous coordinates on ℝℙ^3 |

(

1
+
(
1
−
cos
(
a
)
)
(

x
2

−
1
)

z
⋅
sin
(
a
)
+
x
y
(
1
−
cos
(
a
)
)

−
y
⋅
sin
(
a
)
+
x
z
(
1
−
cos
(
a
)
)

0

−
z
⋅
sin
(
a
)
+
x
y
(
1
−
cos
(
a
)
)

1
+
(
1
−
cos
(
a
)
)
(

y
2

−
1
)

x
⋅
sin
(
a
)
+
y
z
(
1
−
cos
(
a
)
)

0

y
⋅
sin
(
a
)
+
x
z
(
1
−
cos
(
a
)
)

−
x
⋅
sin
(
a
)
+
y
z
(
1
−
cos
(
a
)
)

1
+
(
1
−
cos
(
a
)
)
(

z
2

−
1
)

0

0

0

0

1

)

\begin{pmatrix}1 + (1 - \cos(a))(x^2 - 1) & z\cdot \sin(a) + xy(1 - \cos(a)) & -y\cdot \sin(a) + xz(1 - \cos(a)) & 0\\-z\cdot \sin(a) + xy(1 - \cos(a)) & 1 + (1 - \cos(a))(y^2 - 1) & x\cdot \sin(a) + yz(1 - \cos(a)) & 0\\y\cdot \sin(a) + xz(1 - \cos(a)) & -x\cdot \sin(a) + yz(1 - \cos(a)) & 1 + (1 - \cos(a))(z^2 - 1) & 0\\0 & 0 & 0 & 1\end{pmatrix}

 |

Examples
--------

### Rotating on the y-axis

#### HTML

```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

#### CSS

```css
body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(0, 1, 0, 60deg);
  background-color: pink;
}
```

#### Result

### Rotating on a custom axis

#### HTML

```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

#### CSS

```css
body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(1, 2, -1, 192deg);
  background-color: pink;
}
```

#### Result

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `transform`
* `<transform-function>` (en-US)


CSS счётчики - CSS: каскадные таблицы стилей

CSS счётчики
============

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

Значение счётчика сбрасывается (инициализируется) при помощи `counter-reset` (en-US).

`counter-increment` (en-US) может быть отображён на странице, используя функцию `counter()` или counters() в свойстве `content`.

Использование счётчиков
-----------------------

Для того, чтобы использовать CSS счётчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счётчика - используйте функцию `counter()`. Следующий пример прибавляет в начале каждого h3 элемента "Section <*значение счётчика*>:".

```css
body {
  counter-reset: section; /\* Устанавливает значение
 счётчика, равным 0 \*/
}

h3::before {
  counter-increment: section; /\* Инкрементирует счётчик\*/
  content: "Секция " counter(section) ": "; /\* Отображает текущее значение счётчика \*/
}
```

Пример:

```html
<h3>Вступление</h3>
<h3>Основная часть</h3>
<h3>Заключение</h3>
```

Вложенные счётчики
------------------

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

```css
ol {
  counter-reset: section; /\* Создаёт новый счётчик для каждого тега <ol> \*/
  list-style-type: none;
}

li::before {
  counter-increment: section; /\* Инкрементируется только счётчик текущего уровня вложенности \*/
  content: counters(section, ".") " "; /\* Добавляем значения всех уровней вложенности, используя разделитель '.' \*/
  /\* Если необходима поддержка < IE8, необходимо убедиться, что после разделителя ('.') не стоит пробел \*/
}
```

Объединим с данным HTML:

```html
<ol>
  <li>item</li>          <!-- 1 -->
  <li>item               <!-- 2 -->
    <ol>
      <li>item</li>      <!-- 2.1 -->
      <li>item</li>      <!-- 2.2 -->
      <li>item           <!-- 2.3 -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4 -->
    </ol>
  </li>
  <li>item</li>          <!-- 3 -->
  <li>item</li>          <!-- 4 -->
</ol>
<ol>
  <li>item</li>          <!-- 1 -->
  <li>item</li>          <!-- 2 -->
</ol>
```

Результат:

Спецификации
------------

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # auto-numbering |

Смотрите также
--------------

* `counter-reset` (en-US)
* `counter-increment` (en-US)


Введение в контексты форматирования - CSS: каскадные таблицы стилей

Введение в контексты форматирования
===================================

В этой статье представлена концепция контекстов форматирования (formatting context). Существует несколько типов контекстов форматирования, например, блочный контекст форматирования (block formatting context, BFC), строчный контекст форматирования (inline formatting context), флексовый контекст форматирования (flex formatting context). В статье даны основы того, как они себя ведут, и как вы можете использовать это поведение.

Всё на странице является частью **контекста форматирования** (formatting context), который представляет собой область, в которой происходит раскладка контента по определённым правилам. **Блочный контекст форматирования** (block formatting context, BFC) делает раскладку своих дочерних элементов в соответствии с правилами блочной раскладки, **флексовый контекст форматирования** (flex formatting context) раскладывает свои дочерние элементы как флекс-элементы и т.д. Каждый контекст форматирования использует свои правила раскладки.

Блочные контексты форматирования
--------------------------------

Самый внешний элемент в документе, который использует правила блочной раскладки, устанавливает первый или **начальный блочный контекст форматирования** (initial block formatting context). Это означает, что все элементы внутри элемента `<html>` раскладываются в соответствии с нормальным потоком, следуя правилам блочной и строчной раскладки. Элементы, участвующие в БКФ, используют правила, описанные в модели бокса (CSS Box Model), которая определяет, как поля (margins), границы (borders) и отступы (paddings) элемента взаимодействуют с другими блоками в том же контексте.

### Создание нового блочного контекста форматирования

Элемент `<html>` не единственный, кто может создавать блочный контекст форматирования. Любой элемент, который по умолчанию представляет собой блок, также создаёт блочный контекст форматирования для своих потомков. Кроме того, существуют свойства CSS, которые могут заставить элемент создавать БКФ, даже если он не делает этого по умолчанию. Это может быть полезным поскольку новый БКФ будет вести себя во многом как внешний документа, в том смысле, что он создаёт новую мини-раскладку в основной раскладке. БКФ содержит все внутри себя, `float` and `clear` применяются только к элементам, которые находится в том же контексте форматирования, также как и поля (margings) схлопываются только между элементами одного и того же контекста форматирования.

Кроме корневого элемента (`<html>`) новый БКФ создаётся в следующих случаях:

* плавающие элементы (`float: left` или `float: right`);
* абсолютно позиционированные элементы (`position: absolute`, `position: fixed` или `position: sticky`);
* элементы с `display: inline-block`;
* ячейки табицы или элементы с `display: table-cell`, включая анонимные ячейки таблицы, которые создаются, когда используются свойства `display: table-*`;
* заголовки таблицы или элементы с `display: table-caption`;
* блочные элементы, когда значение свойства overflow отлично от `visible`;
* элементы с `display: flow-root` или `display: flow-root list-item`;
* элементы с `contain: layout` (en-US), `content`, или `strict`
* флекс-элементы;
* грид-элементы;
* контейнеры мультиколонок (en-US);
* элементы с `column-span` (en-US) в значении `all`.

Let's have a look at a couple of these in order to see the effect creating a new BFC.

In the example below, we have a floated element inside a `<div>` with a border applied. The content of that `div` has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the div now runs through the float. As explained in the guide to in-flow and out of flow elements (en-US), the float has been taken out of flow so the background and border of the div only contain the content and not the float.

Creating a new BFC would contain the float. A typical way to do this in the past has been to set `overflow: auto` or set other values than the initial value of `overflow: visible`.

Setting `overflow: auto` created a new BFC containing the float. Our `div` now becomes a mini-layout inside our layout. Any child element will be contained inside it.

The problem with using `overflow` to create a new BFC is that the `overflow` property is meant for telling the browser how you wish to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not very readable for a future developer, as it may not be obvious why you used overflow for this purpose. If you do this, it would be a good idea to comment the code to explain.

### Explicitly creating a BFC using display: flow-root

Using `display: flow-root` (or `display: flow-root list-item)` on the containing block will create a new BFC without any other potentially problematic side-effects.

With `display: flow-root` on the `<div>`, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.

The name of the `flow-root` keyword refers to the fact that you're creating something that serves, in essence, like a new root element (like `<html>` does), given how the new context is created and its flow layout functions.

Inline formatting contexts
--------------------------

Inline formatting contexts exist inside other formatting contexts and can be thought of as the context of a paragraph. The paragraph creates an inline formatting context inside which such things as `<strong>`, `<a>`, or `<span>` elements are used on text.

The box model does not fully apply to items participating in an inline formatting context. In a horizontal writing mode line, horizontal padding, borders and margin will be applied to the element and push the text away left and right. However, margins above and below the element will not be applied. Vertical padding and borders will be applied but may overlap content above and below as, in the inline formatting context, the line boxes will not be pushed apart by padding and borders.

Other formatting contexts
-------------------------

This guide covers flow layout and is therefore not referring to other possible formatting contexts. As such, it is useful to understand that creating any kind of formatting context will change the way elements inside that formatting context behave. This behavior is always described in the specification and also here on MDN.

Summary
-------

In this guide, we have looked in more detail at the block and Inline formatting contexts and the important subject of creating a block formatting context (BFC). In the next guide, we will find out how normal flow interacts with different writing modes (en-US).

See also
--------

* Block formatting context
* Visual Formatting Model
* CSS Box Model (en-US)


Схлопывание внешних отступов - CSS: каскадные таблицы стилей

Схлопывание внешних отступов
============================

 Отступы margin-top и margin-bottom иногда объединяются в один, с размером равным наибольшему из них (или размеру одного, если они равны).
 Это поведение известно как **схлопывание внешних отступов (margin collapsing).**
 Обратите внимание, что отступы плавающих и абсолютно позиционированных элементов никогда не схлопываются.

Схлопывание внешних отступов происходит в трёх случаях:

Соседние элементы (siblings)

Схлопываются отступы соседних элементов (за исключением случая, когда к последнему элементу применено свойство `clear`).

Родительский и первый/последний дочерние элементы

Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block) или промежуток для отделения `margin-top` родительского элемента, от `margin-top` одного или нескольких его дочерних элементов/блоков или отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), `height`, `min-height` или `max-height` для отделения отступов `margin-bottom` родительского блока от `margin-bottom` отступов одного или нескольких его дочерних элементов/блоков, то внешние отступы схлопываются. Схлопнутые отступы заканчиваются за пределами родительского элемента.

Пустые блоки

Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), `height` или `min-height` для отделения `margin-top` верхнего отступа этого блока от его `margin-bottom` нижнего отступа, то верхние и нижние внешние отступы этого блока схлопываются.

**На заметку:**

* Более сложное схлопывание отступов (более, чем двух) происходит, когда описанные случаи сочетаются.
* Эти правила применяются даже к отступам, равным 0, поэтому отступ первого/последнего дочернего элемента заканчивается за пределами его родителя (согласно правилу выше) независимо от того, равен ли отступ родителя нулю.
* При использовании отрицательных отступов, размер схлопнутого отступа вычисляется, как сумма наибольшего положительного и наименьшего отрицательного (наибольшего по модулю) отступа.
* Если все отступы отрицательные, размер схлопнутого отступа равен наименьшему (наибольшему по модулю) отступу. Это относится как к вложенным элементам, так и к соседним.
* Внешние отступы плавающих и абсолютно позиционируемых элементов никогда не схлопываются.
Примеры
-------

### HTML

```html
<p>Нижний отступ этого абзаца схлопнулся …</p>
<p>
  … с верхним отступом этого абзаца, объеденив отступы между ними в один, равный
  <code>1.2rem</code>.
</p>

<div>
  Этот родительский элемент содержит два абзаца!
  <p>Этот абзац имеет отступ <code>.4rem</code> между ним и текстом выше.</p>
  <p>
    Нижний отступ этого абзаца схлопывается с отступом родителя, принимая
    значение <code>2rem</code>.
  </p>
</div>

<p>Этот абзац имеет отступ <code>2rem</code> от элемента выше.</p>
```

### CSS

```css
div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}
```

### Результат

Смотрите также
--------------

* CSS Reference (en-US)


Блоковая модель (боксовая модель, box model) - CSS: каскадные таблицы стилей

Блоковая модель (боксовая модель, box model)
============================================

Описание
--------

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

В языке CSS есть специальная боксовая модель (также блоковая модель или блочная модель, англ. box model), которая описывает, из чего состоит бокс и какие свойства влияют на его размеры. В ней у каждого бокса есть 4 области: **margin** (внешние отступы), **border** (рамка), **padding** (внутренние поля), и **content** (контент или содержимое).

![CSS Box model](/ru/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model/boxmodel-(3).png)

**Внутренняя область** элемента (**content area**) содержит текст и другие элементы, расположенные внутри (*контент* или *содержимое*). У неё часто бывает фон, цвет или изображение (в таком порядке: фоновый цвет скрывается под непрозрачным изображением), и она находится внутри *content edge*; её размеры называются *ширина контента* (*content width* или *content-box width)*, и *высота контента* (*content height* или content-box height). Иногда ещё говорят «внутренняя ширина/высота элемента»

По умолчанию, если CSS-свойство `box-sizing` не задано, размер внутренней области с содержимым задаётся свойствами `width`, `min-width`, `max-width`, `height`, `min-height` и `max-height`. Если же свойство `box-sizing` задано, то оно определяет, для какой области указаны размеры.

Поля элемента (**padding area)** — это пустая область, окружающая контент. Она может быть залита каким-то цветом, покрыта фоновый картинкой, а её границы называются края полей (*padding edge)*.

Размеры полей задаются по отдельности с разных сторон свойствами `padding-top` (en-US), `padding-right`, `padding-bottom` (en-US), `padding-left` или общим свойством `padding`.

Область рамки (**border area)** окружает поля элемента, а её граница называется края рамки (*border edge).* Ширина рамки задаётся отдельным свойством `border-width` или в составе свойства `border`. Размеры элемента с учётом полей и рамки иногда называют внешней шириной/высотой элемента.

Отступы (**margin area)** добавляют пустое пространство вокруг элемента и определяют расстояние до соседних элементов.

Величина отступов задаётся по отдельности в разных направлениях свойствами `margin-top`, `margin-right`, `margin-bottom`, `margin-left` или общим свойством `margin`.

Отступы двух соседних элементов, расположенных друг над другом или вложенных друг в друга, могут накладываться. Это называется схлопывание границ (margin collapsing (en-US)). Схлопываются только вертикальные отступы.

Для элементов с `display``: inline` (или `inline-block, inline-table`) на занимаемое по высоте место также влияет значение свойства `line-height`.

Смотрите также
--------------

* Справочник по CSS
* Ключевые концепции CSS
    + Синтаксис CSS
    + @-правила
    + комментарии
    + специфичность
    + наследование
    + блочная модель
    + режимы компоновки
    + модели визуального форматирования
    + Схлопывание отступов
    + Значения
        - начальные
        - вычисленные
        - используемые
        - действительные
    + Синтаксис определения значений (en-US)
    + Сокращённые свойства
    + Замещаемые элементы
* Связанные свойства: `box-sizing`, `background-clip`, `height`, `max-height`, `min-height`, `width`, `max-height`, `min-height`, `padding`, `padding-top` (en-US), `padding-right`, `padding-bottom` (en-US), `padding-left`, `border`, `border-top` (en-US), `border-right` (en-US), `border-bottom`, `border-left` (en-US), `border-width`, `border-top-width` (en-US), `border-right-width` (en-US), `border-bottom-width` (en-US), `border-left-width` (en-US), `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`


Breadcrumb Navigation - CSS: каскадные таблицы стилей

Breadcrumb Navigation
=====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
Навигация по хлебным крошкам помогает пользователю понять своё местоположение на веб-сайте, обеспечивая обратный путь к начальной странице.

![Links displayed inline with separators](/ru/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation/breadcrumb-navigation.png)

Требование
----------

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

Пример
------

**Примечание:** Загрузить этот пример

**Примечание:** В приведённом выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор: .breadcrumb li:not(:first-child)::before {
 content: "→";
 }Это решение использует более сложный селектор, но требует меньше правил. Смело выбирайте то решение, которое вам больше по душе.

Сделанный выбор
---------------

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

Проблемы доступности
--------------------

 Я использовал атрибуты `aria-label` и `aria-current`, чтобы помочь пользователям понять, что это за навигация и где в структуре находится текущая страница.
 Смотреть связанные ссылки для получения дополнительной информации.

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

#### Flexbox

Смотреть также
--------------

* CSS Flexible Box Layout
* Создание следа из хлебных крошек
* Использование атрибута aria-current


Раздельная навигация - CSS: каскадные таблицы стилей

Раздельная навигация
====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
Навигационный паттерн, в котором один или более элементов отделены от остальных элементов навигации.

![Items separated into two groups.](/ru/docs/Web/CSS/Layout_cookbook/Split_Navigation/split-navigation.png)

Требования
----------

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

Рецепт
------

**Примечание:** Download this example

Choices made
------------

Этот паттерн объединяет margin со значением auto и Flexbox для разделения элементов.

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

В этом случаи левый auto margin занимает любое доступное пространство и толкает элемент к правому краю. Вы могли применить класс push к любому элементу в списке.

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

#### Flexbox

Смотрите также
--------------

* CSS Flexible Box Layout


Sticky footers - CSS: каскадные таблицы стилей

Sticky footers
==============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
Шаблон нижнего колонтитула - это шаблон, в котором нижний колонтитул вашей страницы «прилипает» к нижней части области просмотра в тех случаях, когда содержимое короче высоты области просмотра. Рассмотрим два способа, как этого достичь.

![A sticky footer pushed to the bottom of a box](/ru/docs/Web/CSS/Layout_cookbook/Sticky_footers/cookbook-footer.png)

Requirements
------------

Липкий шаблон нижнего колонтитула должен соответствовать следующим требованиям:

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

**Примечание:** Download this example

**Примечание:** In this example and the following one we are using a wrapper set to `min-height: 100%` in order that our live example works. You could also achieve this for a full page by setting a `min-height` of `100vh` on the `<body>` and then using it as your grid container.

Выбор сделан
------------

В приведённом выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс `.wrapper` имеет минимальную высоту `100%`, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаём сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.

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

Alternate method
----------------

If you need compatibility with browsers that do not support Grid Layout you can also use Flexbox to create a sticky footer.

The flexbox example starts out in the same way, but we use `display:flex` rather than `display:grid` on the `.wrapper`; we also set `flex-direction` to `column`. Then we set our main content to `flex-grow: 1` and the other two elements to `flex-shrink: 0` — this prevents them from shrinking smaller when content fills the main area.

Resources on MDN
----------------

* Basic concepts of Grid Layout


Использование CSS разметки для многих колонок - CSS: каскадные таблицы стилей

Использование CSS разметки для многих колонок
=============================================

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

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

Использование колонок
---------------------

### Количество колонок и ширина

Два свойства CSS контролируют появятся ли колонки и как много их будет: `column-count` and `column-width` (en-US).

`Свойство column-count` устанавливает количество колонок определённым числом. Пример,

```html
<div style="column-count:2;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
```

отобразит содержимое в двух колонках (если вы используете многоколоночно совместимый браузер):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

`Свойство column-width` устанавливает минимальную желаемую ширину колонки. Если `column-count` также не установлено, тогда браузер автоматически сделает столько колонок, сколько нужно, чтобы заполнить доступную ширину.

```html
<div style="column-width:20em;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
```

становится:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Подробные детали описаны в CSS3 спецификации.

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

### `К`краткая запись columns

В большинстве случаев веб-разработчики используют одно из двух свойств CSS: `column-count` или `column-width` (en-US). Так как значения для этих свойств не пересекаются, то часто удобно использовать короткую запись `columns` (en-US). Пример:

CSS объявление `column-width:12em` может быть заменено:

```html
<div style="columns:12em">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
```

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

CSS объявление `column-count:4` может быть заменено:

```html
<div style="columns:4">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
```

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Два CSS объявления `column-width:8em` и `column-count:12` могут быть заменены:

```html
<div style="columns:12 8em">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
```

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

### Выравнивание высоты

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

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

### Промежутки между колонками

Существует промежуток между колонками. По умолчанию рекомендовано значение `1em`. Это значение можно изменить, применяя свойство `column-gap` на многоколончатом блоке:

```html
<div style="column-width:20em; column-gap:2em;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
```

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Постепенное ухудшение
---------------------

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

Обратите внимание, что не все браузеры поддерживают эти свойства без префикса. Чтобы использовать эти свойства в большинстве современных браузеров, каждое свойство должно быть написано трижды: одно с префиксом `-moz` , одно с префиксом `-webkit` и третье без префикса.

Заключение
----------

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

Смотрите также
--------------

* http://weblogs.mozillazine.org/roc/a...18\_for\_we.html