Привет, ребята! Мега-давно не писал я о замечательных свойствах 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.
[...] 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 [...]
Весьма интересные способы. Обязательно надо взять на заметку.
Да и + сейчас это в тренде
Ой, я помню тоже о text-shadow писал статью)) Правда валидаторы не хотят это свойство пропускать =\
Да валидаторы ваще в некоторых случаях себя странно ведут)))
ведут себя так потому что офф еще не было принято эти стандарты
По-моему, они иногда ругаются и на некоторые оф. принятые.
А еще можно сделать вот такую магию:
text-shadow:1px -1px 2px #ffffff, 1px -3px 2px #f0f, 1px -5px 2px #ff0;
и т.д…
И такую магию можно делать сколько угодно раз. Достаточно смелые фантазии можно воплотить с помощью нее
А чем эта магия отличается от моего последнего примера?:
text-shadow:1px -1px 2px #000000, 1px 1px 5px #e17272, -2px 1px 1px #5092d6;
Тем, что у нас разные цвета и пиксели?)))))
Я просто ппц какой невнимательный и не заметил этого
хе…прям стерео текст можно делать…анаглифные очки и зд епты
Спасибо за исходники.
По мне так первый пример самый удачный
Да, первый вариант хороший
Я просто хотел показать, что можно разные вариации придумать. Может кому-то подойдут другие варианты, главное правильно подобрать цвета)
И все-таки классная вещь этот CSS3. Столько возможностей… Можно многое, что делается на JavaScript, заменить только использованием CSS3. Вообще классно. Тени также создают неплохой эффект, более приближающий нас к реальному миру. Списибо за статью!
И Вам спасибо за комментарий!
Вообще, text-shadow появилось еще в CSS 2.0. Только браузеры тогда его почти не поддерживали.