Двухцветный текст на CSS

[Melodyn]

Недавно задался вопросом создания "отблеска" на тексте. Гугл не понял, что мне нужно и предложил сделать нужный эффект в Photoshop. Поэтому решил опубликовать свой метод решения такой задачи:

http://jsfiddle.net/yUqwE/

 

Свойство content у тега <p>, очевидно, приобретает те же настройки для текста внутри себя. Поэтому мы прописываем псевдоэлемент для тега <p>, размер которого делаем на половину (или сколько вам там надо) другим цветом.

 

Цвет "верхней" части указывается в псевдоэлементе, цвет "нижней" в самом теге. Всё просто, проще не бывает. 

 

ЗЫ

Опытным путём бытовой магии создан третий цвет для текста: http://jsfiddle.net/yUqwE/1/

Можно делать имитацию градиента, хоть и не очень убедительную )

 

ЗЗЫ

Почему именно такие цифры в размерах псевдоэлементов и смещения слева - не знаю. Если кто-то поймет, почему у текста в 20пикс половина - это около 30пикс, пишите в тему )

Edited January 12, 2014 by Melodyn

[mrnobody]

Молодцом )

Наоборот. Верхний цвет — псевдоэлемент, нижний — абзац.

Edited January 12, 2014 by mrnobody

[Melodyn]

Молодцом )

Наоборот. Верхний цвет — псевдоэлемент, нижний — абзац.

Спасибо, поправил ) Добавил про третий цвет, что было в общем-то очевидно.

[advokatua]

А в чем практический смысл?

[Melodyn]

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

 

Например:

[Zverushka]

Потому изначально у псевдоэлементов отображение не блочное, плюс позиция элемента может быть неизвестно где - надо прописать их. УПД, кстати блочное отображение можно и не прописывать - просто у вас у родителя relative не поставлен, в итоге позиционируется псевдоэлемент от body 

http://jsfiddle.net/Zverushka/yUqwE/5/

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

Edited January 13, 2014 by Zverushka

[Melodyn]

Когда я знакомился с методом создания фигур, с использованием псевдоэлементов, то там было описано, что им необходимо приписывать абсолютное позиционирование. Собственно я и не задавался поиском решения этого вопроса, потому что всё всегда срасталось, как надо и не ничему не мешало. А тут вот обратил внимание, что что-то не так.

 

Спасибо за пояснение, я сам и не сообразил про отсчёт от body!

[zenw]

Очень интересно, но в Firefox (26.0, Linux) есть небольшая проблема: текст не выделяется, если указатель мыши находится над псевдоэлементом. В хроме и старой опере все нормально.

[SelenIT]

pointer-events: none для псевдиков должен решить проблему.