Как сделать нормальный градиент в бэкграунде (CSS, HTML)

12
Asar
На сайте с 23.08.2004
Offline
330
1608

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

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

=DEREK=
На сайте с 07.05.2009
Offline
130
#1

делайте ширину 1px и качество на максимум. Также советую попробовать не только jpeg, но и gif с 256 палитрой. я всегда так делаю, получаеться градиент более-менее ровный.

Показываю фокусы с Drupal (/ru/forum/526565)
JTRTA
На сайте с 06.07.2008
Offline
25
#2

Обычно это из-за невнимательности или отсутствия понимания у дизайнеров, скорее всего градиент повернут где-нибудь на 1 градус от вертикали или горизонтали вот и получаются несостыковки

Дизайн /ru/forum/493415 (/ru/forum/493415) Верстка от 15$ /ru/forum/509339 (/ru/forum/509339) Сайты под ключ aiogino.studio@gmail.com icq: 460146806
Asar
На сайте с 23.08.2004
Offline
330
#3

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

[Удален]
#4

в PNG не обязательно фикс палитра. Но вообще градиенты сам бог завещал сохранять в png-24 ибо там на градиентах сжатие работает суперофигенно.

Однако имейте ввиду что если у вас градиент PNG например выходит в цвет пусть #FACE8D, и снизу к нему пристыковать JPEG залитый таким цветом - цвет может не совпасть из-за наличие в JPEG встроенного цветового профиля и особенностей его обработки. В IE к тому же может не совпасть даже с CSS-заливкой.

Николай В.
На сайте с 07.09.2006
Offline
62
#5
neolord:
Однако имейте ввиду что если у вас градиент PNG например выходит в цвет пусть #FACE8D, и снизу к нему пристыковать JPEG залитый таким цветом - цвет может не совпасть из-за наличие в JPEG встроенного цветового профиля и особенностей его обработки. В IE к тому же может не совпасть даже с CSS-заливкой.

Поэтому все картинки нужно чистить от метаинформации специальными инструментами :)

Asar
На сайте с 23.08.2004
Offline
330
#6

PNG имел ввиду именно 8, конечно. Хотя, для небольших картинок и 24, конечно, не так уж накладно. Что же касается различия в подаче индексированных форматов и жпега, то индекс вообще может не в тот цвет попасть, что жпег пожмет (в зависимости от настроек качества жпега и палитры индекса), поэтому не всегда здесь профиль виноват, который, к тому же, насколько я помню, в Save for web Фотошопа обрубается автоматом вместе с инфой о разрешении, екзифе, превью и т.п.

Rus But
На сайте с 30.05.2006
Offline
111
#7

Сохранаяю для веб в gif

Изза кривых рук дизайнеров приходится иногда делать не 1px, а 5-15px

Разработка сайтов на Modx Evo/Revo ( http://citypeople.ru/ ) | SEoDOR промокод 15% ( https://vk.cc/aw78s4 ) : L43G7
[Удален]
#8
Николай В.:
Поэтому все картинки нужно чистить от метаинформации специальными инструментами :)

Не поможет. Почитайте о том как выводится JPEG.

Asar:
PNG имел ввиду именно 8, конечно. Хотя, для небольших картинок и 24, конечно, не так уж накладно. Что же касается различия в подаче индексированных форматов и жпега, то индекс вообще может не в тот цвет попасть, что жпег пожмет (в зависимости от настроек качества жпега и палитры индекса), поэтому не всегда здесь профиль виноват, который, к тому же, насколько я помню, в Save for web Фотошопа обрубается автоматом вместе с инфой о разрешении, екзифе, превью и т.п.

Не автоматом, там галочка есть. Но это не принципиально. Все равно может не помочь. Именно jpg выводится с учетом гаммы, операционки и видеоадаптера. Не всегда конечно не совпадает, но довольно в большой части пространства.

neolord добавил 13.06.2009 в 00:50

cocacola:
Сохранаяю для веб в gif
Изза кривых рук дизайнеров приходится иногда делать не 1px, а 5-15px

Ага, а сделаю вот я трехцветный градиент и не хватит вашего gif ;)

PNG наше все.

Николай В.
На сайте с 07.09.2006
Offline
62
#9

А покажите пример, пожалуйста.

[Удален]
#10

ээмм..) ну я даже не знаю)) Готового такого у меня точно нет.

Вот склепал за 3 минуты

http://awcms.ru/colors.html

на фоне бади лежит жпег с цветом face8d

сверху лежит див с png градиентом

в файрфоксе все нормально (он содержит настройки color management), если откроете в IE - увидите границу. Хотя пипеткой цвет совпадет.

В опере и хроме она тоже есть, но не так заметно. На моем калиброванном мониторе во всяком случае надо внимательно посмотреть.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий