text-shadow в CSS3

20
Окт
2010

text-shadow CSS3

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

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

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

Demo text-shadow CSS3

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

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

text-shadow в CSS3

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

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

Тени с помощью CSS3

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

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

Как сделать тень CSS3

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

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

Shadow CSS3

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

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

Тень от текста CSS3

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

Download (скачать) text-shadow CSS3

Подписаться на RSSВы можете подписаться на RSS или на E-mail рассылку:

Оставить комментарий с помощью формы ВКонтакте

Комментариев (19) к “text-shadow в CSS3”

  1. [...] This post was mentioned on Twitter by Anna Volkova, Дмитрий Коротаев, Jason design, DJ Hennion, Поговори со мной and others. Поговори со мной said: @annavolkova и еще 7 хвалят: text-shadow в CSS3 http://ff.im/-slIjD [...]

  2. Ex.clusive пишет:

    Весьма интересные способы. Обязательно надо взять на заметку.

  3. Eka пишет:

    Ой, я помню тоже о text-shadow писал статью)) Правда валидаторы не хотят это свойство пропускать =\

  4. MegaFill пишет:

    А еще можно сделать вот такую магию:

    text-shadow:1px -1px 2px #ffffff, 1px -3px 2px #f0f, 1px -5px 2px #ff0;

    и т.д…

  5. galaxy пишет:

    хе…прям стерео текст можно делать…анаглифные очки и зд епты :-D

  6. Aleks пишет:

    Спасибо за исходники.
    По мне так первый пример самый удачный

    • Oleg Mykhailenko пишет:

      Да, первый вариант хороший :)
      Я просто хотел показать, что можно разные вариации придумать. Может кому-то подойдут другие варианты, главное правильно подобрать цвета)

  7. Илья пишет:

    И все-таки классная вещь этот CSS3. Столько возможностей… Можно многое, что делается на JavaScript, заменить только использованием CSS3. Вообще классно. Тени также создают неплохой эффект, более приближающий нас к реальному миру. Списибо за статью!

  8. Андрей пишет:

    Вообще, text-shadow появилось еще в CSS 2.0. Только браузеры тогда его почти не поддерживали.