вопрос по html и градиентах

TW
На сайте с 18.04.2006
Offline
118
1176

Здравствуйте!

Подскажите как сделать градиентную заливку таблицы?

Для IE понятно, а чтобы для FireFox и Opera корректно отображались ?

P.S. Надеюсь создал в соответствующем топике.

MASe
На сайте с 17.09.2002
Offline
219
#1

а какая разница для какого броузера то??? кроссброузерность должна быть....

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

Only God Can Judge Me... Nobody Else... Дрезна (http://www.drezna.ru/) Помощники: Sape (http://www.sape.ru/r.167724536c.php)
R2
На сайте с 01.02.2007
Offline
28
#2

Если имеется ввиду:

filter : progid : DXImageTransform.Microsoft.gradient

то имхо это работает как раз только для IE

Поэтому :

MASe:
кроссброузерность должна быть....
Ёжик В Тумане
На сайте с 26.07.2006
Offline
16
#3
ThatWhich:
...чтобы для FireFox и Opera корректно отображались ?

Для этих браузеров придется использовать SVG, но SVG не работает в IE без установки специального плагина, вот несколько примеров, того что можно сделать в SVG:

http://www.croczilla.com/svg/samples/

Думаю, Вам вообще надо вот это:

http://www.croczilla.com/svg/samples/gradients1/gradients1.svg

http://www.croczilla.com/svg/samples/gradients2/gradients2.svg

http://www.croczilla.com/svg/samples/circles1/circles1.svg

А вообще, либо скажите дизайнеру, что так делать глупо, либо пусть он рисует это во Flash, кросс браузерность (если у человека вообще флеш включена) и красота. Только, геморроя еще больше, чем использовать выше перечисленные методы.

Ушел в себя, забыл про форум.
Вернусь ли? Не знаю... Если нужен, пишите в аську...
Василий Ткачев
На сайте с 19.05.2005
Offline
481
#4

фоном градиент положить и счастье обеспечено

юзать фильтры ие - бред полнейший.. это просто неуважение остальной аудитории

Продвигаем естественно ( http://www.inetessentials.ru/ ) и непринужденно. Практический курс по оптимизации ( https://allintop.ru/optimization/ ) - без воды и на основе сайтов студентов. Ежегодная конференция All in Top Conf (https://www.allintopconf.ru/)
MASe
На сайте с 17.09.2002
Offline
219
#5
inetessentials:
фоном градиент положить и счастье обеспечено
юзать фильтры ие - бред полнейший.. это просто неуважение остальной аудитории

Вась... ну конечно фоном... тока фон этот нужно накладывать так, чтобы и в таблицах тянущихся нормально работало, а не оставались дыры с белым бекграундом....

фильтры - нонсенс

Василий Ткачев
На сайте с 19.05.2005
Offline
481
#6
MASe:
Вась... ну конечно фоном... тока фон этот нужно накладывать так, чтобы и в таблицах тянущихся нормально работало, а не оставались дыры с белым бекграундом....

фильтры - нонсенс

ну это зависит от кривоты рук..

таблицы для меня тоже уже нонсенс :)

MASe
На сайте с 17.09.2002
Offline
219
#7
inetessentials:
ну это зависит от кривоты рук..
таблицы для меня тоже уже нонсенс :)

ну дивы то тоже могут растягиваться...

а кривота рук... да оглянись вокруг ;-).... у тебя же за спиной верстальщик сидит... правда неплохой.... но все равно...

Василий Ткачев
На сайте с 19.05.2005
Offline
481
#8
MASe:
ну дивы то тоже могут растягиваться...

а кривота рук... да оглянись вокруг ;-).... у тебя же за спиной верстальщик сидит... правда неплохой.... но все равно...

гыгы.. так советуется же :)

ученье свет вообще..

TW
На сайте с 18.04.2006
Offline
118
#9

Ну допустим в ширину понятно - 1px картинка фоном таблицы.

а высота ? чтобы резиновая была?

(может я чего-то не понимаю...)

Mmonger
На сайте с 01.12.2005
Offline
165
#10
ThatWhich:
Ну допустим в ширину понятно - 1px картинка фоном таблицы.
а высота ? чтобы резиновая была?
(может я чего-то не понимаю...)

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

Пример: style="background:#0000ff url('gradient.jpg') no-repeat left top" - пример для горизонтального градиента, перетекающего в синий цвет справа.

Всё будет хорошо, но мы приложим усилия!

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