Как сделать border, вокруг дочерних элементов?

Question

[hudiakov]

Как можно на js или css добиться такого эффекта, интересует зеленый бордер

Comments

[Михаил Р.]

Давайте попробуем добавить скрин еще раз?

[hudiakov]

Михаил Р., Добавил.

[szQocks]

hudiakov, просто нижнему блоку задай отрицательный маджин ( вверх который равен ширине бордер ) и паддинг ( который равен гапу ), ну и верхний бордер у него не отрисовывай

[Ankhena]

Как вариант filter: drop-shadow(0 0 1px red); для родителя. Возможно, потребуется несколько теней для минимизации размытия.

[hudiakov]

szQocks, Не понял, можно код, что вы имеете ввиду?

[szQocks]

hudiakov, https://codepen.io/kapysta-xxl/pen/qBwRooY

как-то так, но чёт там плохо отображается, но суть я думаю там понятна, если мастабировать, то оно нормально отобразиться, это видимо баг у codepen я хз

[szQocks]

hudiakov, кстати Ankhena неплохой вариант посоветовала, немного подкорректировать как-нибудь и нормально выйдет, она всё же на большем опыте чем я, и уже натренировалась там во всю с этим css

я вообще этот filter: drop-shadow, только для картинок применял) даже в голову не приходило для блока применить

[szQocks]

hudiakov, там у меня кстати вообще блоки выпали

[hudiakov]

szQocks, Если можно, сбросте пример кода, что то не понимаю как его использовать.

[szQocks]

hudiakov,

<div class="wrapper">
  <div class="block">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="block">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

*{
  box-sizing: border-box;
}

.wrapper{
  margin: 50px auto;
  width: min-content;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 0  1px red);
}

.block{
  height: 100px;
  display: flex;
  width: min-content;
  gap: 0 10px;
  background: #fff;
}

.block:last-child{
  padding-top: 10px;
  border-top: none;
}

.element{
  width: 100px;
  height: 100%;
  border: 1px solid gray;
}

[hudiakov]

szQocks, Спасибо, это не совсем то что мне нужно, этот вариант подошел если бы если бы верстка была фиксированная, но так на каждом разрешение, будет разное количество подкатегорий в категории.
Например, на десктопе их по 5 в линию, на планшете по 3 и остальные должны перемещаться в. т.е. обертка у них одна.
Походу без js, тут не сделать.

[szQocks]

hudiakov, да лучше через js, потому что я думаю что не выйдет через один блок сверстать этот зеленый бордер, либо этот бордер вообще через js отрисовывать, можно кстати у Ankhena спросить, Ankhena - есть у вас мысли по поводу этой задачи ? ( в плане адаптива )

[szQocks]

hudiakov, хотя я чуть чуть изменил пример, может это как-то поможет с адаптивом, там где я ссылку скидывал

[szQocks]

hudiakov, в общем удачи в реализации

[szQocks]

Ankhena, ???)))

[Ankhena]

szQocks, не поняла, что я должна сделать?

[szQocks]

Ankhena, есть ли мысли у вас, по поводу адаптива к этому блоку, который в вопросе ? ничего делать не надо, ничего вы не должны)

[Ankhena]

szQocks, тут "должна" было в мягком смысле и без претензий :)

А что с адаптивом? Ну поместится другое количество блоков в строке. Для drop-shadow это не помеха.
Я пока не вижу проблемы.

[szQocks]

Ankhena,

Ну поместится другое количество блоков в строке

я написал решение - где не сетка через гриды например, которая может адаптироваться, у меня там получается вложенные блоки, и так просто из блока в блок через css не выйдет перекинуть квадратик, об этом автор хотел уточнить у меня, но у меня ответов нет которые бы подсказывали о том - как это реализовать через css, возможно есть у вас, вот и спрашиваю)

[szQocks]

Ankhena, есть ли варианты решения, но с другой структурой, не той которая у меня, попроще ?

например

<div class="wrapper">
  <div class="block">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
  <div class="block">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

есть ли идеи о том как реализовать этот бордер, если тут не будет например блоков с названием .block а просто будут идти элементы

то есть что бы было вот так

<div class="wrapper">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

[Ankhena]

szQocks, да, всё верно, вот так

<div class="wrapper">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>
гриды, флексы, что там удобнее и drop-shadow

Покажите, что у вас не получается при таком варианте?

[hudiakov]

Ankhena, https://codepen.io/Alex-Miranovich/pen/GRLmqgy

[Ankhena]

hudiakov,

https://codepen.io/Alex-Miranovich/pen/GRLmqgy

Ну логично. Вы задали drop-shadow для wrappera. Внутри него block с непрозрачным фоном. block занимает всю площадь wrapper'а => тень рисуется прямоугольная вокруг непрозрачной зоны.

drop-shadow - обертке элементов, сейчас это block. Просто попадите свойствами в нужный селектор

.block{
  display: flex;
  flex-flow: row wrap;
  filter: drop-shadow(0 0  1px red);
}

.element{
  width: 25%;
  height: 100px;
  border: 1px solid gray; 
  background: #fff;
}

[szQocks]

Ankhena, спасибо разобрался, ща попробую написать решение автору готовое

[szQocks]

hudiakov, там просто нужно убрать gap, и сетку делать на флексах, с вложенными блоками которые нахоидились бы внутри блоков с классом .element

[szQocks]

hudiakov, попробовал я разные решения, это самое более менее простое скорее всего) https://codepen.io/kapysta-xxl/pen/oNOWxrY

[hudiakov]

szQocks, Спасибо большое.

[szQocks]

hudiakov, там конечно есть какой-то отступ непонятный мне, и там надо из нескольких теней сделать одну что бы получилось менее расплывчато, как и посоветовала Ankhena )

[szQocks]

hudiakov, а хотя нет, всё норм ну кроме тени