Forum Webscript.Ru

Дизайн и Верстка => Всё о Html => Тема начата: romulus от 19 Июля 2007, 20:51:38

Название: Градиент - просто и сердито
Отправлено: romulus от 19 Июля 2007, 20:51:38

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

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

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

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

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

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

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

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

Название: Градиент - просто и сердито
Отправлено: brainkiller от 19 Июля 2007, 21:39:49

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

Название: Градиент - просто и сердито
Отправлено: romulus от 20 Июля 2007, 10:55:52

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

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





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

 

Название: Градиент - просто и сердито
Отправлено: hanslinger от 20 Июля 2007, 11:45:13

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

Название: Градиент - просто и сердито
Отправлено: romulus от 20 Июля 2007, 12:37:32

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

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

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

Название: Градиент - просто и сердито
Отправлено: brainkiller от 20 Июля 2007, 16:20:05

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

Название: Градиент - просто и сердито
Отправлено: CGVictor от 20 Июля 2007, 16:29:08

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 от 20 Июля 2007, 16:55:14

Цитировать

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

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

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

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

Название: Градиент - просто и сердито
Отправлено: hanslinger от 20 Июля 2007, 16:56:30

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

Название: Градиент - просто и сердито
Отправлено: romulus от 20 Июля 2007, 18:28:49

CGVictor

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

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

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

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


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

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

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

Название: Градиент - просто и сердито
Отправлено: CGVictor от 20 Июля 2007, 18:43:39

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 от 20 Июля 2007, 18:46:20

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

Название: Градиент - просто и сердито
Отправлено: romulus от 20 Июля 2007, 18:55:20

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

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

Название: Градиент - просто и сердито
Отправлено: romulus от 20 Июля 2007, 18:59:25

Цитировать

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

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

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

Название: Градиент - просто и сердито
Отправлено: romulus от 21 Июля 2007, 19:03:29

Цитировать

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

Название: Градиент - просто и сердито
Отправлено: hanslinger от 23 Июля 2007, 13:43:16

Про бэкграунд я не говорил. Я говорил про фон в человеческом понимании этого слова. Потому что картинка, подключенная в CSS как background: url(), размер менять не будет.
всего-то надо положить div на задний план, а в него картинку с height="100%" и width="100%" (в общем случае).

Этот вариант самый простой и самый надежный.

CGVictor
LebedevGroup для отображения PNG в IE использует фильтр AlphaImageLoader. У него есть некоторые особенности, описанные в MSDN.

Название: Градиент - просто и сердито
Отправлено: hanslinger от 23 Июля 2007, 13:45:02

Цитировать

Firefox шпионит в пользу Google!

советую журнал ксакеп выбросить на помойку или читать его правильно: с надлежащей долей юмора

Название: Градиент - просто и сердито
Отправлено: CGVictor от 25 Июля 2007, 13:09:55

* Гм. Что-то кто-то тут не в духе последнее время.

Цитировать

romulus:
развернуть градиент из 1 pix?

Из чего-то вроде 230 x 1 px? Очень просто: прописать его фоном к чему угодно. Повторение фона работает по умолчанию.

Цитировать

hanslinger:
LebedevGroup для отображения PNG в IE использует фильтр

Это я к тому, что у них получилось решение для всего. И вроде бы удачное.

Цитировать

romulus:
Firefox шпионит в пользу Google

Ну, этот бред даже обсуждать не хочу. Есть масса описаний: что, как, когда и с какой целью FF передает третьим лицам. И есть масса же описаний, какие службы Гугля собирают и используют информацию.

Название: Градиент - просто и сердито
Отправлено: hanslinger от 25 Июля 2007, 14:50:47

Цитировать

Это я к тому, что у них получилось решение для всего. И вроде бы удачное.

Ну так решать что-то надо было только для IE :-) Остальные и так молодцы.

Название: Градиент - просто и сердито
Отправлено: romulus от 25 Июля 2007, 23:24:42

Про FF грить абще не хоцца.

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