diff options
Diffstat (limited to 'files/ru/learn/css/building_blocks/advanced_styling_effects/index.html')
| -rw-r--r-- | files/ru/learn/css/building_blocks/advanced_styling_effects/index.html | 329 |
1 files changed, 329 insertions, 0 deletions
diff --git a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html new file mode 100644 index 0000000000..174d980693 --- /dev/null +++ b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html @@ -0,0 +1,329 @@ +--- +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> |