Как создать тени коробки с помощью CSS?

Свойство CSS «box-shadow» позволяет создавать простые эффекты тени для элементов на вашей странице. Вы можете использовать это свойство для создания красивых коробок с эффектом тени сверху, снизу, справа и слева. В этом уроке мы будем использовать: before псевдоэлемент для создания различных стилей теневого эффекта для текстового поля.

Связанный: Как преобразовать иконку font awesome в изображение?

Синтаксис свойства CSS box-shadow

Синтаксис тень коробки свойство, как показано ниже:

box-shadow: horizontal offset | vertical offset | blur | spread | color | direction

Ниже приведен пример, когда box-shadow: 10px 10px 10px 10px зеленая вставка; используется с элементом div:

Тень коробки со вставкой

Значение вставки указывает, что направление тени должно быть внутри элемента. Вы можете использовать начало, чтобы создать эффект тени за пределами элемента.

Как создать эффекты тени с помощью CSS?

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

.box {
background-color:#CDDC39;
color: #333333;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border: 1px solid #cccccc;
margin: 20px;
padding: 15px;
font-size: 18px;
}

Затем создайте тень с помощью приведенного ниже CSS:

.shadow {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.shadow:before {
position: absolute;
z-index: -1;
display: block;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7);
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.7);
content: "";
}

Мы отобразим тень с левой стороны и отрегулируем положение, используя нижнее и левое значения.

.left-shadow:before {
bottom: 25px;
left: 20px;
width: 60%;
height: 20px;
-webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7);
box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}

Подобно левой тени, определите отдельные стили для правой, нижней и простой тени, как показано ниже.

.right-shadow:before {
right: 20px;
bottom: 25px;
width: 60%;
height: 20px;
-webkit-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7);
box-shadow: 0 20px 20px 0px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}

.bottom-shadow:before {
right: 20px;
bottom: 0;
left: 20px;
height: 30px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

.simple-shadow:before {
right: 20px;
bottom: 0;
left: 20px;
height: 30px;
}

HTML для теневых эффектов

Чтобы создать теневой блок, нам нужно использовать один из трех вышеупомянутых классов CSS с HTML.

  • класс коробки
  • теневой класс
  • выберите один из стилей тени – левая тень, правая тень, нижняя тень или простая тень

Например, ниже приведен HTML-код для добавления левой тени к элементу div:

<div class="box shadow left-shadow">
This is a text box with left shadow. The text inside the box is aligned with "height: 100px; width: 70%; margin: 20px; padding: 15px; font-size: 18px;". The shadow in the left is aligned with "bottom: 25px; left: 20px; width: 60%; height: 20px;".
</div>

Демонстрация эффектов тени CSS

Вы можете настроить CSS и создать правую тень, нижнюю тень и эффекты простой тени. Ниже приведены некоторые демонстрации с эффектом тени CSS, и вы можете просмотреть все доступные стили на интерактивной демонстрационной странице.

Левая сторона тени эффект

Это текстовое поле с левой тенью. Текст внутри поля выровнен по формуле «высота: 100 пикселей; ширина: 70%; поля: 20 пикселей; отступ: 15 пикселей; размер шрифта: 18 пикселей;». Тень слева выровнена по формуле «bottom: 25px; left: 20px; width: 60%; height: 20px;».

Эффект тени справа

Это текстовое поле с правой тенью. Текст внутри поля выровнен по формуле «высота: 100 пикселей; ширина: 70%; поля: 20 пикселей; отступ: 15 пикселей; размер шрифта: 18 пикселей;». Тень справа выровнена с “right: 20px; bottom: 25px; width: 60%; height: 20px;”.

Нижний эффект тени CSS

Это текстовое поле с нижней тенью. Текст внутри поля выровнен по формуле «высота: 100 пикселей; ширина: 70%; поля: 20 пикселей; отступ: 15 пикселей; размер шрифта: 18 пикселей;». Тень внизу выровнена по «right: 20px; bottom: 0; left: 20px; height: 30px;».

Простой CSS Shadow Box

Это текстовое поле с простой тенью. Текст внутри поля выровнен по формуле «высота: 100 пикселей; ширина: 70%; поля: 20 пикселей; отступ: 15 пикселей; размер шрифта: 18 пикселей;». Тень выравнивается по формуле «right: 20px; bottom: 0; left: 20px; height: 30px;».

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *