В этой статье как и в прошлой, эффект строится с помощью псевдоэлемента :after. Чтобы понять суть можете прочитать ту статью, там я схематично объяснял как это работает, тут повторятся не буду. В общем, все делается очень просто и настроить можно разные виды эффектов. В примере ниже, можно увидеть как я организовал 3 разных изгиба, внося минимальные изменения в код.
Начнем по порядку с первого, он самый базовый, а все остальные делаются исходя от него. Чтобы начать работу, Вам нужно определится какому блоку будет присвоен эффект, необычная тень. В нашем случаи, это будет блок - block_shadow.
<div class="block_shadow"> //Содержимое блока </div>
Далее ему попросту присваиваются стили и задается песевдоэлемент :after, для которого присваивают параметры, которые и сформируют тень необычного вида.
.block_shadow{
position:relative;
width:400px;
height:150px;
background:#f7f7f7;
}
.block_shadow:after{
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:50px;
right:50px;
-webkit-box-shadow:0 0 25px rgba(0,0,0,0.3);
-moz-box-shadow:0 0 25px rgba(0,0,0,0.3);
box-shadow:0 0 25px rgba(0,0,0,0.3);
-moz-border-radius:200px / 50px;
border-radius:200px / 50px;
}
Я сейчас распишу, что именно создает такой вид. Сначала, блоку присвоили позиционирование relative, потом ширину, высоту, и обязательно фон, даже если он будет у Вас белый. Потом присваиваем псевдоэлемент :after. Для него же, установлены следующие параметры:
- position - присваиваем позиционирование - absolute.
- z-index - устанавливаем в минусе -1, чтобы спрятать за блоком.
- top:0;bottom:0; - отступ от верха и от низа - 0 пикселей, то есть тень видно. Если установить значение для - top-50%, то верхняя тень спрячется за блоком и получится вид, как в третьем блоке примера. Если для - bottom установить 50%, то исчезнет нижняя тень. 50% - это как пример, можете установить что-то свое и спрятать тень не полностью, если это нужно.
- left:50px;right:50px; - это отступ от краев. Мы отступили по 50 пикселей, чтобы тень по бокам скрыть. Забегу на перед, чтобы сделать второй вариант эффекта, когда тень по бокам, нужно просто поменять значения. Для сторон установить - 0, а для верха и низа 50 пикселей. Значение 50, можно конечно менять, так вы измените размер тени.
- box-shadow - это тень, тут все понятно. Устанавливаем цвет, прозрачность и размер размытия тени, сейчас - 25 пикселей.
- border-radius - это закругление тени, чтобы создать тот самый эффект изгиба. первое значение - 200 пикселей, радиус по горизонтали, это половина от нашей ширины основного блока - 400 пикселей. 50 - это радиус по вертикали. Для осуществления второго примера - тень по сторонам, нужно делать так, чтобы второе значение было больше первого. Все зависит от размеров блока. В нашем случаи у второго примера соотношение 10px / 50px.
Все параметры, настраиваете под себя, можете менять как угодно, главное не перестарайтесь, чтобы не потерять реалистичный вид.
Я в первом разъяснении, по сути все расписал, так что для второго блока в примере, я просто представлю готовые стили, чтобы Вы видели и было понятнее.
.block_shadow:after{
content:"";
position:absolute;
z-index:-1;
top:25px;
bottom:25px;
left:0;
right:0;
-webkit-box-shadow:0 0 25px rgba(0,0,0,0.3);
-moz-box-shadow:0 0 25px rgba(0,0,0,0.3);
box-shadow:0 0 25px rgba(0,0,0,0.3);
-moz-border-radius:10px / 50px;
border-radius:10px / 50px;
}
Для блока в третьем примере, я тоже описал, что нужно сделать и тоже просто приведу готовый код.
.block_shadow:after{
content:"";
position:absolute;
z-index:-1;
top:50%;
bottom:0;
left:50px;
right:50px;
-webkit-box-shadow:0 0 25px rgba(0,0,0,0.3);
-moz-box-shadow:0 0 25px rgba(0,0,0,0.3);
box-shadow:0 0 25px rgba(0,0,0,0.3);
-moz-border-radius:200px / 50px;
border-radius:200px / 50px;
}
Изменяя стили, подгоняя их под себя, можно добиться разных результатов и абсолютно новых эффектов, не только тех, что я отобразил в примере. Указав значения в процентах, можно осуществить автоматического растягивания тени на всю высоту или ширину блока, если блок имеет не постоянный размер. Пробуйте и улучшайте и Ваш сайт будет иметь необычный вид.
На этом все, спасибо за внимание. 🙂
