Привет, ребята! Мега-давно не писал я о замечательных свойствах CSS3 и сегодня начну исправляться. Предлагаю посмотреть в сторону свойства "text-shadow", которым сейчас многие любят "украшать" свои сайты, особенно "минималисты".

По названию можно понять, что делает это свойство, если кто не в теме - "text-shadow" придает любую тень Вашему тексту.

Как я выше упомянул, сейчас в тренде создание тени для текста, и не размытой, а 1-пиксельной, такой "фич" строго подчеркивает слово и текст очень хорошо выглядит на минималистических дизайнах. Данное свойство часто применяют при создании кнопок, когда тень в 1 пиксель направлена вверх, создается ощущение, как будто текст в кнопке вдавленный. Далее в Demo Вы сможете сами убедиться в этом

Рассмотрим свойство на примере:

.mycontent {
text-shadow:1px 2px 3px #ffffff;
}

Итак:

1px - означает, что тень будет сдвигаться на 1 пиксель вправо (отрицательное значение будет сдвигать на n-ое количество пикселей влево);

2px - тень будет сдвигаться на 2 пикселя вниз (соответственно, отрицательное значение будет сдвигать на n-ое количество пикселей вверх);

3px - тень будет размыта на 3 пикселя;

#ffffff - цвет желаемой тени.

Далее несколько примерчиков с разными вариантами:

.01 Тень (в 1px - белого цвета) от текста направлена вниз:

.mycontent {
text-shadow:0px 1px 0px #ffffff;
background:#d9d9d9;
border:1px solid #c4c4c4;
}

.02 Тень (в 1px - темно-синего цвета) от текста направлена вверх. Создает эффект "вдавленного" текста в фон. Часто применяют при создании кнопок:

.mycontent {
text-shadow:0px -1px 0px #00518a;
background:#007fda url(bg.png) repeat-x;
border:1px solid #0263a7;
}

.03 Тень (в 2px - белого цвета) от текста направлена вправо:

.mycontent {
text-shadow:2px 0px 0px #ffffff;
background:#c8c8c8;
border:1px solid #bdbcbc;
}

.04 Тень (в 1px - белого цвета) от текста направлена влево и вниз:

.mycontent {
text-shadow:-1px 1px 0px #ffffff;
background:#c8c8c8;
border:1px solid #bdbcbc;
}

.05 Тень (в 1px - белого цвета) от текста направлена вправо, вверх и размыта на 2px:

.mycontent {
text-shadow:1px -1px 2px #ffffff;
background:#d2d1d1;
border:1px solid #c4c4c4;
}

.06 Черная тень от текста направлена вправо, вверх и размыта на 2px; Красная тень направлена вправо, вниз и размыта на 5px; Синяя тень направлена влево, вниз и размыта на 1px:

.mycontent {
text-shadow:1px -1px 2px #000000, 1px 1px 5px #e17272, -2px 1px 1px #5092d6;
background:#a4a4a4;
border:1px solid #909090;
}

Свойство "text-shadow" поддерживается в:

• Firefox 3.1+;
• Opera 9.5+;
• Chrome 2.0+;
• Safari 3.0+;
• Internet Explorer ------------.

Конечно же, данным свойством злоупотреблять не нужно и весь текст на сайте делать с подобными тенями не стоит - Вы уничтожите глаза своих читателей и раз и навсегда распрощаетесь с ними, а заново получить доверие от читателей очень тяжело. Советую использовать "text-shadow" на надписях кнопок (пример привел выше), в тегах, меню и коротких описаниях, как сделал я в шапке и футере данного блога.

Копипастерам привет!  Материал взят с сайта www.mykhailenko.com.