Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 25.05.2011, 19:49   #1
DrStrangeLove
Пользователь
 
Регистрация: 18.04.2010
Сообщений: 56
По умолчанию Прозрачный градиент - Фон не просто прозрачный, есть градиент - к верху он светлеет

Есть такой шаблон.

Основной контент находится в слое с прозрачным фоном. Фон не просто прозрачный, есть градиент - к верху он светлеет.

Как сделать такой фон?? Просто вырезать большую фон. картинку??
Или полоску и замостить?? тогда какая должна быть полоска??


Заранее Спасибо!!
DrStrangeLove вне форума Ответить с цитированием
Старый 25.05.2011, 20:04   #2
Виталий Желтяков
Старожил
 
Аватар для Виталий Желтяков
 
Регистрация: 19.04.2010
Сообщений: 2,702
По умолчанию

Полоска должна быть 1*на_сколько_нужно png24
Виталий Желтяков вне форума Ответить с цитированием
Старый 25.05.2011, 20:08   #3
DrStrangeLove
Пользователь
 
Регистрация: 18.04.2010
Сообщений: 56
По умолчанию

Цитата:
Сообщение от Виталий Желтяков Посмотреть сообщение
Полоска должна быть 1*на_сколько_нужно png24

т.е. ставить repeat-x??

Для такого макета целесообразно задавать жёстко высоту (на_сколько_нужно)??

Последний раз редактировалось DrStrangeLove; 25.05.2011 в 20:13.
DrStrangeLove вне форума Ответить с цитированием
Старый 26.05.2011, 00:44   #4
Blondy
Участник клуба
 
Аватар для Blondy
 
Регистрация: 07.07.2009
Сообщений: 1,386
По умолчанию

Есть два решения -оба искуственные.

1) Делать в графическом редакторе целиковую подложку с градиентом каким нибудь стандартным размером и потом уже выезжать на CSS свойстве backgroung-repeat: repeat Х (в случае более широкого монитора продолжает заливку по горизонтали ). По вертикали backgroung-repeat не используйте с градиентом ни в коем случае - поплывет сразу полосками. Будьте акуратнее, когла рисуете градиент - дрогнит рука и потом в случае repeat Х у Вас в месте стыка очень четко может проявиться "ступенька".

2) Во втором случае полный градиент не получится, но можно добиться очень эффектной комбинации. В графическом редакторе создается два модуля основной молуль (основной цвет) или непосредственно на сайте создается подходящая фоновая заливка (так естественее выглядеть будет и "весить" поменьше) и к нему растушованные модули градиента (отдельно). И потом всю эту конструкцию собираете с помощью CSS и div (или таблицы - в зависимости от того, в чем верстаете). Присмотритесь к сайтам, там очень часто проблема градиента решается именно вторым способом. К тому же так исчезает проблема подгонки по высоте. Пример - модуль градиента - основной блок (резиновой высоты) - модуль градиента. Основной блок будет подгоняться по высоте под контент основного текста, а на градиент можно свинтить менюшки и т.д.

В качестве примера градиента из двух кусков - применение на сайте
http://www.dreamwire.nl/
Видите, основной блок - заливка в основной цвет градиента, а маленький кусок сверху - градиент. Вкусно смотриться, не так ли?))))

Присмотревшись в Photoshop к Вашему шаблону стало ясно, что все, вероятно, решено с помощью свойства CSS opasity. Прямо видно как через основной блок проступает фотография-подложка.
Как сказано в справочнике www.htmlbook.ru это свойство определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

Если Вы помните откуда Вы взяли этот образец, попробуйте на этом сайте почитать кодировку этой работы для CSS.

Возможно, все это решено и при помощи Java, но я в ней вообще пас....

Попробуйте поиграть с opasity
"Все мы жаждем чудес. Чисто человеческое свойство." Carl Sagan
Blondy вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS Как сделать двусторонний градиент-фон hopeman HTML и CSS 6 25.04.2012 10:48
Прозрачный фон quadrat Win Api 7 15.02.2012 01:03
Прозрачный фон EnemyT2 Общие вопросы Delphi 0 26.04.2010 23:28
Прозрачный фон xakkkkker Мультимедиа в Delphi 10 24.12.2008 09:44
Фон: ГРАДИЕНТ PAVEL315 HTML и CSS 2 13.03.2007 17:58