Рейтинг: 5.0/1

Метки

свойства css3, оформление текста

Опрос: Чего добавлять больше?

Чего добавлять больше?
Всего ответов: 192

Главная » 2012 » Январь » 7 » И еще немного о текстовых эффектах с CSS3

И еще немного о текстовых эффектах с CSS3

1. Эффект неонового свечения для текста с помощью CSS3



Эффект неонового свечения текста использует различные слои-тени текста для создания иллюзии его внешнего свечения. Изменяя радиус размытия несколько раз, вы можете создать иллюзию неонового текста.



Code

h1 {
  text-shadow: 0 0 10px #fff,
  0 0 20px #fff,
  0 0 30px #fff,
  0 0 40px #ff00de,
  0 0 70px #ff00de,
  0 0 80px #ff00de,
  0 0 100px #ff00de,
  0 0 150px #ff00de;
}


2. Эффект выдавленного текста на CSS3



Данный текстовый эффект придаёт тексту вид как бы выдавленного на какой-то поверхности. Весьма эффектный результат достигается в том случае, если цвет самого текста темнее цвета фона.



Code

h1 {
  text-shadow: 0px -2px 0px #333,
  0px 2px 3px #666;
}


Значения для text-shadow (например для варианта 0px -2px 0px #333) :

0px - координата по оси X
-2px - координата по оси Y
0px - радиус размытия
#333 - цвет тени текстовой

3. Эффект отбрасываемой текстом тени



Теперь тени для текста благодаря CSS3 можно делать не хуже, чем в Photoshop! и кода самый минимум:

Code

text-shadow: 3px 5px 10px #000;


Ссылка:
BB-код:
HTML-код:
Всего комментариев: 0

Оставь комментарий первым!
Имя *:
Email:
Код *: