Градиент - просто и сердито

[romulus]

У меня есть знакомый, который написал скрипт в виде бегающего по карте луча фонарика. Этот геморрой при входе на сайт испытывает нервы у всех  3 минуты. Много видел в сети таких сайтов. Проще найти другой сайт, чем ждать (неизвестно заранее ведь еще сколько).  

Я к тому, что есть другие способы сделать что-то необычное. Даже простой градиент выглядит классно.
Попробуйте - не пожалеете.

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

Градиент в хтмл выглядит классно на этом же компе. Но когда выложен в сети, то он состоит как бы из полос горизонтальных разной степеней плотности, а не смотрится цельно с постепенной градацией.

Где тут нестыковка?

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

Заранее благодарю.

ПС. Например, всеми почитаемый DrWeb в исталляторе имеет непомерно простенький градиентик.

[brainkiller]

Код в студию! Все остальное - лирика.

[romulus]

OK. Тока прошу меня персонально не критиковать, потому как это написал мой редактор автоматом, а не я сам, сорри.

Чего я  жду, каких советов? - Може нужен-есть или нет еще пока "особый" какой код, который позволяет или позволит 1:1 по качеству иметь изображение градиента что на самом компе, где лежит градиент, что в сети ( то есть удаленно).  Ну, к примеру, в коде видно разрешение 600х800. А у меня на компе 1024х1280 и я хотел бы сайт под это оптимизировать. Дык в коде должно быть минимальное или можно и больше поставить? Как это отразится на других элементах кода или никак? Где  в коде задаются эти "ступеньки" будущих горизонтальных полос при развертывании изображения градиента?  
Пасибо.





style=\'tab-interval:35.4pt\'>

 

[hanslinger]

о мой моск
про то, что есть что-то, кроме IE, понятно, не слышал начинающий дизайнер

[romulus]

Помимо хтмл кода в жизни еще много чаво есь. А начинающим быть не грешно. Это ж не петух у параши. Если сказать  нечего, то и хрень всякую нести нечего, земеля. Ну ты меня понял, надеюсь.

ПЫСЫ. Да простит меня уважаемый модератор за оффтопик, но я действительно люблю IE с хорошей надстройкой. В то время как всеми  обожаемому всеми FF еще может очень далеко до IE +  надстройка.

""Между тем, согласно заявлениям участников конференции ToorCon, в Firefox присутствуют не менее трех десятков непропатченных дыр. Недавно проведенная проверка браузера Firefox при помощи анализатора Klocwork K7 показала, что в программном коде этого продукта содержатся 655 багов и 71 потенциальная уязвимость.""

[brainkiller]

М-да... Бросайте этот редактор.

[CGVictor]

romulus
Ну раз тут про модераториал вспомнили - влезу.
Итак, мое мнение.

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

По проблеме: отчего не работает та или иная технология Майкрософт - вопрос, скорее, риторический. Движок отрисовки для vml-шейпов у IE ни разу не был достаточно документирован, и сказать тут что-то конкретное я не смогу.

По решению: есть масса других способов изобразить градиент. CSS-фильтры, DX-фильтры, узкие решения на JS и масса прочей дребедени. А можно и в картинку вылить. Но вот какой вопрос: применение этих технологий неминуемо потребует пересмотра и пересборки всей остальной (=вашей) разметки, потому что не бывает "чуть-чуть правильно" и "чуть-чуть работает". Это уже вопрос не форумного треда - а более бизнес-задачи.

Итак: из внятных решений у нас есть
- css-фильтр opacity
filter:alpha(Opacity=80, FinishOpacity=70, Style=2)
- dx-transform
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=\'#FFFFFF\', startColorstr=\'#C0CFE2\', gradientType=\'0\')
- работа с изображениями
Остальное лирика.

Ну и напоследок, настоятельно рекомендую взять редактор из отраслевых стандартов (редакторы от msft сюда не относятся),
а также изучить исторические предпосылки текущего состояния и развития верстки в вебе.
У меня всё, спасибо.

[hanslinger]

начинающим быть не грешно

да я и не говорил, что грешно

начинающий vml вряд ли знает
и надо определиться, делаешь ты для себя с мега-надстройкой или для людей, которые про эту надстройку не слышали, а пользуются FF/Opera/Safari/Konqueror и так далее. ни в одном браузере микрософтовская шняга не работает.

нормальный выход - делать большую по высоте картинку шириной в 1px (или наоборот) и ставить ее фоном.
например, как здесь

[hanslinger]

про дыры в FF, кстати, смешно, поржал

[romulus]

CGVictor

С благодарностью прочувствовал весь пафос проблематики мелкософта. Уже давно отказался от Ворда97 в качестве вебредактора и перешел на дримвивер. Опять же благодарен вашему форуму за это (было дело ранее, а это заготовка старая 2005 года у меня с кодом).

Еще скажите мне плииз пару слов поподробнее про css  и dx фильтры.
Цель и функция использования и отдельных его параметров. Куда его ставить и вместе или вместо чего то в коде.

Хотя я склоняюсь к внедрению картинки на бэкграунде, прослушав наставления в целом.

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


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

Когда обезьяну выпускают на холст, чтобы она его полапала краской и превратила в "шедевр", то полная гармония и симметрия выглядят разумеется идиотизмом. Отстал я от жизни. Вона у меня пацан сосед за стенкой с 4 утра слушает тока мерцательные аритмичные барабаны, без мелодии и гармонии (ну зачем такая муть устаревшая!).  Ну да ... и шрифты на сайтах, когда ошметки на перо поймались в чернилке и им пишут с кляксами по бумаге... это ныне современно...

Всем пасибо за поддержку. Вот тока не знаю пока, как подсчитать размер картинки для бэкграунда, примерно.
У меня высота примерно 1,5 экрана при прокрутке должна быть.  Не более 2 высот экрана. Как картинку при разрешщнии 1024 х 1280 подсчитать прально?

[CGVictor]

romulus
Ну ладно. Главное в этом мире - желание становиться лучше, так?

Про фильтры.

CSS:alpha задает прозрачность одного элемента относительно других. Для градиента это означает, что у нас есть элемент-контейнер одного цвета, а его заполняет другой, у которого фильтром задана прозрачность. На выходе - искомый эффект. Style там задает направление градиента (0..3, только по 90 град.). Работает там, где декларирована поддержка CSS2. Т.е. Firefox тоже, если грамотно применить. Впрочем, есть нюансы (moz-Opacity и moz-Alpha).

CSS:progid:DXImageTransform создает градиент DX-фильтром, что требует на клиентской платформе а) win platform, б) dx версии, вроде, 6+. Файрфокс его когда-то отображал (0.9.*), сейчас вроде нет, но какие-то способы заставить это работать - есть. * Сейчас меня коллеги поправят с уточнением. Зато держит всякие радиальные и т.п. Для IE - самое оно.

Писать всё это нужно в стилях для элемента. Т.е. style="filter:..." или . Ничего нового.

* Можно набить названия фильтров в Google, примеры попадутся 100%.

Картинка - ну что ж, тоже хорошо. Зато проверено.
Можно извратиться с PNG, кстати. Помнится, ЛебедевGroup там что-то выкладываели по беспроблемному отображению полной png-alpha...

** Я ж не говорю, что msft - плохо. Да и не скажу так, у меня с ними отношения уже давно более чем хорошие. Но строить прогнозируемые и управляемые решения на их legacy-технологиях у меня вот ни разу не получалось. Посмотрим, что дальше будет.

[CGVictor]

romulus
Про расчет картинки не понял. Что-что требуется сделать?

[romulus]

А эти фильтры сами по себе применяются или в совокупности с уже имеющимся друцгим кодом по градиенту (ну тоесть, вместо моего кода или вместе с ним)?

Конечно, это все эксперимент, я хотел бы что б и на маках градиент был виден, не тока на винде, потому как художники чаще на них работают. Еще один аргумент в пользу картинки.

[romulus]

CGVictor:
romulus
Про расчет картинки не понял. Что-что требуется сделать?

Ну если мы друг друга адекватно понимаем, то картинка   должна быть в JPG в виде фона сделана и внедрена в  html страницу, а поверх нее надо тексты писать.

Где взять такой код чтоб развернуть градиент из 1 pix?

[romulus]

hanslinger:
про дыры в FF, кстати, смешно, поржал

Firefox шпионит в пользу Google!
Список адресов,по которым браузер Firefox передает конфиденциальную информацию узлам Google:

*выявленные с помощью логов моего фаервола:
1. sb.google.com IP:72.14.253.91-72.14.253.95;
2. google-analytics.com IP:209.85.139.99, 209.85.139.104, 209.85.139.147;

*выявленные с помощью других пользователей браузера Firefox:
1.диапазон IP:72.14.192.0-72.14.192.255

*опубликованные в журнале ][акер №5:
1. sb.google.com IP:72.14.217.93
2.2. google-analytics.com IP:209.85.137.99

*дополнительные адреса,выявленные с помощью сниффера,но почему-то не попавшие(!) в лог фаервола COMODO:
1. IP:72.14.203.95

Все эти адреса рекомендуется блокировать в фаерволах!

По мотивам статьи К.Касперски "У Google под колпаком" в журнале ][акер №5