Как обрезать фон в css

Как обрезать фон в css

Свойства background-origin и background-clip были добавлены в CSS3 как дополнительные инструменты для стилизации фона. На первый взгляд разница между этими свойствами может быть не очень понятна, но в данном уроке мы объясним, чем они отличаются, а также покажем на примерах.

Background-origin: позиционирование фонового рисунка

Если свойство background-position предназначено для указания начальной позиции фонового рисунка по осям, то background-origin управляет его позицией относительно рамки (border), отступа (padding) или содержимого элемента. По умолчанию фоновый рисунок отображается, накладываясь на отступы элемента (если они есть), и не подкладывается под рамку. Это положение можно менять, используя следующие значения background-origin:

• padding-box (значение по умолчанию) — фоновое изображение располагается в верхнем левом углу элемента, который является областью отступов padding.
• border-box — фоновое изображение располагается в верхнем левом углу элемента, который является областью рамки (при этом рамка накладывается на фон, перекрывая его часть).
• content-box — фоновое изображение располагается в верхнем левом углу, который принадлежит содержимому элемента.

Конечно же, настройка background-origin будет иметь смысл только при условии, что у элемента есть рамка и/или отступы. Ниже вы можете посмотреть, как работают разные значения данного свойства. Для примера мы создали блок с большими отступами и толстой фиолетовой рамкой (к тому же пунктирной, чтобы вам было лучше видно поведение фона под ней). Также у блока есть контент, фоновый цвет которого мы для наглядности сделали фиолетовым:

В нашем примере повторение фонового рисунка отключено. Что будет, если включить его? Смотрите пример:

Как видим, фоновый рисунок дублируется, но начальная точка отличается в зависимости от значения background-origin. Если рисунок будет бесшовным, то влияние background-origin может быть практически незаметным:

И еще одна особенность: наверное, вы заметили, что у самого блока есть два фона — сплошной серый цвет и изображение с алфавитом. На примере видно, что свойство background-origin влияет только на позиционирование фонового рисунка, но не цвета фона (который всё равно виден в пробелах пунктирной линии). Как повлиять на цвет фона? В этом нам поможет следующее свойство — background-clip .

Background-clip: свойство для обрезки фона

Свойство background-clip позволяет определять, какую область элемента фон заполняет, а какую — нет. Согласно спецификации, свойство принимает следующие значения:

• padding-box — фон заполняет элемент, включая его отступы, и не заполняет область границ, так что в просветах пунктирной или точечной рамки фон не будет виден.
• border-box (значение по умолчанию) — фон заполняет элемент, включая область рамки (при этом рамка накладывается поверх фона). В случае с фоновым рисунком эффект данного значения будет заметен только при условии, что он повторяется.
• content-box — фон заполняет элемент, включая его содержимое, и не заполняет область отступов и границ.

Примеры для неповторяющегося фонового рисунка:

Примеры для повторяющегося фонового рисунка:

Заметьте, что background-clip не меняет начальную точку позиционирования фона, поэтому верхняя и левая стороны фонового рисунка могут обрезаться, если позиционирование у него осталось по умолчанию (это видно на примере с background-clip:content-box ).

Сочетание обоих свойств

Используя background-origin и background-clip в паре, можно исправить проблему обрезки фонового рисунка, о которой мы только что говорили. Например, следующий код заполнит фоном элемент в области контента, а также задаст соответствующую начальную точку позиционирования фонового рисунка:

Поддержка браузерами

Internet Explorer поддерживает свойства background-origin и background-clip, начиная с 9-й версии. В большинстве используемых браузеров данные свойства также работают.

Что ж, вот вы и познакомились с еще двумя интересными свойствами, которые помогают стилизовать фон. Но CSS не перестает удивлять: впереди нас ждет еще одно свойство для фоновых изображений, которое, кстати, используется повсеместно — background-size.

background-clip

Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.

Синтаксис

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

Браузеры

В IE7 фон по умолчанию выводится как при значении padding-box .

Safari понимает только нестандартное свойство -webkit-background-clip , также с ним работает и Chrome.

Opera до версии 12.0 не поддерживает значение content-box .

Firefox до версии 4.0 поддерживает нестандартное свойство -moz-background-clip .

Как обрезать background на css

Здравствуйте! Подскажите, как обрезать фон, как показано на изображении? сделал background цветом. Низ обрезал с помощью clip-pathа верх никак не выходит. Кто знает — помогите, пожалуйста!

По clip-path есть онлайн мейкер. Но тут зависит от поддержки браузеров, нужно это свойство вам или нет.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css вёрстка или задайте свой вопрос.

Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.4.14.41981

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Свойство background-clip и его применения

SelenIT

background-clip — одно из тех свойств, о которых я давно знала, но почти не использовала. Может, лишь пару раз в ответах на Stack Overflow. До прошлого года, когда я начала создавать эту огромную коллекцию ползунковых регуляторов (слайдеров). Некоторые дизайны, что я решила воспроизвести, были довольно-таки сложны, а мне на каждый ползунок отводился один-единственный элемент, и им как назло оказался input , к которому даже псевдоэлементов толком не добавить. Хоть в некоторых браузерах такое и работает, то, что оно работает — на самом деле баг, и мне не хотелось на это полагаться. Так что в итоге мне пришлось использовать фоны, рамки и тени в изобилии. И я многому научилась при этом, и в этой статье делюсь некоторыми их тех уроков.

Первым делом давайте посмотрим, что такое background-clip и что оно делает.

На следующей картинке у нас блочная (или всё-таки боксовая? — прим. перев.) модель элемента.

Если padding равен 0 , то padding-box по размеру точно равен content-box , и край контента совпадает с краем внутреннего отступа.

Если border-width равен 0 , то border-box по размеру точно равен padding-box , и край рамки совпадает с краем внутреннего отступа.

при border-width: 0

Если и padding , и border-width оба равны 0 , то все три области ( content-box , padding-box и border-box ) равны по размеру, и края контента, внутреннего отступа и рамки все совпадают друг с другом.

при padding: 0 и border-width: 0

По умолчанию фоны покрывают всю 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 (ошибочно делают второе значение равным первому)

Можно заставить фон покрывать только padding-box или только content-box с помощью background-clip . Обрезка (clipping) означает, что всё, что выступает за обрезаемую область, отсекается и не показывается. Обрезаемой областью на иллюстрации ниже будет то, что лежит внутри пунктирной линии.

иллюстрация, что такое обрезка

При 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% 50% , и оба они не повторяются. В добавок к этому, у картинки будет background-position: 100% 100% (а для градиента оставим 0 0 по умолчанию):

Следующий пример показывает, что происходит при каждом из трех возможных значений background-origin — border-box , padding-box и content-box :

Значение 100% 100% , указанное для background-position настоящей картинки — это 100% 100% от области, указанной в background-origin . В то же время, 50% 50% , указанные для background-size , означают половину ширины и половину высоты области, указанной в background-origin .

В сокращенной записи background свойства background-origin и background-clip можно указывать именно в таком порядке в конце слоя. Поскольку они оба принимают значение вида *- box , то если указать лишь одно значение такого типа, оно будет присвоено сразу им обоим. Если указать два значения, background-origin получит первое, а background-clip — второе. Если не указывать значений вида *- box , оба свойства останутся со своими значениями по умолчанию ( padding-box для background-origin и border-box для background-clip ).

Чудесно! Посмотрим теперь, как использовать это в своих интересах!

Прозрачный зазор между рамкой и фоном

Кто-то наверняка вспомнит, что с background-clip можно делать полупрозрачные рамки. Но можно еще и добавить зазор между рамкой и областью, покрытой фоном, без дополнительного элемента. Простейший способ этого добиться — задать padding в дополнение к border и указать для background-clip значение content-box . Если сделать это сокращенной записью с единственным значением content-box , мы заодно установим значение content-box и для background-origin , но в данном случае это нормально, никаких побочных эффектов от него нет.

Обрезка фона по content-box значит, что он не распространится за края контента. Дальше их фона не будет, так что будет видно всё, что находится под нашим элементов. Добавка border значит, что мы увидим этот border в между краем внутреннего отступа и краем рамки. Но, поскольку padding ненулевой, у нас остается прозрачная область между краями контента и внутреннего отступа.

подсветка рамки, внутреннего отступа и области контента в отладчике

Можно проверить это вживую в этом примере на CodePen:

Можно сделать результат еще интереснее, добавив фильтр drop-shadow() , который добавит всей конструкции желтоватое свечение:

Напоминание насчет префиксов: я видела множество ресурсов, добавляющих префиксы -moz- и -ms- для CSS-фильтров. Пожалуйста, не делайте этого! CSS-фильтры работают в Firefox без префикса с тех самых пор, как их там реализовали (Firefox 34, осенью 2014-го), а сейчас они появились в Edge за флагом — и тоже без префикса! Так что CSS-фильтрам никогда не были нужны префиксы -moz- и -ms- , добавлять их абсолютно бессмысленно, они будут лишь загромождать стили мертвым грузом.

Можно также получить клёвый визуальный эффект, применив градиент и для background-image , и для border-image . Сделаем градиент, начинающийся со сплошного оранжево-красного цвета вверху и переходящий в полную прозрачность внизу. Поскольку различаются лишь оттенки, а в остальном наши градиенты идентичны, создадим функцию Sass.

Можно проверить это в действии в этом примере на CodePen:

Этот подход, когда в качестве пустого пространства между фоном и рамкой служит внутренний отступ, трудно назвать лучшим, если только внутри не одна коротенькая надпись. Если текста больше… да уж, смотрится это паршиво.

Загвоздка в том, что текст начинается сразу от края оранжевого фона, а мы не можем добавить внутренний отступ, ведь он уже занят под прозрачный зазор. Можно было бы добавить лишний элемент… а можно воспользоваться box-shadow !

box-shadow может принимать 2 , 3 либо 4 значения длины. Первое — смещение по x (определяющее, насколько сдвинуть тень вправо), второе — смещение по y (насколько сдвинуть тень вниз), третье — радиус размытия (определяет, насколько будет размыт край тени), и четвертое — радиус распространения (определяет, как далеко тень будет простираться во все стороны).

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

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

Еще одна важная вещь, которую здесь надо отметить — поскольку она удобна для нашей задачи — то, что box-shadow никогда не отображается под border-box , даже когда эта область (полу)прозрачна.

Если оставить смещения и размытие нулевыми, но задать положительное значение радиусу распространения, то с виду получится вторая сплошная рамка одинаковой со всех сторон толщины, наружу от края настоящей рамки.

имитация рамки с помощью box-shadow

Обратите внимание, что такие рамки не обязательно должны быть одинаковой толщины со всех сторон. Можно придать их сторонам разную толщину, подгоняя значения смещений и радиуса распространения, с тем ограничением, что суммарная толщина вертикальных границ должна равняться суммарной толщине горизонтальных. Если рамке не нужна полупрозрачность, то и это ограничение можно обойти с помощью нескольких теней, но подобное решение уже скорее не упростит, а усложнит нам работу.

Возвращаясь к нашему примеру, можно имитировать рамку с помощью box-shadow с распространением, реальный border превратить в прозрачный зазор, задать для background-clip значение padding-box , и применить padding по назначению:

подсветка областей рамки, внутреннего отступа и контента в отладчике

Это можно посмотреть в действии в следующем примере на CodePen:

Можно было бы имитировать рамку и внутренней тенью (с параметром inset ). В этом случае она начинается от края внутреннего отступа (границы между областями padding и border ), и распространяется на указанный радиус внутрь.

эмуляция второй рамки с помощью внутренней box-shadow

Поскольку теней может быть много, так можно имитировать несколько рамок. Пусть, к примеру, их у нас две, причем одна из них — inset . Если реальный border элемента ненулевой толщины и при этом transparent , а у background-clip стоит значение padding-box , то получится имитация двойной рамки с прозрачной областью (на месте реальной рамки) между внешней и внутренней частями. Обратите внимание, что ради этого понадобилось увеличить padding для компенсации места, занятого внутренней box-shadow .

Можно испытать это в действии в этом примере на CodePen, где добавлен еще фильтр drop-shadow() для «светящегося» эффекта.

Мишень из одного элемента (без псевдоэлементов) с гладкими краями

Допустим, нам нужно получить вот такую мишень, и при этом нам позволено использовать только один элемент без псевдоэлементов.

мишень, которую нам надо построить силами CSS

Первая мысль — воспользоваться repeating-radial-gradient . Структура нашей мишени примерно такая:

иллюстрация структуры мишени

Итак, половина мишени составит 9 единиц, т.е. размеры мишени по вертикали и горизонтали будут по 18 единиц. Наш повторяющийся радиальный градиент всю первую единицу черный, потом до третьей единицы (включительно — прим. перев.) прозрачный, потом опять черный и опять прозрачный… звучит как повторение. Вот только первый раз у нас черная область от 0 до 1, т.е. одна единица, а следующая черная область уже от 3 до 5 — две единицы! Так что… нам тут надо начать отсчет не от 0 , а от -1 , верно? Что ж, это должно работать, согласно спецификации.

Этот пример на 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, никаких «рваных» краев и прочих неприятностей:

Реалистичные элементы управления

Я впервые это придумала, когда пыталась оформлять ручку ползунка от , дорожку ползунка и, для «невебкитных» браузеров, заполненную часть дорожки. Для этих деталей в браузерах предусмотрены псевдоэлементы.

Для полосы у нас есть -webkit-slider-runnable-track , -moz-range-track и -ms-track . Для ручки — -webkit-slider-thumb , -moz-range-thumb и -ms-thumb . И для заполненной части есть -moz-range-progress , -ms-fill-lower (оба для части слева от ручки) и -ms-fill-upper (справа от ручки). У WebKit-браузеров не предусмотрено псевдоэлемента, которым можно было бы оформить части ползунка до и после ручки по-разному.

Разнобой между этими псевдоэлементами выглядит ужасно, но еще ужаснее то, что мы не можем перечислить все разнобраузерные версии для одной детали, чтобы оформить их все сразу. Что-то вроде такого не заработает:

Нам приходится постоянно писать их так:

Что выглядит как механическое «переливание» в коде одной и той же «воды», и часто это так и есть — хотя при таком обилии разночтений между браузерами, как с ползунками, такие дубликаты полезны для сглаживания этих различий. Моим решением было использовать миксин thumb() и при необходимости передавать ему аргументы для обработки несоответствий. Например, как-то так:

Но вернемся к самим возможностям оформления. Добавлять псевдоэлементы к этим деталям можно только в Chrome и Opera, а это значит, что нам нужно будет максимально точно, как только возможно, воспроизвести их внешний вид, не полагаясь на псевдоэлементы. Так что у нас остаются только фоны, рамки, тени и фильтры для самого «элемента» ручки.

Давайте взглянем на несколько примеров!

Мягкий пластик

В качестве визуального примера представим себе что-то вроде ручки ползунка ниже:

ползунок с ручкой из мягкого пластика

На первый взгляд всё решение сводится к градиентному background и и градиенту для border-image , потом еще box-shadow для красоты — и такой элемент готов:

И это даже работает (на примере элемента button вместо ручки ползунка ради простоты):

За исключением того, что наша ручка круглая, а не квадратная. Нужно просто добавить ей border-radius: 50% , так? Так вот… это не сработает, потому что мы используем border-image , с которым border-radius самого элемента игнорируется, хотя, как это ни забавно, он по-прежнему действует на box-shadow , если она есть.

Что же делать? Точно, использовать background-clip ! Сначала мы зададим элементу ненулевой padding , уберем рамку и скруглим его с помощью border-radius: 50% . Затем наложим два градиентных фона, обрезав верхний по content-box (обратите внимание, что обрезка входит в сокращенную запись background) . Наконец, добавим две тени, одну темную, создающую собственно тень под ручкой, а вторую с inset , которая будет слегка затемнять низ и бока внешней части ручки.

Полюбоваться конечным результатом можно в этом примере на CodePen:

Матовая ручка

Что-то вроде ручки ползунка со следующей картинки:

ползунок с матовой ручкой

Этот случай похож на предыдущий, только теперь у нас светлая линия вверху и внутренняя тень для средней части. Если использовать внешнюю box-shadow для создания светлой линии, вся конструкция потеряет круглую форму, если только заодно не уменьшить высоту для компенсации тени. А тогда потребуется больше расчетов для определения положения внутренней части. Если же сделать ее тенью с inset , то мы уже не сможем использовать ее для затемнения внутренней части. Однако, мы можем эмулировать ее с помощью radial-gradient , которому заданы подходящий размер, положение и обрезка по content-box . То есть делаем всё аналогично предыдущему примеру, но теперь у нас поверх остальных фонов будет наложен дополнительный radial-gradient . Фактический background-size этого радиального градиента больше, чем наш content-box , так что мы можем сдвинуть его вниз так, что его верхний край останется за пределами области контента.

Можно посмотреть на это вживую в этом примере на Code Pen:

Объемный элемент

Например, ручка следующего ползунка:

ползунок с объемной ручкой

Это уже посложнее, для этого все три области ( content-box , padding-box и border-box ) должны быть разными, чтобы мы могли накладывать фоны друг на друга и добиваться нужного эффекта с помощью background-clip .

Итак, для основной части ползунка у нас есть градиентный background , обрезанный по content-box , наложенный поверх другого, обрезанного по padding-box , и оба они поверх третьего linear-gradient , обрезанного по border-box . Мы таже задействовали внутреннюю box-shadow , чтобы подчеркнуть край внутреннего отступа (между padding и border ):

Результат можно посмотреть на CodePen здесь:

See the Pen 3D button by Ana Tudor (@thebabydino) on CodePen.

Теперь остается маленькая круглая деталька. Это тот случай, когда я по-настоящему почувствовала потребность в псевдоэлементе. В итоге я и пошла по этому пути для Blink, но мне удалось сделать так, что запасной вариант для других браузеров — из наложенных друг на друга двух радиальных градиентов поверх линейных — стал выглядеть прилично:

Можно было бы еще приблизиться к нашей цели, лучше подобрав оттенки, добавив еще радиальных градиентов или даже воспользовавшись background-blend-mode , но на подобное мне не хватает художественного чутья.

С псевдэлементом добиться нужного результата намного проще — сначала нужно задать ему правильные размер и положение, закруглить его с помощью border-radius: 50% . Затем задать ему padding , никакой рамки, и использовать два градиента в background , верхний из которых радиальный и обрезан по content-box :

Посмотреть, что получилось, можно в следующем примере:

Для ручки реального ползунка я использовала тот же самый background с радиальными градиентами сверху для всех браузеров, а для Blink добавила псевдоэлемент прямо поверх этих радиальных градиентов. Это потому, что стили ручки ползунка в Safari применяются к ::-webkit-slider-thumb , но Safari не поддерживает псевдоэлементов для ручки (или дорожки). Так что если бы я убрала запасной вариант из стилей для ::-webkit-slider-thumb , то Safari не отобразил бы круглую детальку вообще.

Иллюзия глубины

Дорожка следующего ползунка иллюстрирует основную мысль:

ползунок с дорожкой, уходящей в глубину

Как и раньше, для этого мы задаем элементу ненулевой прозрачный border , padding , и накладываем друг на друга фоны с разными значениями background-clip (помните, что слои со значением content-box должны лежать поверх слоев со значением padding-box , а те — поверх слоев со значением border-box ). В данном случае у нас есть более светлый linear-gradient для заливки области border , более темный — плюс пара уменьшенных неповторяющихся радиальных, чтобы добавить еще темноты по краям — для области padding , и совсем тёмный для области контента. Затем мы задаем этой конструкции border-radius , равный как минимум половине от суммы height области контента, удвоенного padding и удвоенного border . И еще добавим внутреннюю box-shadow , чтоб слегка подчеркнуть край внутреннего отступа.

Но тут есть проблема, и ее видно в следующем примере на CodePen:

Из-за того, как работает border-radius — радиус области контента получается из указанного вычитанием border-width и padding , что дает в итоге отрицательное число — углы области контента не закругляются. Что ж, мы можем это исправить! Можно эмулировать нужную нам форму, сочетая линейные, и радиальные градиенты для области контента.

Делается это так: сначала убедимся, что width нашей области контента кратна ее height (в нашем случае, 15.75em = 9*1.75em ). Нижним слоем положим linear-gradient по центру так, чтобы по вертикали он покрывал всю height области контента, но оставляет зазоры по половине ее height от обоих боковых краев. Поверх него накладываем radial-gradient , background-size , равным height области контента и по горизонтали, и по вертикали.

Металлические элементы управления

Например, что-то вроде кнопки, изображенной ниже:

металлический элемент управления

Это уже чуть сложнее, так что давайте разберем его по частям. Прежде всего, мы делаем кнопку круглой, задав ей равные width и height и установив border-radius: 50% . Затем убеждаемся, что ей задан box-sizing: border-box , чтобы border-width и padding отсчитывались внутрь (вычитались из размеров, что мы указали). Теперь зададим ей прозрачную рамку и внутренний отступ. И вот что у нас получилось на данный момент:

Пока еще это ни на что не похоже, потому что весь общий вид достигается с помощью двух свойств, которые мы еще не добавили: box-shadow и background .

Прежде чем двигаться куда-то дальше, давайте немного разберем, из чего состоит элемент:

составные части металлического элемента управления

В порядке от самой внешней детали к центру, у нас есть:

• широкое внешнее кольцо со светодиодами
• тонкое внутреннее кольцо
• решетчатая область (она же включает в себя голубое свечение вокруг следующей внутренней части)
• большая центральная деталь

Широкое внешнее кольцо — это область рамки, центральная часть — область контента, а всё, что между ними (тонкое внутреннее кольцо и решетчатая часть) — область внутреннего отступа. Тонкое внутреннее кольцо мы сделаем внутренней тенью:

Добавим еще две внешних тени, одну для светлого верхнего блика на внешнем кольце и другую для кусочка темной тени под элементом, итого у нас уже есть:

До цели еще далековато, но уже хоть что-то.

Теперь нам нужно наложить друг на друга три типа фонов, сверху вниз: ограниченный по content-box (образующий центральную область), ограниченный по padding-box (образующий решетчатую область и голубое свечение) и ограниченный по border-box (образующий широкое внешнее кольцо и светодиоды).

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

И наконец это становится на что-то похоже!

Переходим к решетчатой области. Голубое свечение — просто радиальный градиент, сходящий к краям в прозрачность, а вот в основе отверстий лежит паттерн «Карбоновое волокно» из галереи, которую Лиа Веру сделала целых пять лет назад — но всё еще чертовски полезной для людей с ограниченными художественными способностями вроде меня.

Кажется, у нас начинает вырисовываться что-то приличное:

Основа широкого внешнего кольца (без светодиодов) делается одним коническим градиентом:

И вот у нас получился металлический элемент!

Но на нем пока нет светодиодов, исправим же это поскорее!

Каждый светодиод сделан из двух неповторяющихся радиальных градиентов, наложенных один на другой. Верхний — сам светодиод, а нижний, слегка сдвинутый по вертикали, создает светлый отблеск в нижней части светодиода. Это практически тот же эффект, что применен для отверстий в решетчатой части. Нижний градиент всегда одинаков, а вот верхний меняется в зависимости от того, включен светодиод или выключен.

Включенными у нас будут светодиоды вплоть до $k -того. Так что до этой отметки используем голубой вариант верхнего градиента, а после нее — серый.

У нас 24 светодиода, размещенных по окружности, проходящей по середине области рамки. Так что ее радиус — это радиус элемента минус половина толщины рамки.

Будем генерировать все эти градиенты с помощью Sass. Сначала создадим пустой список градиентов, затем пройдемся по нему циклом и на каждой итерации будем добавлять в список два градиента. Их координаты рассчитаны так, что они окажутся на вышеупомянутой окружности. Первый градиент зависит от счетчика цикла, а второй всегда одинаков (разве что с другими координатами на окружности).

Окончательным результатом можно полюбоваться в этом примере:

Тени на перпендикулярной плоскости

Рассмотрим пример, когда есть элементы управления в вертикальной плоскости, и нам нужна тень на горизонтальной плоскости под ними. Что-то наподобие следующей картинки:

элементы с тенью на горизонтальной плоскости под ними

Нам нужно воспроизвести этот эффект с помощью всего одного элемента, без псевдоэлементов.

Наложение фонов с разными значениями background-clip и background-origin выручает и в этом случае. Саму кнопку мы строим двумя фонами, верхний из которых обрезан по content-box , а тот, что под ним — по padding-box , и используем фоновый radial-gradient() со значением border-box для background-clip и background-origin , чтобы сделать тень.

Базовое оформление очень похоже на оформление металлического элемента из прошлого раздела:

Мы задаем довольно широкую прозрачную рамку вокруг кнопки, чтобы нам хватило места для создания этой тени в нижней части рамки. Делаем это для всех сторон рамки, а не только для нижней, потому что нам нужно, чтобы все углы у padding-box закруглялись одинаково и симметрично (если вам нужно освежить в памяти, как это работает, посмотрите потрясающий доклад о border-radius Лии Веру).

Первый background наверху — это conic-gradient() для создания металлического отлива. Он обрезан по content-box . Прямо под ним у нас linear-gradient() , обрезанный по padding-box . Мы используем три внутренние тени, чтобы сделать этот второй фон менее плоским — добавляем еще один оттенок вокруг него с нулевым размытием, осветляем его вверху полупрозрачной белой тенью и затемняем внизу полпрозрачной черной тенью.

Это дает нам металлическую кнопку (пока без тени):

Для тени добавим третий слой фона, для которого мы зададим обоим свойствам background-clip и background-origin значение border-box . Этим фоном будет неповторяющийся radial-gradient() , положение которого мы привяжем к bottom (а по горизонтали к середине) и который мы сожмем по вертикали так, что он поместится внутри нижней стороны рамки и даже еще немного места останется — пусть он будет размером, скажем, где-то .75 от значения border-width .

И всё! Можете поиграть с этими кнопками в следующем примере на CodePen:

Для свойства background-clip наверняка найдётся множество применений! Особенно при наложении разных эффектов по краям элементов.

Похожие публикации:

1. Как выровнять текст по центру css
2. Как двигать блоки в css
3. Как убрать обводку у select css
4. Как убрать подчеркивание ссылки в css

Обрезать border

Как обрезать border? Совсем не нашёл информации. На изображении пример, обрезать может понадобиться и больше.

.round

Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 14 июл 2021 в 10:32
3,676 8 8 золотых знаков 53 53 серебряных знака 137 137 бронзовых знаков
clip-path: polygon(. )
14 июл 2021 в 21:50
Хм.. В вопросе обрезка рваная, а во всех ответах просто убирается кусок границы.
14 июл 2021 в 21:51

@Qwertiy, полагаю, что автор воспользовался инструментом «ластик» в какой-то проге вроде редактора скриншотов, причем радиус инструмента оставил минимальным)) А пытался он зачистить только границу и ровно четверть ее с 9:00 до 12:00))

15 июл 2021 в 4:09
@Leonid, но я когда открыл вопрос, ожидал такие же ответы увидеть, а там ничего нет 🙁
15 июл 2021 в 10:27

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Прямо так, как на скриншоте, т.е. рваный край? Тогда SVG и маскирование в помощь. Если просто часть окружности (сегмент), то тогда так:

.round

Если ориентироваться только на современные браузеры, то код можно немного сократить, используя градиенты и, при этом, угол может быть произвольным:

.round

Отслеживать
ответ дан 14 июл 2021 в 10:39
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак

Спасибо большое. Скажите, пожалуйста, а как обрезать больше? Я поигрался со значениями и что-то не так просто это

14 июл 2021 в 10:43

@ModaL: если четвертями вырезать, то применить аналогично к border-left и др. Если произвольный размер, то посложнее будет — это уже гуглить радиальный прогресс-бар.

14 июл 2021 в 10:48

SVG решение

Используется две окружности:

Первая окружность это чёрный фон и при радиусе равном 100px у второй окружности при ширине обводки stroke-width=»10″ радиус выбираем равным 95px , чтобы края окружностей совпали. Известно, что строка симметрично располагается относительно своей центральной оси. 5px внутрь, 5px снаружи.

Поэтому внешний край внутренней окружности сольется с первой, чёрной окружностью. (95+5=100px)

Обводка внутренней окружности будет показана не полностью, так как у sstroke- dasharray=»447.45,149.15″ длина черты равна 447.45, а пробел равен 149,5 .

Длину обводки можно увеличивать, уменьшать, при желании попиксельно, изменяя параметры stroke-ddasharray:

Анимация стирание линии

при анимации пробел достигает максимума = 596.6

values=" 447.45,149.15; 0, 596.6" 

Анимация рисования линии

values=» 0,596.6; 447.45,149.15″

Изменение положения линии

Против часовой стрелки

Изменяются параметры stroke-dashoffset, то есть изменяется начальное положение отступа

По часовой стрелке

Как обрезать фон в css

Удаление фона на изображениях

Автоматически на 100% и бесплатно

Удаляйте фон автоматически на 100% за 5 секунд без единого клика мышью

В мире есть около 20 миллионов более интересных занятий, чем удаление фона вручную.

Благодаря умному ИИ сайта remove.bg вы можете сократить время на редактирование и получить больше удовольствия!

Интеграция с вашим рабочим процессом

Мы создали утилиты и плагины для самых популярных дизайнерских программ, сайтов eCommerce и компьютерных рабочих сред. Чтобы повысить цифровую эффективность вашего собственного рабочего процесса, используйте наш API!

Все плагины и файлы для загрузки

Повышайте креативность — и эффективность!

Хотите ли вы сделать умопомрачительные поздравительные открытки для вашей лучшей подруги или обработать тысячи фотографий автомобилей практически за одно мгновение — remove.bg сделает это за вас.

Фон — Основы верстки контента

Верстальщик довольно часто сталкивается с необходимостью стилизовать не только конкретные элементы, такие как таблицы, списки, текст, медиаэлементы, формы. Порой нужно также стилизовать и блоки, внутри которых они находятся. На сайтах встречаются фоновые изображения, градиенты, цветовые подложки. Для их создания используется свойство background , которое может применяться как ко всей странице, так и к небольшим блокам.

Свойство background является обобщенным для 8 свойств:

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

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

Данная особенность влечет за собой также определенные удобства: создавая свой компонент, можно установить нужные свойства через обобщенные свойства. Это позволяет добиться удобного переиспользования background , так как предыдущие свойства не повлияют на наш компонент.

Установка цвета или изображения

Базовой функцией свойства background является установка фонового цвета или фонового изображения. Для этого используются свойства:

• background-color — установка фонового цвета
• background-image — установка фонового изображения или градиента

Для установки цвета может использоваться различная запись: шестнадцатеричная; с помощью функций rgb() , hsl() и других. В конце урока будет оставлена ссылка на сайт, где можно выбрать любой цвет и получить его код для установки в качестве значения свойства background-color

Обратим внимание, что фон может быть установлен как для всей страницы, так и для отдельных ее частей. Например, для выделения слова в предложении. В реальных проектах будут встречаться именно такие, «точечные» установки фона, особенно при использовании градиентов.

Одновременно с фоном возможно установить и изображение, используя свойство background-image . Оба свойства не зависят друг от друга, поэтому можно установить и фоновый цвет и изображение, или установить только что-то одно.

В качестве значения background-image принимает функцию url() . Похожий принцип используется при подключении шрифтов на страницу.

Может показаться, что результат такой же, как и при использовании тега . Однако есть важное отличие: при использовании background-image изображение не находится в HTML и не участвует в формировании размеров блоков.

В примере выше для блока с классом image установлено не только изображение, но и заданы размеры с помощью свойств width и height . Без них изображение пропадет со страницы, так как, фактически, блок будет являться пустым.

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

Особенность использования background-image заключается в возможности задать сразу несколько фоновых изображений. Для этого достаточно указать их через запятую:

background-image: url("path_to_image_1"), url("path_to_image_2"); 

Используя такой способ можно накладывать одни изображения на другие. Выводиться они будут в том порядке, в котором указаны внутри свойства — первое изображение будет выше второго, второе выше третьего и так далее.

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

CSS позволяет управлять тем, будет ли браузер клонировать изображение, и, если да, то по какому направлению. За это отвечает свойство background-repeat . Оно принимает одно из следующих значений:

• repeat — Значение по умолчанию. Копировать изображение по всем направлениям, пока это позволяет пространство
• repeat-x — Копировать только по горизонтали
• repeat-y — Копировать только по вертикали
• no-repeat — Не копировать
• round — Копировать с возможностью сжатия, чтобы уместить максимальное количество копий. Это значение используется редко, так как приводит к деформации изображения
• space — Копировать максимальное количество изображений без их обрезки. В начале копии располагаются в крайних точках, а потом равномерно располагаются в остальных частях блока. При этом возможны пробелы между копиями

Размер изображения

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

Однако не всегда мы можем угадать, какого размера нужно изображение. Это зависит от множества факторов, например:

• Разрешение экрана пользователя
• Адаптивность проекта
• Интерактивность, когда пользователь может взаимодействовать со страницей и от этого меняются некоторые ее части

При таких условиях может понадобиться одно изображение, которое, в то же время, будет подстраиваться по размеру под «реалии» страницы. Для этого существует свойство background-size , которое принимает два значения:

• Ширина изображения
• Высота изображения

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

В этом примере очень важно перейти на сам CodePen и попробовать разные размеры ширины браузера. Обратим внимание на размеры левого изображения — оно всегда будет занимать 30% от ширины блока, даже если изображение выходит за границы блока. При этом всегда сохраняются исходные пропорции. Правое изображение имеет фиксированные значения, которые не будут меняться при изменении ширины страницы.

Свойство background-size имеет два зарезервированных значения:

• cover — Изображение масштабируется так, чтобы занять весь блок. В этом случае изображение может быть обрезано
• contain — Изображение масштабируется так, чтобы максимально покрыть область блока, но не обрезать само изображение

Такие значения можно встретить при создании верхних секций на сайте, где есть фоновое изображение на всю ширину экрана

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

Еще одно свойство, которое влияет на размер изображения — background-origin . Его действие похоже на свойство box-sizing , которое отвечает за то, как браузер обрабатывает внутренние отступы и границы блока.

Свойство background-origin определяет, будет ли фоновое изображение располагаться на внутренних отступах или границах. Свойство принимает одно из значений:

• border-box — фоновое изображение рисуется на всем блоке, включая внутренние отступы и границы
• padding-box — значение по умолчанию. Фоновое изображение рисуется в области блока и его внутренних отступов, но не учитывается размер границ, заданных свойством border
• content-box — фоновое изображение рисуется не по всему блоку, а по области контента внутри него

Взглянем на пример:

Видно, что изображения все равно накладываются на границы, например при значении padding-box , хотя ожидался другой эффект. Этот выход на границы связан с тем, что браузер не обрезает изображения, а граница не является сплошной.

Здесь поможет свойство background-clip , задача которого — точно определить, как обрезать изображение при его выходе за пределы блока. Как и background-origin , свойство принимает одно из трех значений:

• border-box — обрезать по внешним границам элемента
• padding-box — обрезать по границам внутренних отступов
• content-box — обрезать по границам контента

Еще одно значение — text , которое до сих пор является экспериментальным, и предполагает обрезку изображения по границам текста. Со временем поддержка станет полной и значение можно будет использовать без опасения. Оно добавлено в пример, но может сработать некорректно в другом окружении.

Важно: свойство background-clip влияет не только на фоновое изображение, но и на фоновый цвет, установленный с помощью свойства background-color

Позиционирование фонового изображения

Осталось два свойства из набора свойства background . Это:

• background-position — позиционирование/расположение фона внутри блока
• background-attachment — прокрутка фона вместе с контентом

По умолчанию все изображения появляются относительно левого верхнего угла блока, но зачастую изображение нужно расположить в другой точке. Для этого используется свойство background-position . Его синтаксис достаточно запутанный, поэтому начать стоит с предустановленных значений, которые покрывают существенную часть задач:

• top — расположить фон в центре и прижать к верхнему краю
• left — расположить фон в центре и прижать к левому краю
• right — расположить фон в центре и прижать к правому краю
• bottom — расположить фон в центре и прижать к нижнему краю
• center — расположить фон в центре

Такое же поведение можно задать, используя значения для координат x и y. Например, чтобы воспроизвести поведение значения top , нужно по оси x указать значение в 50%, а для оси y значение 0 . В качестве единиц измерения можно использовать любые ранее изученные единицы: px , em , % и так далее.

.bg  /* Эквивалентно background-position: top */ background-position: 50% 0; > 

Также в качестве значений для осей x и y можно указывать уже изученные ключевые слова: top , right , bottom , left и center . Это помогает сделать CSS более выразительным и читаемым.

Последним свойством является background-attachment . Иногда фоновое изображение является ключом ко всему контенту, и мы как разработчики хотим, чтобы оно всегда находилось в поле видимости пользователя, даже при прокрутке. Или наоборот — фон фиксировался только в том месте контента, где это нужно.

Свойство background-attachment позволяет контролировать такое поведение. Для этого устанавливается одно из значений:

• scroll — значение по умолчанию. Фоновое изображение располагается в соответствии со свойством background-position . При этом оно фиксируется в области и не пропадает при скролле контента
• fixed . У этого значения есть хитрость: позиционирование происходит не относительно блока, где было установлено свойство background , а относительно всей страницы целиком. Однако видимо оно будет только в рамках того блока, где был установлен фон. Такое поведение иногда неочевидно, поэтому значение используется редко
• local — изображение фиксируется в определенной точке относительно контента. В примере ниже таким контентом является текст, поэтому фоновое изображение находится ровно по его центру, так как свойство background-position имеет значение center

Порядок записи свойств в background

После изучения всех доступных свойств осталось узнать о том, в каком порядке они записываются в обобщенном правиле background и какие свойства обязательны.

Все свойства могут записываться в любом порядке. Есть небольшие исключения, но они слишком глубоко уходят в теорию построения фонов и будут разбираться по ходу курсов там, где в этом возникнет необходимость.

Обязательное требование к записи — совместная запись свойств background-position и background-size . Для их записи используется символ / и позиционирование обязательно стоит до размеров. Вот как это выглядит в реальном CSS файле:

.element  background: url("../assets/images/hexlet.png") center / 0.5rem no-repeat #288cff; > 

В этой записи установлены следующие свойства:

• background-image: url(«../assets/images/hexlet.png»)
• background-position: center
• background-size: 0.5rem
• background-repeat: no-repeat
• background-color: #288cff

Все свойства, которые не указаны, будут приведены в значение по умолчанию, что удобно при создании своих собственных компонентов.

В этом уроке мы познакомились со свойствами, составляющими обобщенное свойство background :

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях: