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

Як створити тіні Box за допомогою CSS?

0

Властивість CSS "box-shadow" дозволяє створювати прості тіньові ефекти для елементів на вашій сторінці. Ви можете використовувати цю властивість для створення красивих коробок з ефектом тіні у верхньому, нижньому, правому та лівому напрямку. У цьому підручнику ми будемо використовувати: перед псевдоелементом для створення різних стилів ефекту тіні для текстового поля.

Пов’язані: Як перетворити чудовий значок шрифту в зображення?

Синтаксис властивості CSS-тіні

Синтаксис властивості box-shadow такий:

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

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

Box Shadow з вставкою

Значення вставки вказує, що напрямок тіні має бути всередині елемента. Ви можете використовувати outset для створення ефекту тіні поза елементом.

Як створити тіньові ефекти за допомогою 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 Shadow Effects

Ви можете налаштувати CSS та створити ефекти тіні правої, нижньої та простої тіней. Нижче наведено деякі демонстрації з ефектами тіні CSS.

Лівий ефект тіні

Це текстове поле з лівою тінню. Текст усередині вікна вирівнюється з "висота: 100 пікселів; ширина: 70%; поле: 20 пікселів; відступ: 15 пікселів; розмір шрифту: 18 пікселів;". Тінь зліва вирівнюється з "знизу: 25px; зліва: 20px; ширина: 60%; висота: 20px;".

Ефект тіні з правого боку

Це текстове поле з правою тінню. Текст усередині вікна вирівнюється з "висота: 100 пікселів; ширина: 70%; поле: 20 пікселів; відступ: 15 пікселів; розмір шрифту: 18 пікселів;". Тінь праворуч вирівнюється з "праворуч: 20 пікселів; знизу: 25 пікселів; ширина: 60%; висота: 20 пікселів;".

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

Це текстове поле з нижньою тінню. Текст усередині вікна вирівнюється з "висота: 100 пікселів; ширина: 70%; поле: 20 пікселів; відступ: 15 пікселів; розмір шрифту: 18 пікселів;". Тінь внизу вирівнюється з "праворуч: 20 пікселів; знизу: 0; ліворуч: 20 пікселів; висота: 30 пікселів;".

Простий CSS Shadow Box

Це текстове поле з простою тінню. Текст усередині вікна вирівнюється з "висота: 100 пікселів; ширина: 70%; поле: 20 пікселів; відступ: 15 пікселів; розмір шрифту: 18 пікселів;". Тінь вирівнюється "праворуч: 20 пікселів; знизу: 0; ліворуч: 20 пікселів; висота: 30 пікселів;".

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі