Как сделать эффект свечения с помощью CSS.

Эффект свечения для элементов на веб-странице можно сделать с помощью свойства box-shadow.

Смысл в том, чтобы убрать смещение тени по вертикали и горизонтали в ноль, а радиус размытия установить в необходимое значение, в зависимости от того на какое расстояние должна распространятся тень.

Давайте рассмотрим несколько примеров, как это можно использовать на практике.

Пример 1. Свечение для элемента div.

<div style="width:100px; height:50px; background:#fcfcfc; -moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; box-shadow:0 0 10px #000;">
Блок
</div>

Вот те стили, которые отвечают за создание свечения:

-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
box-shadow:0 0 10px #000;

Пример 2. Заставляем светиться изображение.

<img src="blueocean/var1.jpg" width="300" style="-moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; box-shadow:0 0 10px #000;"">

Пример 3. Свечение для текста.

Текст тоже можно заставить светится.

<h1 style="-moz-text-shadow:0 0 10px #c00; -webkit-text-shadow:0 0 10px #c00; text-shadow:0 0 10px #c00;">Текст</h1>

Здесь все аналогично, только используется свойство text-shadow.

Цвет свечения можно задавать любым.