Дизайн та розробка сайту

Необычная тень для блоков и кнопок с помощью CSS

Необычная тень

Доброго времени суток. 🙂

Если Вы занимаетесь внешним видом своего сайта или просто версткой, то наверное не раз сталкивались с таким моментом, как тень для блоков, кнопок и других элементов. Если это просто стандартная тень, которая ровно отбрасывается, то ее делают с помощью CSS, но если тень не обычная, то ее рисуют в фотошопе и потом отдельным элементом подставляют к нужному блоку.

Необычная тень

Сегодня я хочу показать, как с помощью обычного CSS можно сделать необычную тень. Суть способа в том, чтобы с помощью псевдоэлемента :after и свойства transform, которое может искажать элемент и поворачивать добавить к нужному элементу необычную тень.

Схематично это будет выглядеть примерно так.

На первом рисунке, серым обозначены границы кнопки, она - обычный прямоугольник. Под ним мы создаем слой у которого прозрачный фон с псевдоэлементом и трансформируем его в параллелограмм и немного поворачиваем по часовой стрелке, потом создаем ему тень и получаем готовый результат. На схеме первый вариант, кнопка прозрачная, чтобы видеть суть способа, а во втором уже видно - то, как выглядит готовый результат.

Например, у нас есть ссылка, оформлена как кнопка или просто блок, к которому мы хотим сделать необычную тень. Допустим им присвоен класс shad. CSS стили будут выглядеть так

.shad:after{
content:"";
width:80%;
height:55%;
z-index:-1;
position:absolute;
right:10px;
bottom:10px;
background:none;
transform:skew(20deg) rotate(6deg);
box-shadow: 0px 10px 8px rgba(0, 0, 0, 0.6);
}

Параметры можете регулировать. transform - skew(20deg) - это искажение, а rotate(6deg) - поворот элемента по часовой стрелке. Высота указана в процентах и равна 55%. Если у Вас кнопка, то это нормально, но если у Вас большой блок, то высоту нужно уменьшать, иначе у Вас будет огромная тень.

Есть один важный момент. Псевдоэлемент :after нельзя присвоить кнопкам типа input, но это не проблема. Вам нужно просто создать div и внутрь его поместить уже input.

Например так:

<div class="shad_block"><input class="lb" type="button" value="Вход" id="lb" /></div>

Родительскому div мы присвоили класс shad_block. Далее ему присваиваем стили и добавляем уже наш псевдоэлемент :after.

.shad_block{
position:relative;
z-index:3;
}
.shad_block:after{
content:"";
width:80%;
height:55%;
z-index:-1;
position:absolute;
right:10px;
bottom:10px;
background:none;
transform:skew(20deg) rotate(6deg);
box-shadow: 0px 10px 8px rgba(0, 0, 0, 0.6);
}

Иногда родительскому блоку еще нужно добавить свойство width - длину, и указать ее в процентах или пикселях.

Этот вариант делает тень на правую сторону, если включить фантазию, то с помощью псевдоэлемента :before можно добавить и на левую сторону. Получится красиво и необычно. В общем пробуйте и экспериментируйте.

На этом все, спасибо за внимание. 🙂

Дизайн та розробка сайту

Back to top