Эффект свечения с CSS3

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

Здесь приводится простой способ добавления эффекта свечения на контент с помощью такого свойства CCS3, как box-shadow.

Свечение для div-элементов

Исходный код этого примера:

<style>
    .div-shadow {
        width: 500px;
        height: 50px;
        line-height: 50px;
        margin: 30px auto;
        padding: 0 20px;
        background: #222;
        color: #fff;
        text-align: center;
        border: 1px solid #fff;
        box-shadow:0 0 20px #555;
    }
</style>
<div class="div-shadow">
    Тень для элементов div
</div>

Свечение для изображений

Исходный код этого примера:

<style>
    .img-shadow {
        border: 1px solid #fff;
        box-shadow:0 0 20px #555;
    }
</style>
<img src="http://kdg.htmlweb.ru/kdgpic/foto.jpg" alt="kdg" class="img-shadow">

Свечение непрямоугольной картинки

Если такое же свойство box-shadow применить к непрямоугольной картинке, то эффект будет совсем не тот, какой хотелось бы:

Для создания эффекта свечения или тени для подобных картинок надо использовать специальный фильтр drop-shadow:

Исходный код этого примера:

<style>
    .img-filter {
        margin: 20px;
        filter: drop-shadow(0 0 20px #555);
    }
</style>
<img src="/images/step3.png" alt="Оплата" class="img-filter">

Поддержка CSS Filter drop-shadow современными браузерами достаточно хорошая.

Свечение для текста

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

Текст со свечением!

Исходный код этого примера:

<style>
    .txt-shadow {
        font: bold 3em/2em Arial, sans-serif;
        color: #ff0000;
        text-shadow: 0 0 20px #ff0000;
    }
</style>
<p class="text-shadow">Текст со свечением!</p>