Box-shadow: blur & spread
Используя свойство box-shadow, чаще всего указывают всего три параметра: смещение по X, смещение по Y и размер размытия (blur). При этом незаслуженно забывая ещё об одном параметре — spread.
В разных мануалах, его называют по-разному — распространение или сжатие — скорее всего, это потому, что параметр может принимать, как положительные значения, так и отрицательные, в зависимости от задач. А также потому, что например, в Chrome этот параметр нельзя выставить меньше нуля нативным средством в инспекторе стилей (хотя, прописав значение вручную, всё прекрасно отображается и работает, если не двигать ползунок):

Так что же делает этот параметр? Интерактивный пример, расставляет всё по местам:
.controls{display:flex;justify-content:space-around;text-align:center}.controls input{display:block}:root{--cx:0;--cy:0;--sb:50px;--ss:0}.example{margin:15px auto;width:350px;height:70px;line-height:70px;text-align:center;box-sizing:border-box;border:4px solid #fa0;background-color:rgba(255,255,255,0);box-shadow:var(--cx) var(--cy) var(--sb) var(--ss) rgba(0,0,0,0.5)}
<div class="controls" oninput="document.querySelector('.example').innerText=getComputedStyle(document.querySelector('.example')).boxShadow;"> <div>offset_X (-n...n)<input type="range" min="-100" max="100" oninput="document.documentElement.style.setProperty('--cx', this.value + 'px');">смещение по X</div><div>offset_Y (-n...n)<input type="range" min="-100" max="100" oninput="document.documentElement.style.setProperty('--cy', this.value + 'px');">смещение по Y</div><div>blur (0...n)<input type="range" min="0" max="100" oninput="document.documentElement.style.setProperty('--sb', this.value + 'px');">размытие</div><div>spread (-n...n)<input type="range" min="-100" max="100" oninput="document.documentElement.style.setProperty('--ss', this.value + 'px');">распространение</div></div><div class="example">rgba(0, 0, 0, 0.5) 0px 0px 50px 0px</div>
Подведём итоги наблюдений:
- Смещения — могут быть, как положительными, так и отрицательными;
- Размытие — это не размер тени, хотя и влияет на её размер визуально. Размытие как бы смазывает границу тени. Может принимать только положительное значение;
- Распространение — это размер тени, относительно блока, который её отбрасывает. Может принимать, как положительные, так и отрицательные значения. Отрицательное значение не может быть меньше половины меньшего из размеров блока. Например, если height блока 70px, то при значении spread меньше -34px тень просто схлопнется (70 / 2 - 35 = 0). При этом, исчезнет и её размытие, каким бы большим оно ни было, т.к. размывать нечего.
После небольшого отступления в теорию, переходим к ответу на вопрос:
body {
background-color: #d4ebf7;
}
.sticky,
.sticky_right {
/* Здесь добавил и изменил стили только для сниппета */
width: 18rem;
float: left;
margin: 3px;
}
/**********************
* Исправленный стикер *
**********************/
.sticky div {
position: relative;
background-color: #FFFFCC;
padding: 1rem 2rem;
}
.sticky div:before {
content: '';
position: absolute;
top: 0;
right: 0;
z-index: 1;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #FFFF99 #fff;
box-shadow: -1px 2px 2px -1px rgba(0, 0, 0, 0.3);
}
.sticky div:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
box-shadow: -2px 3px 3px -1px rgba(0, 0, 0, 0.3);
}
/********************
* Правильный стикер *
********************/
.sticky_right div {
position: relative;
/* Фон изменён со сплошного на градиент */
background-image: linear-gradient(225deg, transparent 10px, #FFFFCC 10px);
padding: 1rem 2rem;
}
.sticky_right div:before {
content: '';
position: absolute;
top: 0;
right: 0;
z-index: 1;
border-width: 0 16px 16px 0;
border-style: solid;
/* Цвет изменён с белого на прозрачный */
border-color: #FFFF99 transparent;
box-shadow: -1px 2px 2px -1px rgba(0, 0, 0, 0.3);
}
.sticky_right div:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
box-shadow: -2px 3px 3px -1px rgba(0, 0, 0, 0.3);
}
<div class="row">
<div class="col-12 col-sm-12 col-md-4">
<div class="sticky">
<div>
<h3>Some text here</h3>
<p>Phone: 322 223</p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<div class="sticky_right">
<div>
<h3>Some text here</h3>
<p>Phone: 322 223</p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
</div>
</div>
Алгоритм прост, изменения минимальны:
:before
— в свойстве box-shadow
с помощью параметра spread уменьшаем размер тени, но при этом сдвигаем тень ещё больше, в том же направлении, куда она была сдвинута ранее. Добавляем положительный z-index
, на всякий случай.
:after
— добавляем. Выравниваем по левому и нижнему краю. Растягиваем по размерам родителя. Позиционируем с помощью отрицательного z-index
за блоком. С box-shadow
проводим те же манипуляции, что и с предыдущим блоком — уменьшаем тень четвёртым параметром и сдвигаем влево вниз.
Таким образом, за счёт смещений, тень осталась на своём месте, но из-за отрицательного распространения, стала меньше и спряталась под основной блок на противоположных от направления смещений краях.
PS Т.к. была замечена, на мой взгляд, ещё одна недоработка — непрозрачность в месте отгиба — добавил рядом ещё вариант для сравнения. Кроссбраузерность напрямую зависит от поддержки linear-gradient
.