как сделать градиент в html? - Компьютерный форум OSzone.net

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

- - как сделать градиент в html? (http://forum.oszone.net/showthread.php?t=78299)

rizz	26-01-2007 23:24 541898

как сделать градиент в html?

как сделать градиент в html? например как в этом форуме, вверху, это ведь не картинка

VeshchiyOleg

26-01-2007 23:41 541905

именно картинка!!!
высотой в один пиксель
жмешь правой кнопкой на странице и выбираешь "Просмотр HTML-кода" или как у тебя...
там есть такие строки:

HTML код:

<table width="100%" border="0" style="border-bottom: 1px solid #668AD6;" cellpadding="4" cellspacing="0" bgcolor="#FFFFFF">

  <tr><td style="padding-left:20px;">



... тут был рекламный банер - VO



</td><td width="50%" align="right" style="background: url(images/search-grad.gif) repeat-y right top; FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#6A89C9', gradientType='1')">



.... тут была форма поиска - VO



</td></tr></table></noindex>

обрати внимание на
<td width="50%" align="right" style="background: url(images/search-grad.gif) repeat-y right top; FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#6A89C9', gradientType='1')"> это оно

XCodeR

27-01-2007 00:19 541920

rizz
как вариант можно использовать фильтры
но работать будет только в IE.

ivank

27-01-2007 02:39 541965

XCodeR
Как ни странно, но прекрасно работает со вторым файрфоксом под линуксом. Всё таки ребятя из МоФо работают над совместимостью. Уверен, что в Опере работать тоже будет (они не меньше внимания совместимости с ие уделяют времени)

XCodeR

27-01-2007 12:13 542075

ivank
не знал....
просто сам фильтрами не пользуюсь...

rizz	27-01-2007 20:04 542303

а как эту картинку так вставить, чтоб она всё равно грузилась, у меня ведь графика отключена, а её видно

Prisoner

27-01-2007 20:41 542325

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

rizz	28-01-2007 01:07 542409

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

Prisoner

28-01-2007 08:16 542476

фон обычно можно сделать следующим образом:
<tag style="background: url("path/to/file.ext") no-repeat"> - неразмножаемый фон тега tag. За подробностями к документации. Как применять стиль к тегу (style, class или через id - дело вкуса).

Vlad Drakula

28-01-2007 11:35 542534

VeshchiyOleg
там и картинка и градиент.

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

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

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

rizz	28-01-2007 20:53 542766

Vlad Drakula

Цитата:

там и картинка и градиент

точно! у меня же IE6, поэтому градиент я вижу, а картинка эта не грузится, а я её ищу обыскался

Цитата:

фильтры работаю только в IE

а как с остальными браузерами?

вот сделал, робит))

HTML код:

<html>

<head>



<title>Градиент</title>

</head>



<body>



<TABLE width="100%" border=0>

  <TBODY>

  <TR>

    <TD 

    style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#5585CD',

    endColorStr='#BFD6FA', gradientType='1')" height=136>Градиент тут

</TD></TR>

</TBODY>

</TABLE>



</body>

</html>

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

ivank

28-01-2007 21:10 542770

Vlad Drakula
Согласен, что сморозил глупость до этого. Не обратил внимание на кусок с images/search-grad.gif.

Время: 07:19.