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

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

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

Если вы не пользуетесь Internet Explorer 8-, то вы счастливый! =)

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

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

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

shadow

«Встроенный» код:

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

Вот и всё! Всё очень просто. смайл гг

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

    1. Читайте внимательно >>>
      Если вы не пользуетесь Internet Explorer 8- , то вы счастливый! =)
      На другие версии «чудо браузера» не распространяется :mrgreen:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *