Просмотров: 25 893

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

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

Постепенно публикую свой опыт работы с CSS здесь.

Освойте хитрости и «подводные камни» CSS, чтобы легко вносить правки в оформление своего сайта.

  • Селекторы, свойства, значения.
  • Строчная и блочная модель
  • Основы позиционирования элементов. Свойства position и float.
  • и др.