TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

20

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

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

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

Синтаксис свойства 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;».

Источник записи: www.webnots.com
Leave A Reply

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