Калининград+7.962.2626.555

Тени для блочных элементов и текста

17.01.2012

В CSS3 помимо прочего появились два замечательные свойства: box-shadow и text-shadow.

Рассмотрим box-shadow:

box-shadow: 3px 5px 7px 10px #000000;

где:

  • 3px — смещение по координате x (по-горизонтали);
  • 5px — смещение по координате y (по-вертикали);
  • 7px — радиус размытия;
  • 10px — размер тени.

С двумя последними объяснять что к чему не имеет смысла, — нужно экспериментировать.

Теперь text-shadow:

text-shadow:3px 5px 7px #000000;

  • 3px — смещение по координате x (по-горизонтали);
  • 5px — смещение по координате y (по-вертикали);
  • 7px — радиус размытия.

Указывать цвет можно не только HEX кодом, но и с помощью rgba(0,0,0,0.5).