Просмотров: 16 794

Как сделать эффект свечения с помощью 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. Заставляем светиться изображение.

11-06-2013 6-26-47

<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. Свечение для текста.

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

11-06-2013 6-35-41

<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.

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

Кстати, если вам будет интересно, я занимаюсь веб-аналитикой сайтов. Если вы хотели бы сделать ваш сайт более эффективным и, чтобы он приносил больше денег, веб-аналитика может в этом помочь.

Обучающий курс для начинающих по основам работы с веб-аналитикой сайтов на системе Яндекс Метрика здесь.

Страница с описанием моих услуг по веб-аналитике: здесь.