CSS: тень текста

Какие же чудеса можно сделать с помощью css! В этой статье я хочу рассказать Вам как сделать тень в тексте при помощи css свойства text-shadow (если Вы пользуетесь IE то можете дальше не читать). Тень можно сделать цветной, размытой, расположенной слева, справа, сверху, снизу. Даже можно сделать одновремённо несколько теней (прям как на футбольном поле). Помните одно – не переборщите с эффектами, чтобы не испортить дизайн Вашего блога.

Примеры:

Эффект 3D-текста можно сделать следующим образом: цвет текста должен почти совпадать с цветом фона блога, а тень должна быть неразмытой.

#shex-one {    color: white;   text-shadow: 1px 1px 0 black, 2px 2px 0 black;}

Чудеса CSS на Сидаш.Ру

Первые два значения text-shadow задают смещение тени по горизонтали и по вертикали, третье значение — размытие, четвертое — цвет тени. Чтобы сделать двойную тень мы продублировали эти значения.

С помощью свойства  text-shadow и JavaScript можно сделать вот такую вот веселую штуку.

Ну и напоследок хочу показать Вам, как можно с помощью изменения фокуса текста сделать вот такое:

#shex-four {
    background: white;
    color: blue;
    text-indent: -999em;
    text-shadow: 999em 0 8px blue;
    overflow: hidden;
    -webkit-transition: text-shadow 0.25s linear;
}
#shex-four:hover { text-shadow: 999em 0 0 blue;}

Постовой:Бесплатный обмен ссылками — бесплатный способ наращивание тИЦ и PageRank

Понравилась статья? Подписывайтесь на RSS, чтобы быть в курсе всех самых интересных новостей моего seo блога!

Sidash