HTML и CSS

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

Для элементов 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;

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

  • Отлично! Буду и у себя применять такое к изображениям, может и к тексту. Спасибо! 🙂

  • Давид

    Спасибо!!! 😎

  • Кстати в IE 9 не работает.. Странно. Может надо дописать чего?

    • Ответ для Leopold: в нём много чего не работает. я бы ие менял))

    • Anhair

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