Просмотров: 10 782

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

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

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

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

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

11-06-2013 6-24-12

<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 более подробно.

02019055_cover-pdf-kniga-nina-komolova-komputernaya-verstka-i-dizayn-samouchitel    css3 cover_OUT.indd    09450331_cover-pdf-kniga-devid-soyer-makfarland-bolshaya-kniga-css3-2