path: root/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html

---
title: Узконаправленные функции CSS
slug: Learn/CSS/Building_blocks/Advanced_styling_effects
tags:
  - Beginner
  - Blend
  - Boxes
  - CSS
  - Filters
  - Styling
  - effects
  - Контейнеры
  - Начинающий
  - Смешивание
  - Формы
  - фигуры
  - фильтры
translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects
---
<div>{{LearnSidebar}}</div>

<p class="summary">В этой статье описаны некоторые хитрости, которые познакомят Вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Необходимые знания:</th>
   <td>Основы HTML (изучите <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и CSS (статья <a href="https://developer.cdn.mozilla.net/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td>
  </tr>
  <tr>
   <th scope="row">Задача:</th>
   <td>Понять принцип работы узко используемых эффектов в современных браузерах.</td>
  </tr>
 </tbody>
</table>

<h2 id="Блок-тень">Блок-тень</h2>

<p>{{cssxref("box-shadow")}} позволяет добавить одну и более тень к контейнеру. Как и <code>text-shadow</code>, <code>box-shadows</code> отлично поддерживаются брузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней.</p>

<p>Вы можете найти примеры из стати на <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> (или в <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">исходном коде</a>).</p>

<h3 id="Обычная_тень">Обычная тень</h3>

<p>Для начала взглянем на простой пример:</p>

<pre class="brush: html">&lt;article class="simple"&gt;
  &lt;p&gt;&lt;strong&gt;Предупреждение&lt;/strong&gt;: Температура ракетного двигателя достигла критической отметки.&lt;/p&gt;
&lt;/article&gt;</pre>

<p>А теперь CSS:</p>

<pre class="brush: css">p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}

.simple {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}</pre>

<p>В результате получится вот это:</p>

<p>{{ EmbedLiveSample('Обычная_тень', '100%', 100) }}</p>

<p>Как видите, у нас четыре значения в свойстве <code>box-shadow</code>:</p>

<ol>
 <li>Первое значение — <strong>смещение по горизонтали</strong> — расстояние, на которое смещена тень вправо (если значение отрицательное, то влево).</li>
 <li><strong>Смещение по вертикали</strong> — расстояние, на которое смещена тень вниз (или вверх, если значение отрицательное).</li>
 <li>Третье значение — это <strong>радиус размытия</strong> — уровень размытия тени.</li>
 <li>Значение цвета — это <strong>основной цвет</strong> тени.</li>
</ol>

<p>Вы можете использовать абсолютно любые значения и цвета, если это необходимо.</p>

<h3 id="Несколько_теней">Несколько теней</h3>

<p>Вы можете определить несколько блок-теней, разделяя их запятыми при объявлении <code>box-shadow</code>:</p>

<div class="hidden">
<pre class="brush: html">&lt;article class="multiple"&gt;
  &lt;p&gt;&lt;strong&gt;Предупреждение&lt;/strong&gt;: Температура ракетного двигателя достигла критической отметки.&lt;/p&gt;
&lt;/article&gt;</pre>
</div>

<pre class="brush: css">p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}

.multiple {
  box-shadow: 1px 1px 1px black,
              2px 2px 1px black,
              3px 3px 1px red,
              4px 4px 1px red,
              5px 5px 1px black,
              6px 6px 1px black;
}</pre>

<p>В итоге мы получим:</p>

<p>{{ EmbedLiveSample('Несколько_теней', '100%', 100) }}</p>

<p>Мы сделали контейнер с несколькими ступенчатыми цветными тенями, но Вы можете делать, как считаете то нужным, например, чтобы добавить реалистичности, опираясь на какие-нибудь источники света.</p>

<h3 id="Другие_опции_блок-теней">Другие опции блок-теней</h3>

<p>В отличие от {{cssxref("text-shadow")}}, у свойства {{cssxref("box-shadow")}} есть значение <code>inset</code> — оно добавляет внутреннюю тень. Поясним это на примере.</p>

<p>Для этого примера используем другой HTML-код:</p>

<pre class="brush: html">&lt;button&gt;Нажми на меня!&lt;/button&gt;</pre>

<pre class="brush: css">button {
  width: 150px;
  font-size: 1.1rem;
  line-height: 2;
  border-radius: 10px;
  border: none;
  background-image: linear-gradient(to bottom right, #777, #ddd);
  box-shadow: 1px 1px 1px black,
              inset 2px 3px 5px rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
}

button:focus, button:hover {
  background-image: linear-gradient(to bottom right, #888, #eee);
}

button:active {
  box-shadow: inset 2px 2px 1px black,
              inset 2px 3px 5px rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
}</pre>

<p>Получим:</p>

<p>{{ EmbedLiveSample('Другие_опции_блок-теней', '100%', 70) }}</p>

<p>Мы стилизовали кнопку с помощью состояний <em>focus</em>, <em>hover</em> и <em>active</em>. Для кнопки по умолчанию установлены несколько простых чёрных теней плюс пара внутренних теней в противополжном углу кнопки для эстетичности.</p>

<p>При нажатии на кнопку первая тень становится внутренней, чтобы создать ощущение нажатия кнопки.</p>

<div class="note">
<p><strong>Примечание</strong>: Есть ещё одно значение <code>box-shadow</code>, которое устанавливается перед значением свойства, — <strong>радиус разброса</strong>. При его использовании тень становится больше оригинального контейнера. Свойство не так часто используют, но оно стоит упоминания.</p>
</div>

<h2 id="Фильтры">Фильтры</h2>

<p>Замечательное свойство, благодаря которому ваш дизайн станет интереснее, — это свойство {{cssxref("filter")}}. Это что-то вроде фильтров Photoshop, но в CSS.</p>

<p>В примере ниже мы использовали два значения этого свойства: первое — <code>blur()</code> — определяет, насколько изображение размыто.</p>

<p>Второе значение — <code>grayscale()</code>; оно определяет, насколько изображение насыщено.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/images/filter.html", '100%', 700)}}</p>

<p><strong>Попробуйте изменить значения в примере, чтобы посмотреть на изменения. Вы можете менять значения на другие. Попробуйте добавить <code>contrast(200%)</code>, <code>invert(100%)</code> или <code>hue-rotate(20deg)</code> в примере ниже. Прочтите статью <code><a href="https://developer.mozilla.org/ru/docs/Web/CSS/filter">filter</a></code>, чтобы узнать о многих других значениях этого свойства.</strong></p>

<p>Вы можете добавлять фильтры к любым объектам. Некоторые значения свойства работают почти так же, как CSS-свойства, например, <code>drop-shadow()</code> даёт эффект, схожий с <a href="https://developer.mozilla.org/ru/docs/Web/CSS/box-shadow" title="The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas."><code>box-shadow</code></a> или <a href="https://developer.mozilla.org/ru/docs/Web/CSS/text-shadow" title="The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations."><code>text-shadow</code></a>.</p>

<p>В фильтрах замечательно то, что они применяются к каждому элементу контейнера. Ниже мы сравнили фильтр и блок-тень. Как видите, фильтр применился к каждой чёрточке. А блок-тень просто выделила тень, равную размерам контейнера.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/images/filter-text.html", '100%', 600)}}</p>

<h2 id="Режимы_смешивания">Режимы смешивания</h2>

<p>Режимы смешивания CSS позволяют определить смешивание при наложении двух элементов. Смешивание очень знакомо пользователям редакторов вроде Photoshop.</p>

<p>В режимах смешивания CSS два значения:</p>

<ul>
 <li>{{cssxref("background-blend-mode")}}, которое смешивает цвет фона и цвета отдельного элемента.</li>
 <li>{{cssxref("mix-blend-mode")}}, которое смешивает элементы, наложенные друг на друга.</li>
</ul>

<p>Вы можете найти больше примеров смешивания на странице <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> (смотрите <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">источник</a>) и на странице {{cssxref("&lt;blend-mode&gt;")}}.</p>

<div class="note">
<p><strong>Примечание</strong>: Смешивание относительно новое свойство, поэтому поддерживается хуже, чем фильтры. Оно совсем не поддерживается на Edge, а Safari поддерживает лишь некоторые значения свойства.</p>
</div>

<h3 id="background-blend-mode">background-blend-mode</h3>

<p>Снова обратимся к примеру. Во-первых, {{cssxref("background-blend-mode")}} — мы покажем несколько контейнеров {{htmlelement("div")}}, чтобы Вы сравнили оригинал с редактированной версией:</p>

<pre class="brush: html">&lt;div&gt;
&lt;/div&gt;
&lt;div class="multiply"&gt;
&lt;/div&gt;</pre>

<p>Воспользуемся CSS — добавим к <code>&lt;div&gt;</code> одно фоновое изображение и зелёный фон:</p>

<pre class="brush: css">div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

.multiply {
  background-blend-mode: multiply;
}</pre>

<p>Слева вы видите оригинал, справа — изменённое изображение:</p>

<p>{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}</p>

<h3 id="mix-blend-mode">mix-blend-mode</h3>

<p>Рассмотрим {{cssxref("mix-blend-mode")}}. Здесь мы также используем несколько <code>&lt;div&gt;</code>, но каждый из них расположен над простым <code>&lt;div&gt;</code> с фиолетовым фоном, чтобы показать, как элементы будут смешаны:</p>

<pre class="brush: html">&lt;article&gt;
  Нет режима смешивания
  &lt;div&gt;

  &lt;/div&gt;
  &lt;div&gt;
  &lt;/div&gt;
&lt;/article&gt;

&lt;article&gt;
  Множественное смешивание
  &lt;div class="multiply-mix"&gt;

  &lt;/div&gt;
  &lt;div&gt;
  &lt;/div&gt;
&lt;/article&gt;</pre>

<p>А здесь CSS:</p>

<pre class="brush: css">article {
  width: 280px;
  height: 180px;
  margin: 10px;
  position: relative;
  display: inline-block;
}

div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
}

article div:first-child {
  position: absolute;
  top: 10px;
  left: 0;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

article div:last-child {
  background-color: purple;
  position: absolute;
  bottom: -10px;
  right: 0;
  z-index: -1;
}

.multiply-mix {
  mix-blend-mode: multiply;
}</pre>

<p>И это даст нам следующее:</p>

<p>{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}</p>

<p>Как видите, смешались не только фоновые изображения, но и <code>&lt;div&gt;</code> под ними.</p>

<div class="note">
<p><strong>Примечание</strong>: Не переживайте, если Вы не знаете такие свойства разметки, как {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}} и т. д. Мы детально рассмотрим это в модуле <a href="https://developer.cdn.mozilla.net/ru/docs/Learn/CSS/CSS_layout">CSS Layout</a>.</p>
</div>

<h2 id="CSS-фигуры">CSS-фигуры</h2>

<p>Мы можем сделать обтекание содержимым непрямоугольных фигур, используя <a href="https://wiki.developer.mozilla.org/ru/docs/Web/CSS/CSS_Shapes">CSS-фигуры</a>.</p>

<p>В примере ниже мы эффектно округлили воздушный шар. В действительности изображение прямоугольное, но с определением свойства <em>float</em> (по-другому формы не добавляются) и использованием свойства {{cssxref("shape-outside")}} со значением <code>circle(50%)</code>, мы можем создать эффект обтекания текста.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/images/shapes.html", '100%', 1000)}}</p>

<p>Форма в этом примере не реагирует на содержание изображения. Вместо этого в центре изображения определяется центр окружности, как если бы мы начертили циркулем окружность, вписанную в изображение. Это та окружность, которую обтекает текст.</p>

<div class="blockIndicator note">
<p><strong>Примечание</strong>: В Firefox Вы можеет использовать <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Инспектор фигур</a>, чтобы редактировать фигуры.</p>
</div>

<p>Значение <code>circle()</code> — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте <a href="/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Обзор CSS-фигур</a> на MDN.)</p>

<h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2>

<p>Функция, о которой мы, кажется, упомянули в свйстве <code>text</code> для значения {{cssxref("background-clip")}}. Опция <code>-webkit-text-fill-color: transparent;</code> позволяет обрезать фоновые изображения под форму текста. Это неофициальный стандарт, но он был подключён во множестве браузеров. В данном контексте обязательно используется префикс <code>-webkit-</code> для любых браузеров:</p>

<pre class="brush: css">.text-clip {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}</pre>

<p>Так почему остальные браузеры используют префикс <code>-webkit-</code>? В основном для совместимости — поэтому многие веб-разработчики стали вставлять префиксы <code>-webkit-</code>, отчего другие браузеры казались сломанными, когда, по факту, всё было выполнено по всем стандартам. Поэтому были введены некоторые такие функции.</p>

<p>Если вы собираетесь использовать подобные опции, проверьте совместимость их с браузерами.</p>

<div class="note">
<p><strong>Примечание</strong>: Пример с <code>-webkit-background-clip: text</code> смотрите на <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> (или <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">источнике</a>).</p>
</div>

<h2 id="Итог">Итог</h2>

<p>Надеемся, статья была весёлой — игра с кодами уж точно. Всегда интересно следить за появлением новых узконаправленных свойств в современных браузерах.</p>