Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Градиент прозрачности на краю окна, для прокручивающихся текстов 
:(
    Опции темы
12345c
Дата 17.8.2006, 23:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



Хочу подкинуть идею для изготовления градиента прозрачности. Сразу скажу, что в PNG этого не сделать - http://forum.vingrad.ru/index.php?showtopic=52681 . Видел грубое приближение такого бегущего текста прикрываемого сверху и снизу гифом. Были апплеты с таким эффектом. Текст проявляется из фона, делается ясным, а в конце области прокрутки тоже плавно исчезает. А что, если сделать правильный плавный градиент, набрав его из нескольких слоёв толщиной в 2-3 пиксела, плавно переходящих в цвет фона страницы? Генерируем этот ряд слоёв и включаем прокрутку текста. Иил не включаем, а крутим вручную. При реализации возможны артефакты. Кто возьмётся?
PM WWW   Вверх
Sardar
Дата 18.8.2006, 12:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Цитата(12345c @  17.8.2006,  22:00 Найти цитируемый пост)
Сразу скажу, что в PNG этого не сделать 

Почему нет? Делаем градиентный PNG-24, ставим. Для ИЕ нужно поставить фильтр AlphaImageLoader, но его нельзя псотавить для картинки в бекграунде (может кто знает как?). В итоге для ИЕ приходиться ставить градиент отдельно поверх всех, загрузив указанным выше ActiveX, которые есессно должны быть включены. Что то подобное:
Код

  //фиксим баг IE 6 -
  //для IE 7 мелкософт обязался кровью изойти, но убрать этот баг.
  if(/MSIE ([5|6]\.\d+)/.test(navigator.userAgent) && navigator.platform == "Win32") {
     var d=document.getElementById('shadow_image_middle');
     d.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + url_to_long_image_since_you_cant_place_it_in_background + "',sizingMethod='crop')";
     //либо подгрузить маленькую картинку и расплодить её
  }



--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
12345c
Дата 18.8.2006, 15:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



Потому что прозрачность не градиентна, как указано по ссылке

Цитата
Прозрачность. В PNG-24, кстати, есть 256 градаций прозрачности. Правда, прозрачный градиент не сделать — в одном документе можно сохранить только одну степень прозрачности.


PM WWW   Вверх
Sardar
Дата 18.8.2006, 17:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



12345c, ну и что это значит? Заблуждаемся или лень проверить? smile
Открой фотошоп/gimp/что угодно, сделай градиентную прозрачность, постарайся сохранить её в PNG -24, да так что бы эта прозрачность убилась smile

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


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
12345c
Дата 13.9.2006, 15:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



Цитата(Sardar @  18.8.2006,  12:54 Найти цитируемый пост)
Для ИЕ нужно поставить фильтр AlphaImageLoader, но его нельзя поставить для картинки в бекграунде (может кто знает как?). 
Здесь http://www.alistapart.com/articles/pngopacity/ (англ.) что-то про это пишут, не проверял, не разбирался.

Ссылки по теме "Прозрачность в IE":
http://www.nbsp.ru/articles/2003/02/18/prozrachnyi_png.html - Прозрачный PNG, с комментариями
http://forum.firenet.ru/index.php?showtopic=251 - Прозрачные PNG в MSIE
http://www.webcode.ru/cgi/png/ - Прозрачность png. Формирование браузерозависимого кода на серверной стороне.
http://www.webmascon.com/forum/viewtopic.p...8d0ef3b49674995 - PNG или GIF - обсуждение в форуме
http://www.artlebedev.ru/tools/technogrett...ml/shadows/new/ - способы рисования теней и рамок элементов оформления 
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html - PNG Behavior (англ.)

http://forum.vingrad.ru/index.php?showtopic=33475 - c тестом прозрачности для IE
http://forum.vingrad.ru/index.php?showtopic=107925 - Наложить картинку-фон на одноцветный фон ячейки
http://forum.vingrad.ru/index.php?showtopic=70591 - filter:progid:DXImageTransform
http://forum.vingrad.ru/index.php?showtopic=47033 -  Фильтры и Эффекты перехода
http://forum.vingrad.ru/index.php?showtopic=32774 , http://forum.vingrad.ru/index.php?showtopic=58990 ,  - прозрачность для флеш
http://forum.vingrad.ru/index.php?showtopic=43105 - png-формат в IE не отображается с прозрачным фоном; про необходимость DirectX для IE с этим решением.
PM WWW   Вверх
Sardar
Дата 13.9.2006, 19:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Цитата(12345c @  13.9.2006,  14:53 Найти цитируемый пост)
Здесь http://www.alistapart.com/articles/pngopacity/ (англ.) что-то про это пишут, не проверял, не разбирался.

Все решения на AlphaImageLoader (если прозрачность нужна отдельным каналом в PNG) или пользоваться CSS 3 для задания прозрачности всей картинке (можно даже тень попиксельно на div'ах сделать  smile ).

НО:
Цитата
IE5/Mac only supports alpha transparency when the PNG resides in an <img> tag, not when it’s set as the background property of a DIV. So PNGs displayed with the OpacityObject will appear 100% opaque in IE5/Mac. This problem is especially frustrating because IE5/Mac is the only browser which natively supports PNG and behaves this way. We’ve notified Microsoft about this apparent bug and hope for it to be fixed in an upcoming release.

ИЕ по прежнему не лечиться до версии 7.0, там обещают нормальный PNG, следовательно его можно будет положить в бекграунд.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
12345c
Дата 20.2.2007, 15:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



Цитата(Sardar @  18.8.2006,  17:09 Найти цитируемый пост)
12345c, ну и что это значит? Заблуждаемся или лень проверить? smile
Проверил - правильные браузеры и ИЕ7 поддерживают полупрозрачность картинки, в том числе попиксельную. 

Другой вопрос - как её сделать через альфа-канал Фотошопа?
Полупрозрачность можно рисовать кистью-стирателем, присваивать слою или делать градиент со специальными установками (написано в справке). Но нет возможности задать альфа-канал (как делать - тоже в справке) как канал прозрачности. В 6-1 версии. Может, в следующих версиях Фотошопа это сделано?

PM WWW   Вверх
Sardar
Дата 20.2.2007, 18:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



 smile 
Цитата(12345c @  20.2.2007,  14:54 Найти цитируемый пост)
Другой вопрос - как её сделать через альфа-канал Фотошопа?

Это ещё с древних времён было. Отркой каналы, создай новый альфа-канал, залей градиентом (инструмент такой есть). Для загогулин можно просто создать новый слой, нарисовать кривыми /чем угодно фигуру, залить градиентом, ctrl+click на слое для снятия селекции (можно сохранить в альфа канал).

Далее с полученным градиентом можно взять как селекцию и просто delete с нужной картинки. Можно по моему как слой-маску положить на другой слой, задавая градиентом не прозрачность.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
JSman
Дата 21.2.2007, 00:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 279
Регистрация: 10.7.2006

Репутация: нет
Всего: 4



пора использовать Fireworks  smile  smile  smile.

и все-таки не стоит забывать, что HTML нужен в 1ю очередь для передачи информации. Когда уже идут излишние красивости, то их нужно заменить на графику или activex объект. Поэтому вопросы по поводу прозрачности bg не стоит решать.  
PM ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0513 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.