Jump to content
  • 0

Градиент текст в вебкит - не совпадает заливка шрифта


Zverushka
 Share

Question

http://jsfiddle.net/wPP2b/ (смотреть в хроме)

Собственно - как видите сверху скриншот из фотошопа - а снизу сам шрифт, но заливка выглядит более темной - хотя я все значения взяла из фотошоп - начальный и конечный цвет заливки, но выглядит совсем по-другому.
Почему и как поправить? Пробовала подогнать цвета - да вот что-то никак, все какое-то темное.

В принципе как вариант пробую добавить поверх красного текста слой с градиенто, но как-то не выходит сделатьк расный перелив.....

Edited by Zverushka
Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0

Блин - если убрать тень шрифта - то цвета преобретают нужные краски - как же так? Почему?

И как быть - мне ведь нужна тень.  :unsure:

Edited by Zverushka
Link to comment
Share on other sites

  • 0
Добавил % здесь:
 
Я так понимаю  тень просто перестает работать)...

А свг тут можно применить, если текст любой может быть по ширине?
Че-то у меня в предыдущий раз ничего не получилось с свг.

Link to comment
Share on other sites

  • 0

В теории, можно было бы -webkit-text-stroke'ом попробовать сымитировать. Но я попробовал - с любой толщиной обводки бяка получается (1px слишком жирно, при .3px обводка местами противно отстает от заливки почти на пиксель).

 

Кстати, я не понял, David Hyatt реально считал такое поведение тени не багом, но фичей? ОН УПРЛС?

 

Мне предложение Брэда Кемпера кажется самым логичным. Всё-таки заливка контура текста - это явно foreground, а не back-, чисто по здравому смыслу.

Link to comment
Share on other sites

  • 0

В вебките можно бы и убрать тень вообще - но в других браузерах она нужна... В общем у меня не получается убрать тень только в вебките - это возможно?

 

А по свг не подскажете я смогу реализовать заголовок любой ширины на свг и сделать градиент?

Как вообще подскажете поступить - градиент мне можно без вставки цельной картинки реализовать через свг или канвас или еще что?

 

Работу пора сдавать, а я фз что заказчику объяснить - что это невозможно или я просто не умею?

 

Меня этот макет уже так задрал, что я его просто ненавижу (помимо гиперсложной верстки еще и 100500 скриптов), как же не хочется морочится...

Link to comment
Share on other sites

  • 0

Ну где ж еще читать о секретных фичах движка, как не на сайте его конкурента :)

 

Еще часто рекомендуют скрывать вебкитщину от других в @media screen and (-webkit-min-device-pixel-ratio:0), но, если ничего не путаю, с какого-то момента это стали поддерживать Оперы на Престо (и как минимум грозились поддержать другие), так что тут возможны сюрпризы. А :-webkit-any(), мне кажется, будет жить еще долго (он используется в дефолтных стилях Хрома) и вряд ли его скопируют другие...

Link to comment
Share on other sites

  • 0
на крайняк куфон можно заюзать но куфон печальная штука

Не знаю как вы, а я куфон терпеть не могу... с ним столько мороки. Особенно когда нужно сделать пиксель перфект между всеми браузерами (браузер на браузер накладывают), там просто фестиваль с лайн-хейтом. Если скажете что такой пиксель перфект не нужен, то я согласен, но на прошлой работе были жесткие стандарты... :) так что терпеть не могу куфон,ну разве что небольшой кусочек текста можно сделать,  но когда весь сайт на куфоне....

Link to comment
Share on other sites

  • 0

 

на крайняк куфон можно заюзать но куфон печальная штука

Не знаю как вы, а я куфон терпеть не могу... с ним столько мороки. Особенно когда нужно сделать пиксель перфект между всеми браузерами (браузер на браузер накладывают), там просто фестиваль с лайн-хейтом. Если скажете что такой пиксель перфект не нужен, то я согласен, но на прошлой работе были жесткие стандарты... :) так что терпеть не могу куфон,ну разве что небольшой кусочек текста можно сделать,  но когда весь сайт на куфоне....

 

ну я не говорю что его надо использовать , крайний случай, я сам его только один раз юзал удовольствия не получил, но способ такой есть и упомянуть его можно)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy