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

filter
======

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

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

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

В стандарт CSS включены несколько функций, которые обеспечивают предопределённые эффекты. Вы также можете ссылаться на SVG фильтр с URL-адресом на элемент фильтра SVG (en-US).

**Примечание:** Старые версии (с 4.0 до 9.0) браузера Windows Internet Explorer поддерживают нестандартный "filter", который с тех пор устарел.

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | все элементы; в SVG, это применяется к контейнерам, исключая элемент `defs` и все графические элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | a filter function list |

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

```css
filter: url(resources.svg);
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/\* Применение нескольких фильтров \*/
filter: contrast(175%) brightness(3%);

/\* Глобальные значения \*/
filter: inherit;
filter: initial;
filter: unset;
```

С помощью функции, используйте:
```

filter: <filter-function> [<filter-function>]* | none
```

Для ссылки на SVG `<filter>` (en-US) элемент, используйте:
```

filter: url(svg-url#element-id)
```

### Формальный синтаксис
```

filter =
  none                 | (en-US)
  <filter-value-list>

<filter-value-list> =
  [ (en-US) <filter-function> | (en-US) <url> ] (en-US)+ (en-US)

<filter-function> =
  <blur()>         | (en-US)
  <brightness()>   | (en-US)
  <contrast()>     | (en-US)
  <drop-shadow()>  | (en-US)
  <grayscale()>    | (en-US)
  <hue-rotate()>   | (en-US)
  <invert()>       | (en-US)
  <opacity()>      | (en-US)
  <sepia()>        | (en-US)
  <saturate()>

<url> =
  <url()>  | (en-US)
  <src()>

<blur()> =
  blur( <length>? (en-US) )

<brightness()> =
  brightness( [ (en-US) <number> | (en-US) <percentage> ] (en-US)? (en-US) )

<contrast()> =
  contrast( [ (en-US) <number> | (en-US) <percentage> ] (en-US)? (en-US) )

<drop-shadow()> =
  drop-shadow( [ (en-US) <color>? (en-US) && (en-US) <length>{2,3} (en-US) ] (en-US) )

<grayscale()> =
  grayscale( [ (en-US) <number> | (en-US) <percentage> ] (en-US)? (en-US) )

<hue-rotate()> =
  hue-rotate( [ (en-US) <angle> | (en-US) <zero> ] (en-US)? (en-US) )

<invert()> =
  invert( [ (en-US) <number> | (en-US) <percentage> ] (en-US)? (en-US) )

<opacity()> =
  opacity( [ (en-US) <number> | (en-US) <percentage> ] (en-US)? (en-US) )

<sepia()> =
  sepia( [ (en-US) <number> | (en-US) <percentage> ] (en-US)? (en-US) )

<saturate()> =
  saturate( [ (en-US) <number> | (en-US) <percentage> ] (en-US)? (en-US) )

<url()> =
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)
  <url-token>

<src()> =
  src( <string> (en-US) <url-modifier>\* (en-US) )

```

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

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

```css
.mydiv {
  filter: grayscale(50%);
}

/\* сделать все изображения серыми на 50% и размыть на 10px \*/
img {
  filter: grayscale(0.5) blur(10px);
}
```

Примеры использования функции URL с SVG ресурсом показаны ниже.

```css
.target {
  filter: url(#c1);
}

.mydiv {
  filter: url(commonfilters.xml#large-blur);
}
```

Функции
-------

Для использования CSS-свойства `filter`, вы указываете значение для одной из выбранных функций. Если это значение недействительно, функция возвращает "none." За исключением тех случаев, когда функции, которые принимают значение, выраженное в процентах (34%), также принимают значение, выраженное как десятичная дробь (0.34).

### `url()`

The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.

```css
filter: url(resources.svg#c1);
```

### `blur() [размытие]`

Applies a Gaussian blur to the input image. The value of 'radius' defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value `0` is used. The parameter is specified as a CSS length, but does not accept percentage values.

```css
filter: blur(5px);
```

```
  <table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form.jpg" id="img1" class="internal default" src="/files/3710/Test\_Form\_2.jpg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form.jpg" id="img2" class="internal default" src="/files/3710/Test\_Form\_2.jpg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg id="img3" viewbox="0 0 233 176">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" >
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
  <image xlink:href="/files/3710/Test\_Form\_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" />
</svg><div></td>
      <td><img alt="Test\_Form\_s.jpg" id="img4" class="internal default" src="/files/3711/Test\_Form\_2\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: blur(5px);
  -webkit-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  height: 100%;
  width: 85%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

```html
<svg
 style="position: absolute; top: -99999px"
 xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
</svg>
```

### `brightness() [яркость]`

Applies a linear multiplier to input image, making it appear more or less bright. A value of `0%` will create an image that is completely black. A value of `100%` leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over `100%` are allowed, providing brighter results. If the 'amount' parameter is missing, a value of `1` is used.

```css
filter: brightness(0.5);
```

```html
<svg
 style="position: absolute; top: -99999px"
 xmlns="http://www.w3.org/2000/svg">
  <filter id="brightness">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]" />
      <feFuncG type="linear" slope="[amount]" />
      <feFuncB type="linear" slope="[amount]" />
    </feComponentTransfer>
  </filter>
</svg>
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form.jpg" id="img1" class="internal default" src="/files/3708/Test\_Form.jpg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form.jpg" id="img2" class="internal default" src="/files/3708/Test\_Form.jpg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="2"/>
        <feFuncG type="linear" slope="2"/>
        <feFuncB type="linear" slope="2"/>
    </feComponentTransfer>
  </filter>
  <image xlink:href="/files/3708/Test\_Form.jpg" filter="url(#brightness)" width="286px" height="217px" />
</svg><div></td>
      <td><img alt="Test\_Form\_s.jpg" id="img4" class="internal default" src="/files/3709/Test\_Form\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: brightness(2);
  -webkit-filter: brightness(2);
  -o-filter: brightness(2);
  -ms-filter: brightness(2);
  filter: brightness(2);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  height: 100%;
  width: 85%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

### `contrast() [контраст]`

Adjusts the contrast of the input. A value of `0%` will create an image that is completely black. A value of `100%` leaves the input unchanged. Values of amount over `100%` are allowed, providing results with less contrast. If the 'amount' parameter is missing, a value of `1` is used.

```css
filter: contrast(200%);
```

```html
<svg
 style="position: absolute; top: -99999px"
 xmlns="http://www.w3.org/2000/svg">
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR
 type="linear"
 slope="[amount]"
 intercept="-(0.5 \* [amount]) + 0.5" />
      <feFuncG
 type="linear"
 slope="[amount]"
 intercept="-(0.5 \* [amount]) + 0.5" />
      <feFuncB
 type="linear"
 slope="[amount]"
 intercept="-(0.5 \* [amount]) + 0.5" />
    </feComponentTransfer>
  </filter>
</svg>
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_3.jpeg" id="img1" class="internal default" src="/files/3712/Test\_Form\_3.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_3.jpg" id="img2" class="internal default" src="/files/3712/Test\_Form\_3.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151">
 <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0.5"/>
      <feFuncB type="linear" slope="2" intercept="-0.5"/>
    </feComponentTransfer>
  </filter>
  <image xlink:href="/files/3712/Test\_Form\_3.jpeg" filter="url(#contrast)" width="240px" height="151px" />
</svg><div></td>
      <td><img alt="Test\_Form\_s.jpg" id="img4" class="internal default" src="/files/3713/Test\_Form\_3\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: contrast(200%);
  -webkit-filter: contrast(200%);
  -o-filter: contrast(200%);
  -ms-filter: contrast(200%);
  filter: contrast(200%);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

### `drop-shadow() [тень]`

Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type <shadow> (defined in CSS3 Backgrounds), with the exception that the 'inset' keyword is not allowed. This function is similar to the more established `box-shadow` property; the difference is that with filters, some browsers provide hardware acceleration for better performance. The parameters of the `<shadow>` parameter are as follows.

`<offset-x>` `<offset-y>` (required)

 These are two `<length>` values to set the shadow offset. `<offset-x>` specifies the horizontal distance. Negative values place the shadow to the left of the element. `<offset-y>` specifies the vertical distance. Negative values place the shadow above the element. See `<length>` for possible units.
 If both values are `0`, the shadow is placed behind the element (and may generate a blur effect if `<blur-radius>` and/or `<spread-radius>` is set).

`<blur-radius>` (optional)

This is a third `<length>` value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be `0` (the shadow's edge is sharp).

`<spread-radius>` (optional)

 This is a fourth `<length>` value. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be `0` (the shadow will be the same size as the element).
 Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.

`<color>` (optional)

See `<color>` values for possible keywords and notations. If not specified, the color depends on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the value of the `color` (en-US) property is used. On the other hand, WebKit's shadow is transparent and therefore useless if `<color>` is omitted.

```css
filter: drop-shadow(16px 16px 10px black);
```

```html
<svg
 style="position: absolute; top: -999999px"
 xmlns="http://www.w3.org/2000/svg">
  <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]" />
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur" />
    <feFlood flood-color="[color]" />
    <feComposite in2="offsetblur" operator="in" />
    <feMerge>
      <feMergeNode />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</svg>
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_4.jpeg" id="img1" class="internal default" src="/files/3714/Test\_Form\_4.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_4.jpg" id="img2" class="internal default" src="/files/3714/Test\_Form\_4.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187">
 <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
    <feOffset dx="16" dy="16"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
 </filter>
 <image xlink:href="/files/3714/Test\_Form\_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" />
</svg><div></td>
      <td><img alt="Test\_Form\_4\_s.jpg" id="img4" class="internal default" src="/files/3715/Test\_Form\_4\_s.jpg" style="width: 100%;" /></td>
    </tr>
    <tr>
      <td><img alt="Test\_Form\_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test\_Form\_4\_irregular-shape\_opacity-gradient.png" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test\_Form\_4\_irregular-shape\_opacity-gradient.png" style="width: 100%;" /></td>
      <td>
        <div class="svg-container">
          <svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187">
            <filter id="drop-shadow2">
              <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
              <feOffset dx="8" dy="10"/>
              <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
            <image xlink:href="/files/8467/Test\_Form\_4\_irregular-shape\_opacity-gradient.png" filter="url(#drop-shadow2)" width="213px" height="161px" />
          </svg>
        <div>
      </td>
      <td><img alt="Test\_Form\_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test\_Form\_4\_irregular-shape\_opacity-gradient\_drop-shadow.png" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: drop-shadow(16px 16px 10px black);
  -webkit-filter: drop-shadow(16px 16px 10px black);
  -o-filter: drop-shadow(16px 16px 10px black);
  -ms-filter: drop-shadow(16px 16px 10px black);
  filter: drop-shadow(16px 16px 10px black);
}
#img12 {
  width: 100%;
  height: auto;
  -moz-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
  -webkit-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
  -o-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
  -ms-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
  filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8));
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
#irregular-shape {
  width: 64%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3,
#img13 {
  height: 100%;
}
```

### `grayscale() [оттенки серого]`

Converts the input image to grayscale. The value of 'amount' defines the proportion of the conversion. A value of `100%` is completely grayscale. A value of `0%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. If the 'amount' parameter is missing, a value of `0` is used.

```css
filter: grayscale(100%);
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_5.jpeg" id="img1" class="internal default" src="/files/3716/Test\_Form\_5.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_5.jpg" id="img2" class="internal default" src="/files/3716/Test\_Form\_5.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184">
 <filter id="grayscale">
    <feColorMatrix type="matrix"
 values="0.2126 0.7152 0.0722 0 0
 0.2126 0.7152 0.0722 0 0
 0.2126 0.7152 0.0722 0 0
 0 0 0 1 0"/>
  </filter>
  <image xlink:href="/files/3716/Test\_Form\_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" />
</svg><div></td>
      <td><img alt="Test\_Form\_5\_s.jpg" id="img4" class="internal default" src="/files/3717/Test\_Form\_5\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

### `hue-rotate() [изменение оттенка]`

Applies a hue rotation on the input image. The value of `angle` defines the number of degrees around the color circle the input samples will be adjusted. A value of `0deg` leaves the input unchanged. If the `angle` parameter is missing, a value of `0deg` is used. Though there is no maximum value, the effect of values above `360deg` wraps around.

```css
filter: hue-rotate(90deg);
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_6.jpeg" id="img1" class="internal default" src="/files/3718/Test\_Form\_6.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_6.jpg" id="img2" class="internal default" src="/files/3718/Test\_Form\_6.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190">
 <filter id="hue-rotate">
    <feColorMatrix type="hueRotate"
 values="90"/>
  </filter>
  <image xlink:href="/files/3718/Test\_Form\_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" />
</svg><div></td>
      <td><img alt="Test\_Form\_6\_s.jpg" id="img4" class="internal default" src="/files/3719/Test\_Form\_6\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: hue-rotate(90deg);
  -webkit-filter: hue-rotate(90deg);
  -o-filter: hue-rotate(90deg);
  -ms-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

```html
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgHueRotate" >
    <feColorMatrix type="hueRotate" values="[angle]" />
  <filter />
</svg>
```

### `invert() [инвертирование]`

Inverts the samples in the input image. The value of `amount` defines the proportion of the conversion. A value of `100%` is completely inverted. A value of `0%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. If the `amount` parameter is missing, a value of `0` is used.

```css
filter: invert(100%);
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_7.jpeg" id="img1" class="internal default" src="/files/3720/Test\_Form\_7.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_7.jpg" id="img2" class="internal default" src="/files/3720/Test\_Form\_7.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276">
 <filter id="invert">
    <feComponentTransfer>
        <feFuncR type="table" tableValues="1 0"/>
        <feFuncG type="table" tableValues="1 0"/>
        <feFuncB type="table" tableValues="1 0"/>
    </feComponentTransfer>
 </filter>
 <image xlink:href="/files/3720/Test\_Form\_7.jpeg" filter="url(#invert)" width="183px" height="276px" />
</svg><div></td>
      <td><img alt="Test\_Form\_7\_s.jpg" id="img4" class="internal default" src="/files/3721/Test\_Form\_7\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: invert(100%);
  -webkit-filter: invert(100%);
  -o-filter: invert(100%);
  -ms-filter: invert(100%);
  filter: invert(100%);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

### `opacity() [непрозрачность]`

Applies transparency to the samples in the input image. The value of `amount` defines the proportion of the conversion. A value of `0%` is completely transparent. A value of `100%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the `amount` parameter is missing, a value of `1` is used. This function is similar to the more established `opacity` property; the difference is that with filters, some browsers provide hardware acceleration for better performance.

```css
filter: opacity(50%);
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_14.jpeg" id="img1" class="internal default" src="/files/3725/Test\_Form\_14.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_14.jpg" id="img2" class="internal default" src="/files/3725/Test\_Form\_14.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183">
 <filter id="opacity">
    <feComponentTransfer>
        <feFuncA type="table" tableValues="0 0.5">
    </feComponentTransfer>
 </filter>
 <image xlink:href="/files/3725/Test\_Form\_14.jpeg" filter="url(#opacity)" width="276px" height="183px" />
</svg><div></td>
      <td><img alt="Test\_Form\_14\_s.jpg" id="img4" class="internal default" src="/files/3726/Test\_Form\_14\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: opacity(50%);
  -webkit-filter: opacity(50%);
  -o-filter: opacity(50%);
  -ms-filter: opacity(50%);
  filter: opacity(50%);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

### `saturate() [насыщенность]`

Saturates the input image. The value of `amount` defines the proportion of the conversion. A value of `0%` is completely un-saturated. A value of `100%` leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over `100%` are allowed, providing super-saturated results. If the `amount` parameter is missing, a value of `1` is used.

```css
filter: saturate(200%);
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_9.jpeg" id="img1" class="internal default" src="/files/3722/Test\_Form\_9.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_9.jpg" id="img2" class="internal default" src="/files/3722/Test\_Form\_9.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239">
 <filter id="saturate">
    <feColorMatrix type="saturate"
 values="2"/>
 </filter>
 <image xlink:href="/files/3722/Test\_Form\_9.jpeg" filter="url(#saturate)" width="201px" height="239px" />
</svg><div></td>
      <td><img alt="Test\_Form\_9\_s.jpg" id="img4" class="internal default" src="/files/3724/Test\_Form\_9\_s.jpeg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: saturate(200%);
  -webkit-filter: saturate(200%);
  -o-filter: saturate(200%);
  -ms-filter: saturate(200%);
  filter: saturate(200%);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

### `sepia() [сепия]`

Converts the input image to sepia. The value of `amount` defines the proportion of the conversion. A value of 100% is completely sepia. A value of `0%` leaves the input unchanged. Values between `0%` and `100%` are linear multipliers on the effect. If the `amount` parameter is missing, a value of `0` is used.

```css
filter: sepia(100%);
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">SVG Equivalent</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="Test\_Form\_12.jpeg" id="img1" class="internal default" src="/files/3727/Test\_Form\_12.jpeg" style="width: 100%;" /></td>
      <td><img alt="Test\_Form\_12.jpg" id="img2" class="internal default" src="/files/3727/Test\_Form\_12.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194">
 <filter id="sepia">
    <feColorMatrix type="matrix"
 values="0.393 0.769 0.189 0 0
 0.349 0.686 0.168 0 0
 0.272 0.534 0.131 0 0
 0 0 0 1 0"/>
 </filter>
 <image xlink:href="/files/3727/Test\_Form\_12.jpeg" filter="url(#sepia)" width="259px" height="194px" />
</svg><div></td>
      <td><img alt="Test\_Form\_12\_s.jpg" id="img4" class="internal default" src="/files/3728/Test\_Form\_12\_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: sepia(100%);
  -webkit-filter: sepia(100%);
  -o-filter: sepia(100%);
  -ms-filter: sepia(100%);
  filter: sepia(100%);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

Комбинирование функций
----------------------

You may combine any number of functions to manipulate the rendering. The following example enhances the contrast and brightness of the image.

```css
filter: contrast(175%) brightness(103%);
```

```
<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">Original image</th>
      <th align="left" scope="col">Live example</th>
      <th align="left" scope="col">Static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
 alt="Test\_Form\_8.jpeg"
 id="img1"
 class="internal default"
 src="/files/3729/Test\_Form\_8.jpeg"
 style="width: 100%;" />
      </td>
      <td>
        <img
 alt="Test\_Form\_8.jpg"
 id="img2"
 class="internal default"
 src="/files/3729/Test\_Form\_8.jpeg"
 style="width: 100%;" />
      </td>
      <td>
        <img
 alt="Test\_Form\_8\_s.jpg"
 id="img4"
 class="internal default"
 src="/files/3730/Test\_Form\_8\_s.jpeg"
 style="width: 100%;" />
      </td>
    </tr>
  </tbody>
</table>
```

```
html {
  height: 100%;
}
body {
  font:
    14px/1.286 "Lucida Grande",
    "Lucida Sans Unicode",
    "DejaVu Sans",
    Lucida,
    Arial,
    Helvetica,
    sans-serif;
  color: rgb(51, 51, 51);
  height: 100%;
  overflow: hidden;
}
#img2 {
  width: 100%;
  height: auto;
  -moz-filter: contrast(175%) brightness(103%);
  -webkit-filter: contrast(175%) brightness(103%);
  -o-filter: contrast(175%) brightness(103%);
  -ms-filter: contrast(175%) brightness(103%);
  filter: contrast(175%) brightness(103%);
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width: 25%;
  height: auto;
}
#img3 {
  height: 100%;
}
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # FilterProperty |

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

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

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

* Applying SVG effects to HTML content (en-US)
* The `mask` (en-US) property
* SVG
* Understanding CSS filters, HTML5Rocks! article
* CSS 3 filters Tech Stream article
* CSS filters By David Walsh


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

font-weight
===========

CSS свойство **`font-weight`** устанавливает начертание шрифта. Некоторые шрифты доступны только в нормальном или полужирном начертании.

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

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

```css
font-weight: normal;
font-weight: bold;

/\* Relative to the parent \*/
font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

/\* Global values \*/
font-weight: inherit;
font-weight: initial;
font-weight: unset;
```

### Значения

`normal`

Нормальное начертание. То же, что и `400`.

`bold`

Полужирное начертание. То же, что и `700`.

`lighter`

Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).

`bolder`

Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).

`100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`

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

### Недоступность заданного значения

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

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

Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.

### Значение относительных весов

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

| наследуемое значение | `жирнее` | `светлее` |
| --- | --- | --- |
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |

### Определение веса имени

Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:

| Значение | Общее название |
| --- | --- |
| `100` | Тонкий (Волосяной) Thin (Hairline) |
| `200` | Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light) |
| `300` | Светлый Light |
| `400` | Нормальный Normal |
| `500` | Средний Medium |
| `600` | Полужирный Semi Bold (Demi Bold) |
| `700` | Жирный Bold |
| `800` | Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold) |
| `900` | Чёрный (Густой) Black (Heavy) |

### Интерполяция

Значения `font-weight` интерполируются с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности.

### Формальный синтаксис
```

font-weight =
  <font-weight-absolute>  | (en-US)
  bolder                  | (en-US)
  lighter

<font-weight-absolute> =
  normal             | (en-US)
  bold               | (en-US)
  <number [1,1000]>

```

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

### HTML

```html
<p>
  Alice was beginning to get very tired of sitting by her sister on the bank,
  and of having nothing to do: once or twice she had peeped into the book her
  sister was reading, but it had no pictures or conversations in it, 'and what
  is the use of a book,' thought Alice 'without pictures or conversations?'
</p>

<div>
  I'm heavy<br />
  <span>I'm lighter</span>
</div>
```

### CSS

```css
/\* Назначение тексту элемента <p> жирного начертания. \*/
p {
  font-weight: bold;
}

/\* Назначение тексту элемента <div> жирности, которая больше на два уровня,
чем normal, но все ещё меньше, чем стандартный bold. \*/
div {
  font-weight: 600;
}

/\* Назначение тексту элемента <span> жирности,
которая на один уровень меньше, чем у его родителя. \*/
span {
  font-weight: lighter;
}
```

### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-weight-prop |

|  |  |
| --- | --- |
| Начальное значение | `normal` |
| Применяется к | all elements and text. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | да |
| Обработка значения | ключевое слово или числовое значение, с `bolder` и `lighter`, трансформируемися в действительное значение |
| Animation type | жирность шрифта |

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

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


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

user-select
===========

Свойство CSS **`user-select`** определяет может ли пользователь выбрать текст. Оно не влияет на контент, загруженный как chrome, за исключением текстовых блоков.

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

```css
/\* Ключевые слова \*/
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

/\* Глобальные значения \*/
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: revert-layer;
user-select: unset;
```

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

`none`

Текст элемента и вложенных в него элементов не выбирается. Обратите внимание, что объект `Selection` (en-US) может содержать эти элементы.

`auto`

Вычисляемое значение, автоматически определяется следующим образом:

* Для псевдо-элементов `::before` и `::after` вычисляемое значение - `none`
* Если элемент является редактируемым, вычисляемое значение - `contain`
* Иначе, если вычисляемое значение `user-select` для родителя этого элемента - `all`, вычисляемое значение - `all`
* Иначе, если вычисляемое значение `user-select` для родителя этого элемента - `none`, вычисляемое значение - `none`
* Иначе, вычисляемое значение - `text`

`text`

Текст может быть выбран пользователем.

`all`

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

`contain`

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

`element`
Non-standard
 (IE-specific alias)

Аналогичен `contain`. Поддерживается только в Internet Explorer.

**Примечание:** CSS UI 4 renames user-select: element to contain.

Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |

Формальный синтаксис
--------------------
```

user-select =
  auto     | (en-US)
  text     | (en-US)
  none     | (en-US)
  contain  | (en-US)
  all

```

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

### HTML

```html
<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>
```

### CSS

```css
.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
```

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

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # content-selection |

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

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

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

* `::selection`
* Объект JavaScript `Selection` (en-US).
* user-select in CSS Basic User Interface Module Level 4.


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

:checked
========

CSS псевдоклассы **`:checked`** CSS находит любые элементы **radio** (`<input type="radio">`), **checkbox** (`<input type="checkbox">`) или **option** (`<option>` внутри `<select>`), которые выбраны или включены. Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае `:checked` повторно не применится к элементу, а сохранится.

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

```css
input:checked {
  margin-left: 25px;
  border: 1px solid blue;
}
```

### Формальный синтаксис
```

element:checked { стили }
```

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

### Примеры селекторов

```css
/\* любой "кликабельный" элемент \*/
:checked {
  width: 50px;
  height: 50px;
}

/\* только радиокнопки \*/
input[type="radio"]:checked {
  margin-left: 25px;
}

/\* только чекбоксы \*/
input[type="checkbox"]:checked {
  display: none;
}

/\* только элементы option \*/
option:checked {
  color: red;
}
```

`input[type="radio"]:checked`

Находит, все отмеченные на странице, радиокнопки

`input[type="checkbox"]:checked`

Находит все отмеченные чекбоксы

`option:checked`

Находит все отмеченные option

### Использование скрытых чекбоксов, чтобы хранить некоторые булевские значения в CSS

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

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Расширяемые элементы</title>
    <style>
 #expand-btn {
 margin: 0 3px;
 display: inline-block;
 font:
 12px / 13px "Lucida Grande",
 sans-serif;
 text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
 padding: 3px 6px;
 border: 1px solid rgba(0, 0, 0, 0.6);
 background-color: #969696;
 cursor: default;
 border-radius: 3px;
 box-shadow:
 rgba(255, 255, 255, 0.4) 0 1px,
 inset 0 20px 20px -10px white;
 }

 #isexpanded:checked ~ #expand-btn,
 #isexpanded:checked ~ \* #expand-btn {
 background: #b5b5b5;
 box-shadow:
 inset rgba(0, 0, 0, 0.4) 0 -5px 12px,
 inset rgba(0, 0, 0, 1) 0 1px 3px,
 rgba(255, 255, 255, 0.4) 0 1px;
 }

 #isexpanded,
 .expandable {
 display: none;
 }

 #isexpanded:checked ~ \* tr.expandable {
 display: table-row;
 background: #cccccc;
 }

 #isexpanded:checked ~ p.expandable,
 #isexpanded:checked ~ \* p.expandable {
 display: block;
 background: #cccccc;
 }
 </style>
  </head>
  <body>
    <input type="checkbox" id="isexpanded" />

    <h1>Расширяемые элементы</h1>
    <table>
      <thead>
        <tr>
          <th>Колонка #1</th>
          <th>Колонка #2</th>
          <th>Колонка #3</th>
        </tr>
      </thead>
      <tbody>
        <tr class="expandable">
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
        </tr>
        <tr>
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
        </tr>
        <tr>
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
        </tr>
        <tr class="expandable">
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
        </tr>
        <tr class="expandable">
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
          <td>[текст ячейки]</td>
        </tr>
      </tbody>
    </table>

    <p>[какой-то текст примера]</p>
    <p>
      <label for="isexpanded" id="expand-btn">Показать скрытые элементы</label>
    </p>
    <p class="expandable">[другой текст для примера]</p>
    <p>[какой-то текст примера]</p>
  </body>
</html>
```

### Использование скрытых радиокнопок, чтобы хранить некоторые булевские значения в CSS

Также вы можете псевдокласс `:checked`, чтобы скрывать радиокнопки для того, чтобы создать, например, **галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши**.

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

| Specification |
| --- |
| HTML Standard # selector-checked |
| Selectors Level 4 # checked |

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

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


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

text-justify
============

CSS-свойство **`text-justify`** определяет какой тип выравнивания следует применить к тексту, когда `text-align``: justify;` применяется к элементу.

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

```css
/\* Ключевые слова \*/
text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /\* Устаревшее значение \*/

/\* Глобальные значения \*/
text-justify: inherit;
text-justify: initial;
text-justify: revert;
text-justify: revert-layer;
text-justify: unset;
```

Свойство `text-justify` указывается как одно ключевое слово, выбранное из нижеследующего списка значений.

### Значения

`none`

Выравнивание текста отключено. Оно имеет такой же эффект как отсутствие применение свойства `text-align`, хотя оно полезно, если вам нужно включать и выключать выравнивание.

`auto`

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

`inter-word`

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

`inter-character`

Выравнивание текста по средствам добавления пробелов между символами (effectively varying `letter-spacing`), что наиболее подходит для таких языков как японский.

`distribute`
Устарело

Показывает тоже поведение, что и `inter-character`; это значение сохранилось для обратной совместимости.

Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | строчным элементам и ячейкам таблиц |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | discrete |

Формальный синтаксис
--------------------
```

text-justify =
  auto             | (en-US)
  none             | (en-US)
  inter-word       | (en-US)
  inter-character

```

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

<p class="none">
  <code>text-justify: none</code> —<br />Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="auto">
  <code>text-justify: auto</code> —<br />Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="dist">
  <code>text-justify: distribute</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="word">
  <code>text-justify: inter-word</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="char">
  <code>text-justify: inter-character</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
```

```css
p {
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  width: 95%;
  margin: 10px auto;
  text-align: justify;
}

.none {
  text-justify: none;
}

.auto {
  text-justify: auto;
}

.dist {
  text-justify: distribute;
}

.word {
  text-justify: inter-word;
}

.char {
  text-justify: inter-character;
}
```

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

| Specification |
| --- |
| CSS Text Module Level 3 # text-justify-property |

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

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

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

* `text-align`


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

text-indent
===========

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

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

* Learn more
* See full compatibility
* Report feedback
Свойство `text-indent` определяет размер отступа (пустого места) перед строкой в текстовом блоке. По умолчанию это свойство управляет отступом только первой строкой блока, однако ключевые слова `hanging` и `each-line` могут изменить данное поведение.

Строка смещается по горизонтали к левому или к правому (при размещении текста справа налево) краю блока, в котором содержится элемент.

|  |  |
| --- | --- |
| Начальное значение | `0` |
| Применяется к | блочные контейнеры |
| Наследуется | да |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, как указан или абсолютная длина, а также любые ключевые слова |
| Animation type | длина, проценты или calc(); |

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

```css
/\* Ключевые слова \*/
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/\* значение <length> \*/
text-indent: 3mm;
text-indent: 40px;

/\* значение <percentage> зависит от ширины блока\*/
text-indent: 15%;

/\* международные значения \*/
text-indent: inherit;
text-indent: initial;
text-indent: unset;
```

### Значения

`<length>`

Отступ определяется как абсолютная длина (`<length>`). Возможны также отрицательные значения. Статья про значение длины (`<length>`) расскажет больше про возможные единицы измерения.

`<percentage>`

В процентном (`<percentage>`) соотношении отступ зависит от ширины всего блока, внутри которого находится строка.

`each-line`
Экспериментальная возможность
 (экспериментальное значение)

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

`hanging`
Экспериментальная возможность
 (экспериментальное значение)

Отступ добавляется ко всем строкам, *кроме* первой.

### Формальный синтаксис
```

text-indent =
  [ (en-US) <length-percentage> ] (en-US)  && (en-US)
  hanging? (en-US)                 && (en-US)
  each-line? (en-US)

<length-percentage> =
  <length>      | (en-US)
  <percentage>

```

Простые примеры отступов
------------------------

### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
```

### CSS

```css
p {
  text-indent: 5em;
  background: powderblue;
}
```

Пример со значением <percentage>
--------------------------------

### HTML

```html
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
```

### CSS

```css
p {
  text-indent: 30%;
  background: plum;
}
```

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

| Specification |
| --- |
| CSS Text Module Level 3 # text-indent-property |

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

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


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

transition
==========

Свойство CSS **`transition`** - это `сокращённое свойство` для `transition-property` (en-US), `transition-duration`, `transition-timing-function` (en-US), и `transition-delay` (en-US).

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

Transition позволяет определять переходное состояние между двумя состояниями элемента. Различные состояния могут быть определены с помощью `псевдоклассов`, таких как `:hover` или `:active` или установлены динамически с помощью JavaScript.

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `transition-delay` (en-US): `0s`
* `transition-duration`: `0s`
* `transition-property` (en-US): всё
* `transition-timing-function` (en-US): `ease`
* `transition-behavior` (en-US): `normal`
 |
| Применяется к | все элементы, `::before` и `::after` псевдоэлементы |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `transition-delay` (en-US): как указано
* `transition-duration`: как указано
* `transition-property` (en-US): как указано
* `transition-timing-function` (en-US): как указано
* `transition-behavior` (en-US): как указано
 |
| Animation type | Not animatable |

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

```css
/\* Применить к 1 свойству \*/
/\* имя свойства | длительность \*/
transition: margin-left 4s;

/\* имя свойства | длительность | задержка \*/
transition: margin-left 4s 1s;

/\* имя свойства | длительность | временная функция | задержка \*/
transition: margin-left 4s ease-in-out 1s;

/\* Применить к 2 свойствам \*/
transition:
  margin-left 4s,
  color 1s;

/\* Применить ко всем изменённым свойствам \*/
transition: all 0.5s ease-out;

/\* Глобальные значения \*/
transition: inherit;
transition: initial;
transition: unset;
```

Свойство `transition` указывается как один или более одно-свойственных переходов (single-property transitions), разделённых запятой.

Каждый одно-свойственный transition описывает переход, который должен быть применён к одному свойству (или специальным значениям `all` и `none`). Это включает в себя:

* ноль или одно значение, представляющее свойство, к которому должен быть применён переход. Это может быть одно из:
    + ключевое слово `none`
    + ключевое слово `all`
    + `<custom-ident>` именование свойства CSS.
* ноль или одно `<single-transition-timing-function>` (en-US) значение, представляющее временну́ю функцию
* ноль, одно или два `<time>` значения. Первое значение, которое может быть интерпретировано как время, присваивается `transition-duration`, а второе значение, которое может быть интерпретировано как время, присваивается `transition-delay` (en-US).

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

### Формальное описание синтаксиса
```

transition =
  <single-transition># (en-US)

<single-transition> =
  [ (en-US) none | (en-US) <single-transition-property> ] (en-US)  || (en-US)
  <time>                                   || (en-US)
  <easing-function>                        || (en-US)
  <time>

<single-transition-property> =
  all             | (en-US)
  <custom-ident>

<easing-function> =
  linear                          | (en-US)
  <linear-easing-function>        | (en-US)
  <cubic-bezier-easing-function>  | (en-US)
  <step-easing-function>

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                | (en-US)
  ease-in                                             | (en-US)
  ease-out                                            | (en-US)
  ease-in-out                                         | (en-US)
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
  step-start                             | (en-US)
  step-end                               | (en-US)
  steps( <integer> , <step-position>? (en-US) )

<linear-stop-list> =
  [ (en-US) <linear-stop> ] (en-US)# (en-US)

<step-position> =
  jump-start  | (en-US)
  jump-end    | (en-US)
  jump-none   | (en-US)
  jump-both   | (en-US)
  start       | (en-US)
  end

<linear-stop> =
  <number>               && (en-US)
  <linear-stop-length>? (en-US)

<linear-stop-length> =
  <percentage>{1,2} (en-US)

```

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

Примеры CSS переходов включены в главную статью о CSS переходах.

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

| Specification |
| --- |
| CSS Transitions # transition-shorthand-property |

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

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

[2] PPK test

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

* Использование CSS переходов
* `TransitionEvent` (en-US)


Универсальные селекторы - CSS: каскадные таблицы стилей

Универсальные селекторы
=======================

Краткое описание
----------------

Звёздочка (\*) - универсальный селектор для CSS. Соответствует любому тегу. Убирая звёздочки с простых селекторов имеет тот же эффект. Например, *\* .warning* и *.warning* считаются равными.

В CSS 3, звёздочка (`*`) может использоваться в комбинации с пространством имён

* `ns|*` - вхождения всех элементов в пространстве имён ns
* `*|*` - находит все элементы
* `|*` - ищет все элементы без объявленного пространства имён
Пример
------

```css
\*[lang^="en"] {
  color: green;
}
\*.warning {
  color: red;
}
\*#maincontent {
  border: 1px solid blue;
}
```

```html
<p class="warning">
  <span lang="en-us">Зелёный span</span> в красном параграфе.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">Красный span</span> в зелёном параграфе.
</p>
```

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

| Specification |
| --- |
| Selectors Level 4 # the-universal-selector |

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

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


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

margin-left
===========

Свойство CSS **`margin-left`** устанавливает внешний отступ слева от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.

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

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

В редких случаях, когда ширина (т.е., когда все значения `width`, `margin-left`, `border`, `padding`, область содержимого, и `margin-right` определены), `margin-left` игнорируется, и будет иметь такое же расчётное значение, как и `auto` .

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

```css
/\* Ключевые слова \*/
margin-left: auto;

/\* Значения длины \*/
margin-left: 10px; /\* абсолютная длина \*/
margin-left: 1em; /\* относительно размера текста \*/
margin-left: 5%; /\* относительно ширины родительского блока \*/

/\* Глобальные значения \*/
margin-left: inherit;
margin-left: initial;
margin-left: unset;
```

Свойство `margin-left` может быть выражено как ключевое слово `auto`, как `<число>`, или как `<процент>`. Значение может быть положительным, нулевым или отрицательным.

### Значения

`<length>`

Размер отступа - фиксированная величина.

`<percentage>`

Размер отступа в процентах - размер относительно длины родительского блока.

`auto`

Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения `margin-left` и `margin-right` одновременно установлены как `auto`, расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные:

| Значение `display` | Значение `float` | Значение `position` | Расчётное значение `auto` | Комментарий |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`, `inline-table` | *любое* | `static` или `relative` | `0` | Строчный способ разметки |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | *любое* | `static` или `relative` | `0`, кроме случаев, когда `margin-left` и `margin-right` установлены как `auto`. В этом случае устанавливается значение, центрирующее элемент внутри его родителя | Блочный способ разметки |
| `block`, `inline`, `inline-block`, `block`, `table`, `inline-table`, `list-item`, `table-caption` | `left` или `right` | `static` или `relative` | `0` | Блочный способ разметки (плавающие элементы) |
| *любое* `table-*`*, кроме* `table-caption` | *любое* | *любое* | `0` | Внутренние `table-*` элементы не имеют отступов, вместо этого используйте `border-spacing` (en-US) |
| *любое, кроме `flex`,* `inline-flex`*, или* `table-*` | *любое* | *`fixed`* или `absolute` | `0`, кроме случаев, когда `margin-left` и `margin-right` установлены как `auto`. В этом случае, устанавливается значение центрирующее границы области внутри доступной `width` (ширины), если значение фиксировано. | Способ разметки абсолютным позиционированием |
| `flex`, `inline-flex` | *любое* | *любое* | `0`, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным `auto` отступам. | Способ разметки с помощью flexbox |

### Формальный синтаксис
```

margin-left =
  <length-percentage>  | (en-US)
  auto

<length-percentage> =
  <length>      | (en-US)
  <percentage>

```

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

```css
.content {
  margin-left: 5%;
}
.sidebox {
  margin-left: 10px;
}
.logo {
  margin-left: -5px;
}
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

|  |  |
| --- | --- |
| Начальное значение | `0` |
| Применяется к | все элементы, кроме элементов с табличным типом `display`, отличным от `table-caption`, `table` и `inline-table`. Это также применяется к `::first-letter`. |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, как указан, или абсолютная длина |
| Animation type | длина |

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

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


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

border-width
============

Summary
-------

CSS-свойство `border-width` определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства `border`.

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `border-top-width` (en-US): `medium`
* `border-right-width` (en-US): `medium`
* `border-bottom-width` (en-US): `medium`
* `border-left-width` (en-US): `medium`
 |
| Применяется к | все элементы. Это также применяется к `::first-letter`. |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `border-bottom-width` (en-US): абсолютная длина или `0`, если `border-bottom-style` (en-US) - `none` или `hidden`
* `border-left-width` (en-US): абсолютная длина или `0`, если `border-left-style` (en-US) - `none` или `hidden`
* `border-right-width` (en-US): абсолютная длина или `0`, если `border-right-style` (en-US) - `none` или `hidden`
* `border-top-width` (en-US): абсолютная длина или `0`, если `border-top-style` (en-US) - `none` или `hidden`
 |
| Animation type | как и у каждого из подсвойств этого свойства:* `border-bottom-width` (en-US): длина
* `border-left-width` (en-US): длина
* `border-right-width` (en-US): длина
* `border-top-width` (en-US): длина
 |

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

Общий синтаксис (en-US):
```

border-width =
  <line-width>{1,4} (en-US)

<line-width> =
  <length [0,∞]>  | (en-US)
  thin            | (en-US)
  medium          | (en-US)
  thick

```

```css
border-width: ширина                  /\* Одно значение \*/
border-width: вертикальная горизонтальная    /\* Два значения \*/
border-width: верх горизонтальная основание    /\* Три значения \*/
border-width: верх право основание лево  /\* Четыре значения \*/

border-width: inherit /\* Родительское значение \*/
```

### Values

`<br-width>`

Is either a non-negative explicit `<length>` value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values:

* `thin`
* `medium`
* `thick`

**Примечание:** The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the `thin ≤ medium ≤ thick` inequality and that the values are constant on a single document.

`inherit`

Is a keyword indicating that all four values are inherited from their parent's element calculated value.

Examples
--------

### A mix of values and lengths

#### HTML

```html
<p id="sval">one value: 6px wide border on all 4 sides</p>
<p id="bival">
  two different values: 2px wide top and bottom border, 10px wide right and left
  border
</p>
<p id="treval">
  three different values: 0.3em top, 9px bottom, and zero width right and left
</p>
<p id="fourval">
  four different values: "thin" top, "medium" right, "thick" bottom, and 1em
  right
</p>
```

#### CSS

```css
#sval {
  border: ridge #ccc;
  border-width: 6px;
}
#bival {
  border: solid red;
  border-width: 2px 10px;
}
#treval {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#fourval {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}
```

#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-width |

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

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

See also
--------

* The border-related shorthand properties: `border`, `border-style` (en-US), `border-color` (en-US)
* The border-width-related properties: `border-bottom-width` (en-US), `border-left-width` (en-US), `border-right-width` (en-US), `border-top-width` (en-US)


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

::marker
========

Псевдоэлемент **`::marker`** применяет стили к маркеру элемента списка, которые обычно содержит значок или номер. Работает с любым элементом или псевдоэлементом, к которого установлен `display: list-item`, например, у такого как `<li>` или `<summary>`.

```css
::marker {
  color: blue;
  font-size: 1.2em;
}
```

Разрешённые свойства
--------------------

Только некоторые CSS-свойства могут быть использованы с `::marker` в качестве селектора:

* Все свойства шрифтов
* `white-space`
* `color` (en-US)
* `text-combine-upright` (en-US), `unicode-bidi` (en-US) и `direction`
* Свойство `content`
* Все animation и transition (en-US) свойства

**Примечание:** The specification states that additional CSS properties may be supported in future.

Syntax
------

Error: could not find syntax for this itemExamples
--------

### HTML

```html
<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>
```

### CSS

```css
ul li::marker {
  color: red;
  font-size: 1.5em;
}
```

### Result

Specifications
--------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # marker-pseudo |

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

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

See also
--------

* HTML-элементы, у которые есть маркеры списка по умолчанию: `<ol>`, `<li>`, `<summary>`


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

hanging-punctuation
===================

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

Свойство **`hanging-punctuation`** определяет как браузер будет отображать знаки пунктуации, попадающие в начало или в конец строки. Висячая пунктуация может располагаться за границами контейнера.

```css
/\* Ключевые слова \*/
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

/\* Два ключевых слова \*/
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

/\* Три ключевых слова \*/
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

/\* Общие значения \*/
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: unset;
```

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | discrete |

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

Свойство `hanging-punctuation` может быть определено с помощью одного, двух или трёх ключевых слов.

* Для **одного значения** может быть использовано любое из описанных ниже значений.
* Для **двух значений** используются следующие варианты:
    + `first` вместе с одним из `last`, `allow-end` или `force-end`
    + `last` вместе с одним из `first`, `allow-end` или `force-end`
* Для **трёх значений** используются один из следующих вариантов:
    + `first`, `allow-end` и `last`
    + `first`, `force-end` и `last`
### Значения

`none`

Никакие символы не выносятся.

`first`

Открывающая скобка или кавычка в начале первой строки выровненного элемента будет вынесена.

`last`

Закрывающая скобка или кавычка последней строки выровненного элемента будет вынесена.

`force-end`

Точка или запятая в конце строки выносится.

`allow-end`

Точка или запятая в конце строки будет вынесена, если нет лучшего варианта для выравнивания.

### Формальный синтаксис
```

hanging-punctuation =
  none                                            | (en-US)
  [ (en-US) first || (en-US) [ (en-US) force-end | (en-US) allow-end ] (en-US) || (en-US) last ] (en-US)

```

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

### HTML

```html
<p>
  “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim
  nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor
  massa, sit amet vulputate nulla pharetra ut.”
</p>
```

### CSS

```css
p {
  hanging-punctuation: first last;
  margin: 0.5rem;
}
```

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

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

| Specification |
| --- |
| CSS Text Module Level 3 # hanging-punctuation-property |

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

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


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

width
=====

Свойство CSS **`width`** устанавливает ширину элемента. По умолчанию она равняется ширине внутренней области, но если `box-sizing` имеет значение `border-box`, то она будет равняться ширине области рамки.

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

Свойства `min-width` и `max-width` перекрывают `width`.

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

```css
/\* Ключевые слова \*/
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/\* <length> значения \*/
width: 300px;
width: 25em;

/\* <percentage> значения \*/
width: 75%;

/\* Глобальные значения \*/
width: inherit;
width: initial;
width: unset;
```

Свойство `width` указывается как:

* одно из следующих ключевых слов: `available`, `min-content`, `max-content`, `fit-content`, `auto`.
* `<length>` или `<percentage>`. За ними так же могут быть указаны одни из следующих ключевых слов: `border-box`, `content-box`.
### Значения

`<length>`

Ширина - фиксированная величина.

`<percentage>`

Ширина в процентах - размер относительно ширины родительского блока.

`border-box`
Экспериментальная возможность

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

`content-box`
Экспериментальная возможность

Если присутствует, то предшествующие `<length>` или `<percentage>` применяются к внутренней области элемента.

`auto`

Браузер рассчитает и выберет ширину для указанного элемента.

`fill`
Экспериментальная возможность

Использует `fill-available` размер строки или `fill-available` размер блока, в зависимости от способа разметки.

`max-content`
Экспериментальная возможность

Внутренняя максимальная предпочтительная ширина.

`min-content`
Экспериментальная возможность

Внутренняя минимальная ширина.

`available`
Экспериментальная возможность

Ширина содержащего блока минус горизонтальные `margin`, `border` и `padding`.

`fit-content`
Экспериментальная возможность

Наибольшее из:

* внутренняя минимальная ширина
* меньшая из внутренней предпочтительной ширины и доступной ширины

### Формальный синтаксис
```

width =
  auto                                      | (en-US)
  <length-percentage [0,∞]>                 | (en-US)
  min-content                               | (en-US)
  max-content                               | (en-US)
  fit-content( <length-percentage [0,∞]> )

<length-percentage> =
  <length>      | (en-US)
  <percentage>

```

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

### Ширина по умолчанию

```css
p.goldie {
  background: gold;
}
```

```html
<p class="goldie">Сообщество Mozilla производит множество отличного ПО.</p>
```

### Пиксели и em

```css
.px\_length {
  width: 200px;
  background-color: red;
  color: white;
  border: 1px solid black;
}

.em\_length {
  width: 20em;
  background-color: white;
  color: red;
  border: 1px solid black;
}
```

```html
<div class="px\_length">Ширина в пикселях</div>
<div class="em\_length">Ширина в em</div>
```

### Проценты

```css
.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
```

```html
<div class="percent">Ширина в процентах</div>
```

### max-content

```css
p.maxgreen {
  background: lightgreen;
  width: intrinsic; /\* Safari/WebKit используют нестандартное имя \*/
  width: -moz-max-content; /\* Firefox/Gecko \*/
  width: -webkit-max-content; /\* Chrome \*/
}
```

```html
<p class="maxgreen">Сообщество Mozilla производит множество отличного ПО.</p>
```

### min-content

```css
p.minblue {
  background: lightblue;
  width: -moz-min-content; /\* Firefox \*/
  width: -webkit-min-content; /\* Chrome \*/
}
```

```html
<p class="minblue">Сообщество Mozilla производит множество отличного ПО.</p>
```

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

Убедитесь, что элементы с `width` не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0
Спецификации
------------

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | все элементы, кроме незаменяемых строчных элементов, табличных строк и групп строк |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, `auto` или абсолютная длина |
| Animation type | длина, проценты или calc(); |

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

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

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

* Блочная модель, `height`, `box-sizing`, `min-width`, `max-width`


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

column-gap
==========

Свойство CSS **`column-gap`** задаёт отступ (en-US) между колонками.

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

Изначально свойство появилось в многоколоночной раскладке (en-US). Позже оно перекочевало в другие методы раскладки, и теперь `column-gap` определено в спецификации Box Alignment. А значит может использоваться в многоколоночной, флексбокс- и грид-раскладках.

Обратите внимание, что `grid-column-gap` является псевдонимом для этого свойства.

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

```css
/\* Keyword value \*/
column-gap: normal;

/\* <length> values \*/
column-gap: 3px;
column-gap: 2.5em;

/\* <percentage> value \*/
column-gap: 3%;

/\* Global values \*/
column-gap: inherit;
column-gap: initial;
column-gap: revert;
column-gap: revert-layer;
column-gap: unset;
```

Свойство `column-gap` может быть задано одним из значений, перечисленных ниже.

### Значения

`normal`

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

`<length>`

Размер промежутка между колонками, определяемое единицам измерения `длины`. Значение `<length>` должно быть положительным.

`<percentage>`

Размер промежутка между колонками, указанный в `процентах`. Значение `<percentage>` должно быть положительным.

Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | `normal` |
| Применяется к | multi-column elements, flex containers, grid containers |
| Наследуется | нет |
| Проценты | относятся к соответствующему размеру области содержимого |
| Обработка значения | as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
| Animation type | длина, проценты или calc(); |

Формальный синтаксис
--------------------
```

column-gap =
  normal                     | (en-US)
  <length-percentage [0,∞]>

<length-percentage> =
  <length>      | (en-US)
  <percentage>

```

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

### Флексбокс-раскладка

#### HTML

```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
</div>
```

#### CSS

```css
#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: auto;
}
```

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

### Грид-раскладка

#### HTML

```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```

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

### Многоколоночная раскладка

#### HTML

```html
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  `column-gap` property. Don't you think that's fun and exciting? I sure do!
</p>
```

#### CSS

```css
.content-box {
  column-count: 3;
  column-gap: 40px;
}
```

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

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |
| CSS Grid Layout Module Level 2 # gutters |
| CSS Multi-column Layout Module Level 1 # column-gap |

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

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

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

* Похожие CSS-свойства: `row-gap`, `gap`
* Руководство по грид-раскладке: *Основы грид-раскладки - Отступы*
* Руководство по многоколоночной раскладке: *Стилизация колонок (en-US)*