background-clip
Краткая информация
| Значение по умолчанию | border-box |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#the-background-clip |
Версии CSS
Описание
Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.
Синтаксис
background-clip: [padding-box | border-box | content-box] [, [padding-box | border-box | content-box]]
Значения
Значений может быть несколько (для каждого из множественных фоновых рисунков), при этом значения разделяются между собой запятой.
Результат использования значений свойства background-clip для элемента с пунктирной рамкой толщиной 10 пикселов показан на рис. 1.
 |  |  |
| padding-box | border-box | content-box |
Рис. 1. Результат применения разных значений
HTML5 CSS2.1 CSS IE Cr Op Sa Fx
Браузеры
background-clip
Краткая информация
| Значение по умолчанию | border-box |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-background/#the-background-clip |
Версии CSS
Описание
Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.
Синтаксис
background-clip: [padding-box | border-box | content-box] [, [padding-box | border-box | content-box]]
Значения
Значений может быть несколько (для каждого из множественных фоновых рисунков), при этом значения разделяются между собой запятой.
Результат использования значений свойства background-clip для элемента с пунктирной рамкой толщиной 10 пикселов показан на рис. 1.
| | |
| padding-box | border-box | content-box |
Рис. 1. Результат применения разных значений
HTML5 CSS2.1 CSS IE Cr Op Sa Fx
Браузеры
Свойства CSS3 background-origin и background-clip
Свойства background-origin и background-clip были добавлены в CSS3 как дополнительные инструменты для стилизации фона. На первый взгляд разница между этими свойствами может быть не очень понятна, но в данном уроке мы объясним, чем они отличаются, а также покажем на примерах.
Background-origin: позиционирование фонового рисунка
Если свойство background-position предназначено для указания начальной позиции фонового рисунка по осям, то background-origin управляет его позицией относительно рамки (border), отступа (padding) или содержимого элемента. По умолчанию фоновый рисунок отображается, накладываясь на отступы элемента (если они есть), и не подкладывается под рамку. Это положение можно менять, используя следующие значения background-origin:
Конечно же, настройка background-origin будет иметь смысл только при условии, что у элемента есть рамка и/или отступы. Ниже вы можете посмотреть, как работают разные значения данного свойства. Для примера мы создали блок
В нашем примере повторение фонового рисунка отключено. Что будет, если включить его? Смотрите пример:
Как видим, фоновый рисунок дублируется, но начальная точка отличается в зависимости от значения background-origin. Если рисунок будет бесшовным, то влияние background-origin может быть практически незаметным:
И еще одна особенность: наверное, вы заметили, что у самого блока
Background-clip: свойство для обрезки фона
Свойство background-clip позволяет определять, какую область элемента фон заполняет, а какую — нет. Согласно спецификации, свойство принимает следующие значения:
Примеры для неповторяющегося фонового рисунка:
Примеры для повторяющегося фонового рисунка:
Заметьте, что background-clip не меняет начальную точку позиционирования фона, поэтому верхняя и левая стороны фонового рисунка могут обрезаться, если позиционирование у него осталось по умолчанию (это видно на примере с background-clip:content-box ).
Сочетание обоих свойств
Используя background-origin и background-clip в паре, можно исправить проблему обрезки фонового рисунка, о которой мы только что говорили. Например, следующий код заполнит фоном элемент
Поддержка браузерами
Internet Explorer поддерживает свойства background-origin и background-clip, начиная с 9-й версии. В большинстве используемых браузеров данные свойства также работают.
Что ж, вот вы и познакомились с еще двумя интересными свойствами, которые помогают стилизовать фон. Но CSS не перестает удивлять: впереди нас ждет еще одно свойство для фоновых изображений, которое, кстати, используется повсеместно — background-size.
Свойство background-clip и как его применять
Дата публикации: 2016-02-17
От автора: свойство background-clip – одно из тех свойств, которые я уже знаю на протяжении нескольких лет, но так толком и не использовал. Может пару раз оно мне пригодилось, как часть решения, в вопросе на сайте Stack Overflow. Я его не использовал вплоть до этого года, пока не начал создавать мою огромную коллекцию слайдеров.
Некоторые из выбранных мной дизайнов были настолько сложны, что на весь слайдер у меня был всего один доступный элемент input. А это значит, что я даже не мог использовать псевдоклассы на нем. Даже если в отдельных браузерах псевдоклассы на элементе инпут работают, то они работают исключительно как баг. А я не хочу полагаться на это. Все это означало, что мне придется использовать очень много свойств, связанных с фоном, границами и тенями. Из этой работы я многое для себя узнал и в этой статье поделюсь некоторыми уроками.
Сначала давайте разберемся, что же такое это свойство background-clip и что оно делает. На рисунке ниже изображен квадрат.
Значение padding равно 0, а padding-box совпадает со свойством content-box. Content limit и padding limit также равны.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Если свойство border-width: 0, то border-box совпадает с padding-box, а padding limit совпадает с border limit.
Если и padding и border-width равны 0, то все три content-box, padding-box и border-box одинаковы, также будут равны content limit, padding limit и border limit.
По умолчанию фон полностью перекрывает свойство border-box (он заходит под рамку), но background-position (и background-size в процентах) относится к padding-box.
Чтобы лучше понять, о чем идет речь, давайте разберем пример. У нас есть блок со случайными размерами. Зададим ему простой градиент background-size: 50% 50% и прерывистый border (border-image) таким образом, чтобы мы могли видеть, что находится под рамкой:
В этом демо видно, что градиент перекрывает весь border-box (градиент виден под рамкой). Свойство background-position мы не задавали, т.е. оно по умолчанию 0 0. Видно, что позиционирование относится к padding-box, так как начинается из верхнего левого угла (0 0) блока. Также background-size задан в процентах и относится к padding-box.
По умолчанию фон перекрывает border-box полностью, но начинается в левом верхнем углу padding-box
Когда мы задаем background-size для градиента (а не для изображений) нам нужно два значения для разных браузеров. Если использовать только одно, то Firefox второе установит в 100% (по спецификации), а все остальные браузеры будут неправильно приравнивать второе значение к первому. Отсутствующее значение background-size устанавливается в auto, а так как у градиента собственных размеров нет, то значение auto не сможет вычислиться. Значит его нужно задать в 100%. То есть, если мы не хотим, чтобы оба значения background-size были 100%, то следует использовать оба значения.
Используя одно значение для background-size не обеспечит кроссбраузерности (тест). Слева: Firefox (по спецификации принимает второе значение за 100%). Справа: Chrome/ Opera, Safari, IE/ Edge (неправильно задают второе значение равным первому).
С помощью свойства background-clip можно сделать так, чтобы фон закрывал только padding-box или content-box. Свойство отсекает и не показывает ту часть, которая выходит за область кадрирования, где область кадрирования это область в пунктирной рамке на рисунке ниже.
По умолчанию background-clip: border-box область кадрирования это border-box. Т.е. мы видим фон под рамкой.
Если задать background-clip: padding-box, областью кадрирования станет padding-box. Это значит, что фон будет показываться только в padding-box (не будет виден под рамкой).
И если задать background-clip: content-box, то область кадрирования будет content-box. Фон будет виден только внутри области content-box.
В демо ниже проиллюстрированы три ситуации:
Также есть еще одно свойство background-origin, которое задает к какой из трех областей будет относиться background-position (и background-size в %).
Рассмотрим точно такую же конструкцию с прерывистой рамкой border, но в этот раз с видимым padding’ом. На фон мы поставим изображение и градиент. И изображению и градиенту задан background-size: 50% без повторений. Также у изображения задан background-position: 100% 100% (а градиент по умолчанию 0 0):
Свойство background-clip и его применения
Первым делом давайте посмотрим, что такое background-clip и что оно делает.
На следующей картинке у нас блочная (или всё-таки боксовая? — прим. перев.) модель элемента.
при padding: 0 и border-width: 0
Чтобы лучше это понять, рассмотрим пример. Возьмем блок с наугад выбранными размерами, зададим ему простой градиентный фон с background-size: 50% 50% и заштрихованный border (с помощью border-image ), так что сквозь штрихи нам будет видно, что там под рамкой:
Задание background-size с одним значением не дает кроссбраузерного результата (можно проверить); слева: Firefox (по спецификации, второе значение считается равным 100% ); справа: Chrome/ Opera, Safari, IE/ Edge (ошибочно делают второе значение равным первому)
иллюстрация, что такое обрезка
Эти три случая показаны в следующем живом примере:
Чудесно! Посмотрим теперь, как использовать это в своих интересах!
Прозрачный зазор между рамкой и фоном
Обрезка фона по content-box значит, что он не распространится за края контента. Дальше их фона не будет, так что будет видно всё, что находится под нашим элементов. Добавка border значит, что мы увидим этот border в между краем внутреннего отступа и краем рамки. Но, поскольку padding ненулевой, у нас остается прозрачная область между краями контента и внутреннего отступа.
подсветка рамки, внутреннего отступа и области контента в отладчике
Можно проверить это вживую в этом примере на CodePen:
Можно проверить это в действии в этом примере на CodePen:
Этот подход, когда в качестве пустого пространства между фоном и рамкой служит внутренний отступ, трудно назвать лучшим, если только внутри не одна коротенькая надпись. Если текста больше… да уж, смотрится это паршиво.
В следующем интерактивном примере можно поиграть с этими значениями — кликните по любому из них, появится всплывающий ползунок.
Заметьте, что если радиус размытия не может быть меньше нуля, смещения и радиус распространения могут быть отрицательными. Отрицательное смещение просто сдвигает тень в обратную сторону по своей оси (влево или вверх). Отрицательный радиус распространения значит, что тень не расширяется, а сжимается.
Если оставить смещения и размытие нулевыми, но задать положительное значение радиусу распространения, то с виду получится вторая сплошная рамка одинаковой со всех сторон толщины, наружу от края настоящей рамки.
имитация рамки с помощью box-shadow
Обратите внимание, что такие рамки не обязательно должны быть одинаковой толщины со всех сторон. Можно придать их сторонам разную толщину, подгоняя значения смещений и радиуса распространения, с тем ограничением, что суммарная толщина вертикальных границ должна равняться суммарной толщине горизонтальных. Если рамке не нужна полупрозрачность, то и это ограничение можно обойти с помощью нескольких теней, но подобное решение уже скорее не упростит, а усложнит нам работу.
подсветка областей рамки, внутреннего отступа и контента в отладчике
Это можно посмотреть в действии в следующем примере на CodePen:
Можно было бы имитировать рамку и внутренней тенью (с параметром inset ). В этом случае она начинается от края внутреннего отступа (границы между областями padding и border ), и распространяется на указанный радиус внутрь.
эмуляция второй рамки с помощью внутренней box-shadow
Можно испытать это в действии в этом примере на CodePen, где добавлен еще фильтр drop-shadow() для «светящегося» эффекта.
Мишень из одного элемента (без псевдоэлементов) с гладкими краями
Допустим, нам нужно получить вот такую мишень, и при этом нам позволено использовать только один элемент без псевдоэлементов.
мишень, которую нам надо построить силами CSS
иллюстрация структуры мишени
Этот пример на CodePen иллюстрирует принцип:
Первая загвоздка здесь в том, что у IE другое мнение, как это должно работать.
repeating-radial-gradient с отрицательной первой контрольной точкой: сравните ожидаемый результат (слева) и IE (справа)
К счастью, это исправили в Edge, но если нужна поддержка IE, проблема остается. Ее можно решить, используя обычный радиальный градиент, нам ведь всё равно не так уж много кругов и нужно. Кода больше, но всё не так уж плохо…
Можно увидеть его в действии в этом примере на CodePen:
Теперь окружности распределены во всех браузерах одинаково, но у нас осталась другая проблема: пусть края не слишком отличаются по гладкости от оригинальной картинки в IE/Edge, но в Firefox и Chrome они выглядят просто ужасно!
сравните оригинал (вверху слева), IE (вверху справа), Firefox (внизу слева) и Chrome (внизу справа)
Что ж, в IE (где и так было неплохо) и Firefox стало лучше, но в Chrome края по-прежнему безобразные.
сравните оригинал (вверху слева), IE (вверху справа), Firefox (внизу слева) и Chrome (внизу справа)
Может быть, радиальные градиенты вообще не лучшее решение, в конце концов. А почему бы нам не приспособить сюда решение на background-clip и box-shadow из предыдущего раздела? С помощью внешней box-shadow мы можем сделать внешнее кольцо, а тенью с inset — внутреннее. Пространство между ними займет прозрачная рамка. Мы также установим для background-clip значение content-box и дадим элементу достаточный внутренний отступ, так что у нас получится прозрачная область между центральным кружком и внутренним кольцом.
Посмотрите, как это работает, в следующем примере на CodePen, никаких «рваных» краев и прочих неприятностей:
Реалистичные элементы управления
Разнобой между этими псевдоэлементами выглядит ужасно, но еще ужаснее то, что мы не можем перечислить все разнобраузерные версии для одной детали, чтобы оформить их все сразу. Что-то вроде такого не заработает:
Нам приходится постоянно писать их так:
Что выглядит как механическое «переливание» в коде одной и той же «воды», и часто это так и есть — хотя при таком обилии разночтений между браузерами, как с ползунками, такие дубликаты полезны для сглаживания этих различий. Моим решением было использовать миксин thumb() и при необходимости передавать ему аргументы для обработки несоответствий. Например, как-то так:
Но вернемся к самим возможностям оформления. Добавлять псевдоэлементы к этим деталям можно только в Chrome и Opera, а это значит, что нам нужно будет максимально точно, как только возможно, воспроизвести их внешний вид, не полагаясь на псевдоэлементы. Так что у нас остаются только фоны, рамки, тени и фильтры для самого «элемента» ручки.
Давайте взглянем на несколько примеров!
Мягкий пластик
В качестве визуального примера представим себе что-то вроде ручки ползунка ниже:
ползунок с ручкой из мягкого пластика
И это даже работает (на примере элемента button вместо ручки ползунка ради простоты):
Полюбоваться конечным результатом можно в этом примере на CodePen:
Матовая ручка
Что-то вроде ручки ползунка со следующей картинки:
ползунок с матовой ручкой
Можно посмотреть на это вживую в этом примере на Code Pen:
Объемный элемент
Например, ручка следующего ползунка:
ползунок с объемной ручкой
Результат можно посмотреть на CodePen здесь:
See the Pen 3D button by Ana Tudor (@thebabydino) on CodePen.
Теперь остается маленькая круглая деталька. Это тот случай, когда я по-настоящему почувствовала потребность в псевдоэлементе. В итоге я и пошла по этому пути для Blink, но мне удалось сделать так, что запасной вариант для других браузеров — из наложенных друг на друга двух радиальных градиентов поверх линейных — стал выглядеть прилично:
Посмотреть, что получилось, можно в следующем примере:
Иллюзия глубины
Дорожка следующего ползунка иллюстрирует основную мысль:
ползунок с дорожкой, уходящей в глубину
Но тут есть проблема, и ее видно в следующем примере на CodePen:
Металлические элементы управления
Например, что-то вроде кнопки, изображенной ниже:
металлический элемент управления
Прежде чем двигаться куда-то дальше, давайте немного разберем, из чего состоит элемент:
составные части металлического элемента управления
В порядке от самой внешней детали к центру, у нас есть:
Широкое внешнее кольцо — это область рамки, центральная часть — область контента, а всё, что между ними (тонкое внутреннее кольцо и решетчатая часть) — область внутреннего отступа. Тонкое внутреннее кольцо мы сделаем внутренней тенью:
Добавим еще две внешних тени, одну для светлого верхнего блика на внешнем кольце и другую для кусочка темной тени под элементом, итого у нас уже есть:
До цели еще далековато, но уже хоть что-то.
Теперь нам нужно наложить друг на друга три типа фонов, сверху вниз: ограниченный по content-box (образующий центральную область), ограниченный по padding-box (образующий решетчатую область и голубое свечение) и ограниченный по border-box (образующий широкое внешнее кольцо и светодиоды).
Начнем с центральной области, на которой у нас есть несколько прерывистых окружностей, полученных тремя повторяющимися радиальными градиентами, наложенными друг на друга, со значениями контрольных точек, подобранными по принципу цикады, и отражения в форме конусов, построенные коническим градиентом. Заметьте, что конические градиенты еще не поддерживаются ни в одном браузере, так что пока воспользуемся полифилом.
И наконец это становится на что-то похоже!
Переходим к решетчатой области. Голубое свечение — просто радиальный градиент, сходящий к краям в прозрачность, а вот в основе отверстий лежит паттерн «Карбоновое волокно» из галереи, которую Лиа Веру сделала целых пять лет назад — но всё еще чертовски полезной для людей с ограниченными художественными способностями вроде меня.
Кажется, у нас начинает вырисовываться что-то приличное:
Основа широкого внешнего кольца (без светодиодов) делается одним коническим градиентом:
И вот у нас получился металлический элемент!
Но на нем пока нет светодиодов, исправим же это поскорее!
Каждый светодиод сделан из двух неповторяющихся радиальных градиентов, наложенных один на другой. Верхний — сам светодиод, а нижний, слегка сдвинутый по вертикали, создает светлый отблеск в нижней части светодиода. Это практически тот же эффект, что применен для отверстий в решетчатой части. Нижний градиент всегда одинаков, а вот верхний меняется в зависимости от того, включен светодиод или выключен.
У нас 24 светодиода, размещенных по окружности, проходящей по середине области рамки. Так что ее радиус — это радиус элемента минус половина толщины рамки.
Будем генерировать все эти градиенты с помощью Sass. Сначала создадим пустой список градиентов, затем пройдемся по нему циклом и на каждой итерации будем добавлять в список два градиента. Их координаты рассчитаны так, что они окажутся на вышеупомянутой окружности. Первый градиент зависит от счетчика цикла, а второй всегда одинаков (разве что с другими координатами на окружности).
Окончательным результатом можно полюбоваться в этом примере:
Тени на перпендикулярной плоскости
Рассмотрим пример, когда есть элементы управления в вертикальной плоскости, и нам нужна тень на горизонтальной плоскости под ними. Что-то наподобие следующей картинки:
элементы с тенью на горизонтальной плоскости под ними
Нам нужно воспроизвести этот эффект с помощью всего одного элемента, без псевдоэлементов.
Базовое оформление очень похоже на оформление металлического элемента из прошлого раздела:
Мы задаем довольно широкую прозрачную рамку вокруг кнопки, чтобы нам хватило места для создания этой тени в нижней части рамки. Делаем это для всех сторон рамки, а не только для нижней, потому что нам нужно, чтобы все углы у padding-box закруглялись одинаково и симметрично (если вам нужно освежить в памяти, как это работает, посмотрите потрясающий доклад о border-radius Лии Веру).
Это дает нам металлическую кнопку (пока без тени):
И всё! Можете поиграть с этими кнопками в следующем примере на CodePen:
Для свойства background-clip наверняка найдётся множество применений! Особенно при наложении разных эффектов по краям элементов.
P.S. Это тоже может быть интересно:
Если вам понравилась статья, поделитесь ей!
