Как сделать рамку для изображения в css
Перейти к содержимому

Как сделать рамку для изображения в css

  • автор:

Сделать рамку css

введите сюда описание изображения

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

Отслеживать

задан 22 ноя 2021 в 15:18

Покажите ваш код?

22 ноя 2021 в 15:21

Ну раз необходимо сделать — сделайте. Кто мы такие, чтобы Вас останавливать)

22 ноя 2021 в 15:21

1 ответ 1

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

Самое сложное — это заставить себя победить лень. А остальное делается просто:

.border < position: relative; height: 140px; width: 300px; padding: 0.5em; overflow: hidden; box-shadow: 0 0 0 15px #000; >.border::before < content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; border-radius: 8px; box-shadow: 0 0 0 5px #000; pointer-events: none; >body < margin: 0; min-height: 100vh; background: 50% 50% / cover url('https://i.stack.imgur.com/tWGMC.jpg') no-repeat; display: grid; place-items: center; >
Необходимо сделать рамку с помощью CSS: внешняя граница - прямоугольник, внутренняя - скругленный прямоугольник.

Фон блока должен быть прозрачным.

Вариант с полосой прокрутки:

.border < position: relative; height: 140px; width: 300px; padding: 0.5em; overflow: hidden; box-shadow: 0 0 0 15px #000; >.border::before < content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; border-radius: 8px; box-shadow: 0 0 0 5px #000; pointer-events: none; >.text < position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0.5em 0em 0.5em 1.1em; overflow: hidden scroll; >.text::-webkit-scrollbar < width: 1em; background-color: #0000; >.text::-webkit-scrollbar-thumb < width: 1em; background: 0.25em 0.5em / 0.5em calc(100% - 1em) linear-gradient(90deg, #0002, #0002) no-repeat, 0.25em 0% / 0.5em 0.5em radial-gradient(circle at 50% 100%, #0002 0.25em, #0000 0.25em) no-repeat, 0.25em 100% / 0.5em 0.5em radial-gradient(circle at 50% 0%, #0002 0.25em, #0000 0.25em) no-repeat; >.text:hover::-webkit-scrollbar-thumb < background: 0.25em 0.5em / 0.5em calc(100% - 1em) linear-gradient(90deg, #000b, #000b) no-repeat, 0.25em 0% / 0.5em 0.5em radial-gradient(circle at 50% 100%, #000b 0.25em, #0000 0.25em) no-repeat, 0.25em 100% / 0.5em 0.5em radial-gradient(circle at 50% 0%, #000b 0.25em, #0000 0.25em) no-repeat; >body < margin: 0; min-height: 100vh; background: 50% 50% / cover url('https://i.imgur.com/pCm96IG.png') no-repeat; display: grid; place-items: center; >
 
Необходимо сделать такую рамку с помощью css, как на картинке, то есть внешняя граница - прямоугольник, внутренняя - скругленный прямоугольник. Это должна быть именно РАМКА, потому что ее нужно наложить сверху на другие элементы, поэтому в центре должно быть пустое место, чтобы другие элементы не перекрылись

Методы создания рамок при помощи HTML и CSS

У создателей сайтов часто возникают вопросы по улучшению его внешнего вида (интерфейса). Всевозможные картинки, иконки, рамки, линии, выделения цветом – незаменимые атрибуты профессионального контента. Разберем простые, но популярные методы оформления сайта, которыми пользуются топовые вебмастера.

Как сделать вертикальную линию HTML

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

  Добро пожаловать на сайт ИнетВинегрет  

Добро пожаловать на сайт ИнетВинегрет

Характеристики можно менять по своему усмотрению. Например, сплошную линию, solid, можно заменить на пунктирную (dotted), двойную (double), прерывистую (dashed), объемную вдавленную (inset), объемную выпуклую (outset), объемную рифленую выпуклую (ridge), объемную рифленую вдавленную (groove). М ожно изменить толщину линии, размер отступа и цвет границы, используя палитру цветов RGB.

Borderleft можно заменить на границу справа — borderright, bordertop – сверху, borderbottom – снизу, border – рамка вокруг текста. В этот код можно вставить изображение и отделить его рамкой или линиями.

Как создать вертикальную линию при помощи CSS

Если привычнее работать с CSS стилями, то для создания вертикальной линии присваивается класс для блока, а его свойства прописываются в CSS-файле.

HTML

  Добро пожаловать на сайт ИнетВинегрет  

CSS

.block-vert-line  border-left:3px solid blue; padding-left:15px; >

Добро пожаловать на сайт ИнетВинегрет

Варианты оформления рамок в HTML и CSS

Возможно воспользоваться встроенными стилями и получить рамку с фоном вокруг текста.

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

В стили добавили цвет фона backgroundcolor. Если нужно отрегулировать отступ самой рамки от других объектов, то необходимо вставить margin между тегами . Для выравнивания текста по центру рамки добавляется свойство text-align: center. В зависимости от того, с какой стороны нужно отступать, к свойствам margin и padding добавятся направления отступов:

  • top–сверху;
  • right–справа;
  • bottom–снизу;
  • left–слева.

Следующая рамка будет состоять из пунктирной линии (dashed).

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

Далее только заменяем dashed на dotted, double, groove, ridge.

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

Если хочется закругленную рамку, то вместо border, добавим border-radius и box-shadow.

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

Чтобы размыть границу рамки, нужно увеличить третью цифру box-shadow с 0 до 6px.

При желании сделать разноцветную рамку, следует добавить в box-shadow дополнительные значения с разными цветами.

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

Рамку можно сделать и в виде окружности.

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

Значения в border-radius можно менять. Первое число указывает на угол по вертикали, второе – по горизонтали.

Популярна рамка с цветом, меняющимся при наведении на нее курсором. Здесь используется свойство hover.

    .border_hover  border: 3px solid blue;  padding: 15px;  width: 500px;  height: 30px;  >  .border_hover:hover  border: 3px solid #F0F;  padding: 15px;  >    
Добро пожаловать в Инетвинегрет

Как можно создать вращающуюся рамку в css, которая будет обрезать изображение?

Само изображение и рамка выглядят таким образом.

Это должно выглядеть как на изображении ниже, но кроме того необходимо, чтобы при наведении эта рамка сложной формы вращалась на 360 градусов.(изображение животного имеет прямоугольную форму и размеры больше размеров рамки) Я пробовал это сделать следующим образом: 1)

HTML 
CSS .img-wrapper < width: 331.9px; background: url(assets/img/pets-in-zoo/img-wrapper.svg); overflow: hidden; >
HTML 
HTML .img-wrapper::before < width:100%; height: 100%; background: url(assets/img/pets-in-zoo/img-wrapper.svg) no-repeat center/cover; mix-blend-mode: screen; >``` этот способ я сам не понял, но попробовал, однако все так-же не работает. 

Сделать круглую рамку для картинки в CSS

Когда-то давно, один из моих «учителей жизни» сказал одну фразу, про программирование, которая оказалась актуальной не только для программирования, но и, например, для стилизации объекта. Звучала она так: «Тебе не надо знать весь язык программирования, и то, как правильно пишется функция, тебе надо знать, что программа может это сделать, а как именно ей написать, что она должна это сделать, потом найдёшь в Интернете», не дословно конечно, но суть примерно такова.

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

Мой код вставки сейчас выглядит так:

И здесь в style (я этого делать не стал), можно добавить ширину изображения, например, у меня «по умолчанию» голубь 500х500, а в Вашем случае, это может быть слишком много и тогда, можно сделать width:300px; опять же, если этого требует ситуация.

Текущее изображение квадратное, его конечно же можно «обрезать», например, в Adobe Photoshop, но так как речь идёт о работе в CSS, то начнём с того, что сделаем изображение «круглым», для этого добавим border-radius в style:

Теперь дело за «рамкой», её можно сделать при помощи теней, в таком случае наши стили станут выглядеть так:

Иногда ситуация требует вмешательства отступов, это всё решается путём «margin»’а (margin, margin-top, margin-left, margin-right, margin-bottom).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *