WebDesignMagazine.ru – Журнал о веб-дизайне

Экспериментируем с различными CSS3 Box-Shadow эффектами

0

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

Смотреть Демо

 

css-box-shadows

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

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

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

HTML

CSS

Смотреть Демо

Поделиться: