--- 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"><article class="simple"> <p><strong>Предупреждение</strong>: Температура ракетного двигателя достигла критической отметки.</p> </article></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"><article class="multiple"> <p><strong>Предупреждение</strong>: Температура ракетного двигателя достигла критической отметки.</p> </article></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"><button>Нажми на меня!</button></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("<blend-mode>")}}.</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"><div> </div> <div class="multiply"> </div></pre> <p>Воспользуемся CSS — добавим к <code><div></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><div></code>, но каждый из них расположен над простым <code><div></code> с фиолетовым фоном, чтобы показать, как элементы будут смешаны:</p> <pre class="brush: html"><article> Нет режима смешивания <div> </div> <div> </div> </article> <article> Множественное смешивание <div class="multiply-mix"> </div> <div> </div> </article></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><div></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>