Експериментуємо з різними CSS3 Box-Shadow ефектами

Shadow

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

ефектами

CSS Box-Shadow

Ми будемо використовувати box-shadow функцію, яка дозволяє легко створити кілька тіней на коробці елементів, задаючи значення для кольору, розміру, розмиття та усунення.

Властивість box-shadow приймає від 2-х до 4-х варіантів опцій, необхідні опції – горизонтальне та вертикальне зміщення та дві додаткові опції, відстань розпилення та колір.

Підтримка браузерів

Всі новітні браузери підтримують функцію box-shadow:

  • Internet Explorer 9.0 і вище
  • Firefox 3.5 та вище
  • Chrome 1 і вище
  • Safari 3 і вище
  • Opera 10.5 і вище

З багатьма новими CSS3 властивостями, вам потрібно додати префікс функцій зі спеціальними тегами браузера. Для Firefox потрібно використовувати -moz-, для Chrome/Safari -webkit. Властивість box-shadow нічим не відрізняється.

Для Firefox 3.5 потрібний префікс –moz-boz-shadow, але для Firefox 4.0 і вище версії, вам не потрібно використовувати префікс взагалі.

Для Chrome/Safari, ви все одно маєте використовувати -webkit-box-shadow.

Для Opera вам достатньо просто використовувати box-shadow.

CSS Box Shadow: Ефект №1

Це створить стандартний ефект тіні коробки, надаючи їй піднятий вигляд.

HTML

CSS

CSS Box Shadow: Ефект №2

Цей ефект додасть тіні до нижніх кутів коробки, створюючи вигляд піднятих куточків на коробках. Цей ефект використовує :before та :after властивості,щоб створити нові елементи, які використовуються для кутів.

HTML

CSS

CSS Box Shadow: Ефект №3

Тут використовуватиметься половина попереднього ефекту, з додаванням лише одного піднятого кута в нижній лівій частині коробки.

HTML

CSS Box Shadow: Ефект №4

Ефект №4 підніме кут нижньої правої частини коробки.

HTML

CSS

CSS Box Shadow: Ефект №5

Це поширюється ефект №2 і збільшує кут тіні.

HTML

CSS

CSS Box Shadow: Ефект №6

Цей ефект створюватиме вигнуту тінь у нижній частині коробки.

HTML

CSS

CSS Box Shadow: Ефект №7

Цей ефект використовує попередній ефект і додає тінь до верхньої частини коробки.

HTML

CSS

CSS Box Shadow: Ефект №8

Наш останній ефект додасть заокруглені тіні по обидва боки коробки.