Как создать эффект свечения с CSS3

Это очень простой способ добавления эффекта свечения на контент с помощью такого свойства ccs3, как “бросить тень”. Данный способ займёт у вас очень малое количество времени из-за мизерного количества кода, а следовательно и практически не увеличивает вес страницы и не увеличивает время загрузки. Для него не нужны ни какие графические файлы, всё работает на “голом” css.

Для элементов DIV:

Использование “встроенного” кода:

<div style="width: 500px;height: 50px;line-height: 50px;margin: 30px auto;padding: 0 20px;background:#222;color:#fff;text-align:center;border: 1px solid #fff;-moz-box-shadow: 0 0 20px #555; -webkit-box-shadow: 0 0 20px #555;box-shadow: 0 0 20px #555;" />
Если вы не пользуетесь Internet Explorer 8-, то вы счастливый! =)
</div>

Конечно,вы не будете использовать только “встроенные” стили в 99% случаев, поэтому предлагаю вашему вниманию следующий код для вашего .css-файла.

Просто сss:

-moz-box-shadow: 0 0 20px #555;
-webkit-box-shadow: 0 0 20px #555;
box-shadow: 0 0 20px #555;

Для изображений:

“Встроенный” код:

<img src="photo.jpg"  alt="Superman" style="border: 1px solid #fff;-moz-box-shadow: 0 0 20px #555; -webkit-box-shadow: 0 0 20px #555;box-shadow: 0 0 20px #555;" />

Чистый css:

-moz-box-shadow: 0 0 20px #555;
-webkit-box-shadow: 0 0 20px #555;
box-shadow: 0 0 20px #555;

Создание эффекта неоного свечения для вашего текста, используя свойство text-shadow:

Блогосфера.

Используя “встроенный” код:

<p style="font:bold 3.0em Myriad Pro,myriad,arial,sans-serif;line-height:50px;color:#ff0000;text-shadow: 0 0 20px #ff0000;background: #000; display: block;">Disco sucks!</p>

Используя только css:

color:#ff0;
text-shadow: 0 0 20px #ff0;

Вот и всё! Всё очень просто.