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

Question

[75db77]

У изображения должен быть border красного цвета. Также визуально за изображением должен быть ещё один border без background, смещенный относительно изображения влево и вниз (скриншот). Как бы вы реализовали смещенный border?

Разметка возле изображения такая:

<div class="field__item">
  <picture>
    <source ...>
    <img ...>
  </picture>
</div>

Я не могу изменять разметку, потому что она генерируется CMS.

Comments

[Ankhena]

Тени, псевдоэлементы..
Что именно у вас не вышло?

[75db77]

Ankhena, я просто думаю как лучше с точки зрения responsive сделать это. Или прописывать border родителю field__item или прописывать border в псевдоэлемент <img>.

[Антон Антон]

вообще пофигу. и причем тут responsive?

[Ankhena]

75db77, адаптиву вообще без разницы

Answer 1

[Ankhena]

Для однородного фона просто рамка + двойная тень

picture, source {
  display: contents;
}

img {
  border: 2px solid red;
  box-shadow: -10px 10px 0 -2px white, -10px 10px 0 0 red;
}

Преимущество в том, что всё задается одному элементу, прямо картинке. Нет ни сдвигов ни зависимостей от других элементов.

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

Ещё один вариант: небольшая svg и border-image.

p.s. picture и source удобно убирать с помощью display contents, чтобы не тревожится, будут у клиента эти теги или удалит и что там вообще с ними происходит. Просто делаем их "прозрачными".

Comments

[Ankhena]

Никита Серебряков зачем вы меня сюда зовете? Что-то не понятно в ответе?

Answer 2

[Пума Тайланд]

у меня такое через ::after на враппере делается:

.field__item { position: relative; display: inline-block; z-index: 0; }
.field__item::after { content: '\; position: absolute; inset: 0; border: 2px solid red; transform: translate(-12px, 12px); z-index: -1; }
.field__item img { border: 2px solid red; display: block; }

translate(-12px, 12px) — смещение влево и вниз, подбери под свой дизайн.

Comments

[Пума Тайланд]

p.s. в коде опечатка: content: '' должно быть двумя одинарными кавычками (пустая строка)

Answer 3

[Антон Антон]

https://codepen.io/FragsterAt/pen/MYbEELJ

Answer 4

[Никита Серебряков]

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

.field__item {
    position: relative;
    display: inline-block;   /* Чтобы размер контейнера соответствовал изображению */
}

/* Убираем лишние отступы у picture и img */
.field__item picture,
.field__item img {
    display: block;
}

/* Основная рамка изображения – красная */
.field__item img {
    border: 2px solid red;
    position: relative;
    z-index: 1;
}

/* Смещённая рамка (вторая) – псевдоэлемент */
.field__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid red;       /* Тот же цвет, что у основной рамки */
    background: transparent;
    transform: translate(-10px, 10px);  /* Смещение влево и вниз */
    z-index: 0;
    pointer-events: none;         /* Чтобы рамка не мешала кликам по изображению */
}

Comments

[Ankhena]

Ну, раз уж позвали, прокомментирую.

Мало чем отличается от двух ответов выше.

Чтобы размер контейнера соответствовал изображению

Для этого лучше width: fit-content, а не рушить сетку. Тем более мы вообще не в курсе окружения этого блока.

Убираем лишние отступы у picture и img

У picture отступов и не было никогда.
Для picture и source выгоднее задавать display contents. На доступность в данном случае никак не влияет, а от проблем с шаловливыми ручками избавляет.

z-index: 1;

Формально это лишний код. Для img достаточно того, что есть position: relative, но для очевидности происходящего не грех и оставить.

top: 0;
left: 0;
width: 100%;
height: 100%;

Заменяется на одну строку inset 0
Либо вообще гридами. Тогда и с блоками и релативами и z-index'ами ещё и попроще будет.

background: transparent;

Он и так прозрачный у псевдиков

pointer-events: none;

Это отличная строчка, о которой многие забывают.

transform: translate(-10px, 10px);

Тоже супер, что смещение у псевдика, а не у картинки.

[Ankhena]

Но вообще больше похоже на ответ нейронки. Но тут уже Пума с ними.