Как сделать с помощью css обводку вокруг этой картинки, или же как создать такую форму с помощью css?
Есть две картинки-фона (свг). У них разные формы (неровные грани что ли). В обычном состоянии она с красной обводкой, а при наведении с белой. Не могу понять как так сделать с помощью clip-path или border-image. 
Отслеживать
задан 11 апр 2021 в 10:02
89 6 6 бронзовых знаков
чем svg не устраивает ?
11 апр 2021 в 10:04
svg как раз для этого нужен — не стандартные формы, анимации и прочее вместо кучи кода в css c линейными градиентами
11 апр 2021 в 10:06
я как раз не могу понять как с свг сделать
11 апр 2021 в 10:11
path d=»» внутри между кавычками пишутся координаты но что бы не вникать в случае если у вас разовая задача то можете открыть illustrator и просто обвести эту фигуру и сохранить как svg
11 апр 2021 в 10:12
codepen.io/topicstarter/pen/xxgYbpK при ховере что угодно можно сделать
11 апр 2021 в 10:28
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
По просьбе автора вопроса — вариант CSS.
Такую рамку можно попробовать воспроизвести только с помощью градиентов, и это довольно просто. Один только минус — код получается великоватым. Залить готовую фигуру одним цветом с помощью градиентов также не сложно. Однако, в вопросе по картинке можно определить, что у заливки есть прозрачность. И вот здесь тогда уже возникают небольшие трудности — сделать это конечно возможно, но слишком трудоемко, и такая реализация не стоит затраченного времени. Вот пример с полностью готовой рамкой и для демонстрации частично залитым полупрозрачным цветом:
body span div < display: flex; justify-content: center; align-items: center; width: 300px; height: 300px; background: /*в 40 20 - 240*/ linear-gradient(180deg, red, red 2px, transparent 2px, transparent 100%), /*л 40 50 - 210*/ linear-gradient(90deg, red, red 2px, transparent 2px, transparent 100%), /*пв 20 150 - 130*/ linear-gradient(270deg, red, red 2px, transparent 2px, transparent 100%), /*пн 30 30 150 - 110*/ linear-gradient(270deg, red, red 2px, transparent 2px, transparent 100%), /*нн 30 30 150 - 110*/ linear-gradient(0deg, red, red 2px, transparent 2px, transparent 100%), /*нв 30 20 150 - 100*/ linear-gradient(0deg, red, red 2px, transparent 2px, transparent 100%), /*увл*/ linear-gradient(-225deg, transparent 28px, red 28px, red 30px, transparent 30px, transparent 100%), /*увп*/ linear-gradient(-135deg, transparent 14px, red 14px, red 16px, transparent 16px, transparent 100%), /*уп*/ linear-gradient(-225deg, transparent 316px, red 316px, red 318px, transparent 318px, transparent 100%), /*унп*/ linear-gradient(-45deg, transparent 28px, red 28px, red 30px, transparent 30px, transparent 100%), /*унл*/ linear-gradient(45deg, transparent 28px, red 28px, red 30px, transparent 30px, transparent 100%), /*унц*/ linear-gradient(45deg, transparent 28px, red 28px, red 30px, transparent 30px, transparent 100%), /*bg*/ linear-gradient(-225deg, transparent 30px, rgba(20,40,140,0.4) 30px, rgba(20,40,140,0.4) 178px, transparent 178px, transparent 100%); background-size: 240px 100%, 100% 210px, 100% 130px, 100% 110px, 110px 100%, 100px calc(100% - 20px), 100% 100%, 100% 100%, 100% 169px, 20px 100%, 30px 100%, 20px 100%, 100% 100%; background-position: 40px 0, 0 40px, 0 20px, -20px 169px, 150px 0, 30px 0, 0 0, 0 0, 0 0, calc(100% - 20px) 20px, 0 calc(100% - 10px), 130px 20px, 0 0; background-repeat: no-repeat; >Какой-то текстЧтобы решить вопрос по заливке фигуры полупрозрачным цветом, можно добавить еще один элемент и воспользоваться свойством clip-path: polygon() . С помощью этого свойства мы «обрежем» фигуру нужной нам формы и зальем ее цветом. Вот что у нас получилось:
body span .item < display: flex; width: 300px; height: 300px; background: /*в 40 20 - 240*/ linear-gradient(180deg, red, red 2px, transparent 2px, transparent 100%), /*л 40 50 - 210*/ linear-gradient(90deg, red, red 2px, transparent 2px, transparent 100%), /*пв 20 150 - 130*/ linear-gradient(270deg, red, red 2px, transparent 2px, transparent 100%), /*пн 30 30 150 - 110*/ linear-gradient(270deg, red, red 2px, transparent 2px, transparent 100%), /*нн 30 30 150 - 110*/ linear-gradient(0deg, red, red 2px, transparent 2px, transparent 100%), /*нв 30 20 150 - 100*/ linear-gradient(0deg, red, red 2px, transparent 2px, transparent 100%), /*увл*/ linear-gradient(-225deg, transparent 28px, red 28px, red 30px, transparent 30px, transparent 100%), /*увп*/ linear-gradient(-135deg, transparent 14px, red 14px, red 16px, transparent 16px, transparent 100%), /*уп*/ linear-gradient(-225deg, transparent 316px, red 316px, red 318px, transparent 318px, transparent 100%), /*унп*/ linear-gradient(-45deg, transparent 28px, red 28px, red 30px, transparent 30px, transparent 100%), /*унл*/ linear-gradient(45deg, transparent 28px, red 28px, red 30px, transparent 30px, transparent 100%), /*унц*/ linear-gradient(45deg, transparent 28px, red 28px, red 30px, transparent 30px, transparent 100%); background-size: 240px 100%, 100% 210px, 100% 130px, 100% 110px, 110px 100%, 100px calc(100% - 20px), 100% 100%, 100% 100%, 100% 169px, 20px 100%, 30px 100%, 20px 100%; background-position: 40px 0, 0 40px, 0 20px, -20px 169px, 150px 0, 30px 0, 0 0, 0 0, 0 0, calc(100% - 20px) 20px, 0 calc(100% - 10px), 130px 20px; background-repeat: no-repeat; >.item>div
Какой-то текстДобавим эффект при наведении:
body span .item < display: flex; position: relative; justify-content: center; align-items: center; z-index: 1; width: 300px; height: 300px; background: rgba(20,40,140,0.4); clip-path: polygon(40px 0, 280px 0, 300px 20px, 300px 150px, 280px 170px, 280px 280px, 260px 300px, 150px 300px, 130px 280px, 30px 280px, 0 250px, 0 40px); >.item::before .item::after .item:hover::before < filter: blur(1px); transition: all linear 0.5s; >.item:hover::after
Какой-то текстОбводка белого цвета при наведении получилась правда с мелкими дефектами на стыках, поэтому нужна точная подгонка, а на это требуется больше времени. Но, думаю, автор вопроса сможет дальше разобраться самостоятельно, ничего сложного в этом нет.
UPD/ Поправил мелкие дефекты. Максимально постарался приблизить эффект при наведении на тот, что на картинке. Получилось не идеально, но автор извиняй, лучше всего для создания подобных фигур все же воспользоваться SVG.
body .item < display: flex; position: relative; justify-content: center; align-items: center; z-index: 1; width: 320px; height: 320px; clip-path: polygon(40px 0, 300px 0, 320px 20px, 320px 160px, 300px 180px, 300px 300px, 280px 320px, 160px 320px, 140px 300px, 30px 300px, 0 270px, 0 40px); >.item::before .item::after .item:hover::before < filter: blur(3px); transform: scale(1.03); transition: all linear 0.2s; >.item:hover::after < opacity: 1; >span
Какой-то текстРамка вокруг изображений
Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рис. 1 продемонстрирована фотография с паспарту.
Рис. 1. Пример паспарту
Как сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?
За изменение стиля элемента при наведении на него указателя мыши отвечает псевдокласс :hover . Для управления стилем ссылок этот псевдокласс добавляется к селектору A через двоеточие.
Как изменить цвет рамки вокруг изображения-ссылки?
Рамка вокруг изображения появляется в том случае, когда к тегу добавляется свойство border с ненулевым значением и при создании изображения-ссылки. При этом тег
хранится внутри контейнера . Независимо от ситуации цвет рамки устанавливается автоматически, однако через стили можно задать любой желаемый цвет границы.
Как убрать рамку вокруг изображений-ссылок?
Как добавить рамку к изображению?
Для добавления рамки вокруг картинки применяется стилевое свойство border , которое следует добавлять к селектору IMG . В качестве значения одновременно указывается толщина границы, ее стиль и цвет. Например, для создания сплошной рамки толщиной два пиксела красного цвета необходимо записать IMG .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как сделать рамку для картинки в html
Чтобы создать рамку для картинки в HTML, можно использовать CSS свойство border .
Например, чтобы создать рамку вокруг картинки, можно использовать следующий код:
src="my-image.jpg" alt="My Image" style="border: 1px solid black;"> В этом примере мы используем элемент img для отображения картинки и задаем ему свойство style , чтобы установить рамку. Стиль задает тип рамки (например, solid для сплошной рамки), а цвет определяет цвет рамки (например, black для черного цвета).
Заливка и обводка выделенных областей, слоев и контуров
Вы можете залить внутреннюю часть выделенной области, контура или слоя, используя цвет или узор. Можно также наложить цвет на внешнюю границу выделенной области или контура, что именуется обводкой.
Заливка с помощью инструмента «Заливка»
Инструмент «Заливка» позволяет выполнять заливку смежных пикселов, имеющих значение цвета, подобное тем пикселам, на которых выполнен щелчок.
Примечание.
Инструмент «Заливка» не может использоваться с изображениями в битовом режиме.
Выберите основной цвет. (См. раздел Выбор цветов в палитре инструментов.)
Выберите инструмент «Заливка» .
Примечание.
Инструмент «Быстрая заливка» объединен с инструментом «Градиент» в панели инструментов. Если не удается найти инструмент «Быстрая заливка», нажмите и удерживайте в нажатом положении инструмент «Градиент», чтобы получить к нему доступ.
Укажите, должна ли быть выполнена заливка выделенной области основным цветом или узором.
Укажите режим наложения и непрозрачность для краски. (См. раздел Режимы наложения.)
Введите допуск для заливки.
Допуск определяет, насколько подобным по цвету должен быть пиксел (по отношению к пикселу, на котором выполнен щелчок), чтобы к нему была применена заливка. Допустимые значения находятся в диапазоне от 0 до 255. При низком допуске происходит заливка пикселов цветами в диапазоне значений цветов, весьма подобных пикселу, на котором выполнен щелчок. При высоком допуске происходит заливка пикселов цветами в более широком диапазоне.
Чтобы сгладить края выделенной области, в которой выполнена заливка, установите флажок «Сглаживание».
Чтобы выполнить заливку только пикселов, смежных с тем, на котором был выполнен щелчок, выберите параметр «Смежные пикселы»; оставьте параметр «Смежные пикселы» невыбранным, чтобы была выполнена заливка всех подобных пикселов в изображении.
Чтобы выполнить заливку пикселов с учетом объединенных данных о цвете, относящихся ко всем видимым слоям, установите флажок «Все слои».
Щелкните часть изображения, в которой необходимо выполнить заливку. Ко всем указанным пикселам в пределах заданного допуска применяется заливка основным цветом или узором.
Если при работе с некоторым слоем необходимо избежать заливки прозрачных областей, то следует обязательно заблокировать прозрачность этого слоя на панели «Слои». (См. раздел Закрепление слоев.)