Jump to content
  • 0

Градиент -90degree для фона

paska

Asked by paska,

 Share

Question

paska Explorer

paska

Posted
Posted

Всем здрасте.

Тем видел много, в том числе и на этом форуме. И все же не нашел подходящего решения.

Задача.

Необходимо сделать градиент - 900 (т.е. сверху вниз).

Условия:

  • длина будет динамически изменяться в зависимости от количества контента;
  • Градиент будет как минимум в двух местах: <body> и некий <outer> в теле, спозиционированный по середине;
  • Необходимо решения для наиболее распостраненных браузеров: (ff,opera,safari,chrome,ie_6++);
  • есть определенные начальный и конечный цвета.

Что удалось найти в сети:

1. градиент при помощи CSS и картинки в 1px - не подходит, т.к. длина не фиксированная;

2. градиент с использованием диклараций стандарта CSS.3 и filter для IE - не подходит - решение не работает в opera,chrome (-webkit-gradient...). filter в IE - работет кривовато;

3. js градиент с пошаговым изменением цвета и созданием большего числа блоков - не подходит, потому как есть условие начального и конечного цветов, а так же код-свалка, с огромным кол-вом дивов не годиться.

Кто знает, как можно реализовать наиболее просто и кроссБраузерно на сегодняшний день - подскажите плз.

Заранее СПС.

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
paska Explorer

paska

Posted
  • Author
Posted
На пхп создавать полоску использую GD2

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

спс. буду пробовать, здесь довольно понятно.

Link to comment
Share on other sites
  • 0
rus Explorer

rus

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

ну вот тут очень кратенько, но довольно понятно с реальным примером.

Link to comment
Share on other sites
  • 0
paska Explorer

paska

Posted
  • Author
Posted

да, но здесь также я ограничен шириной и высотой rectangle, на который в последствии накладывается градиет... а градиет в svg разметке можно наложить на какой либо объект типа круга, многоугольника, прямоугольника или объекта, заданного неким путем. т.е. это мне никак не поможет, как я понял при условии нефиксированной высоты(.

Link to comment
Share on other sites
  • 0
paska Explorer

paska

Posted
  • Author
Posted
А если изменить размер окна или шрифта? php-шный градиент уже не впишется...

Возможно SVG поможет...

Читайте еще хорошую статейку о фоне на SVG.

СПС. статья хорошая, доступно объяснено. но у меня не отображается страница .html, с подключенными SVGWeb библиотеками в Opera и IE.

в ff, chrome, safari - все вроде бы гуд.

если можешь подскажи. пробовал ли ты делать по примеру этой статьи и во всех ли у тебя браузерах отборажется svg графика?

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted
СПС. статья хорошая, доступно объяснено. но у меня не отображается страница .html, с подключенными SVGWeb библиотеками в Opera и IE.

в ff, chrome, safari - все вроде бы гуд.

если можешь подскажи. пробовал ли ты делать по примеру этой статьи и во всех ли у тебя браузерах отборажется svg графика?

Все современные броузеры кроме IE поддерживают SVG. Для IE есть плагины. В IE9 уже есть поддержка SVG, но глючная пока.

Читай, статью об SVG в Википедии. Ну и в гугле в принципе много инфы. Есть прибамбас на JQuery, который поможет отображению в IE. Можно предлагать пользователям IE подгрузить Адобовский плагин.

Link to comment
Share on other sites
  • 0
paska Explorer

paska

Posted
  • Author
Posted (edited)
paska

А выложи потом пример плиз рабочий, покажи.

Если кому будет нужно - здесь пример. Использовал svgWeb toolkit для вставки в .html.

Работатет:

  • ff 3.6.3;
  • opera 10.53 (в 9.20 - не работает, может и в других каких версиях тоже, не проверял);
  • chrome 4.1;
  • safari 4.0.5;

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

А в IE - не работает. Здесь пришлось использовать filter:... И IE цвета по другому отбражает.

В итоге, не совсем удобный вариант, но ничего другого я не смог найти. Правда есть есть еще библиотека на jquery, но я не разбираюсь в jquery.

Edited by paska
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
Go to question listing
×
×
  • 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

  I accept