| |
 69.4 Кб |
|
| | Кто скажет как этот прикрепленный рисунок (градиентная заливка) сделать фоном, чтобы при растяжке не было видно дублирования картинки. | |
| |
|
|
| |
|
|
| |
для: TetRiska
(26.08.2009 в 02:23)
| | | Никак. | |
| |
|
|
| |
|
|
| |
для: PAT
(26.08.2009 в 04:02)
| | | тогда перефразирую. как сделать подобный градиент, чтобы не было видно? | |
| |
|
|
| |
|
|
| |
для: TetRiska
(26.08.2009 в 13:43)
| | | Удачно перефразировано! Чтобы не было видно - не делать. | |
| |
|
|
| |
|
|
| |
для: sim5
(26.08.2009 в 13:46)
| | | В том плане чтобы не было видно стыков, когда будет дублировать картинку. Я видел пример в нете идеальных градиентов, но как сделать такой с моим градиентом :( | |
| |
|
|
| |
|
|
| |
для: TetRiska
(26.08.2009 в 14:29)
| | | Чтобы поместить на задний план масштабируемую картинку, ее надо поместить тэгом img в нижний z-index, а весь остальной контент накладывать сверху, аккуратно позиционируя элементы. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(26.08.2009 в 14:34)
| | | можно по подробней желательно с примером? | |
| |
|
|
| |
|
|
| |
для: TetRiska
(26.08.2009 в 16:45)
| | | Конечно.
пример - http://www.ventm.ru, главная страница.
Не самый валидный код, но что поделаешь...
"Фон" вставляется так:
<img src="img/mainbg.jpg" style="z-index:0;" height=100% width=100% align=center />
|
Остальные элементы примерно так:
<img style="position:absolute; bottom:0px; left:0px" src="img/leftflower.gif">
|
Ну а качество градиента - на глазок. Не забывая про юзеров с большими экранами.
_______________
В моей смерти прошу винить стохастический квазиградиент (баш) | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(26.08.2009 в 17:00)
| | | >Ну а качество градиента - на глазок. Не забывая про юзеров с большими экранами.
О каком качестве речь? | |
| |
|
|
| |
|
|
| |
для: TetRiska
(26.08.2009 в 14:29)
| | | Идеальный градиент это тот, который сделан с максимальным размером, поэтому стыков не будет по определению. Но он ресурсоемок. | |
| |
|
|
| |
|
|
| |
для: GeorgeIV
(26.08.2009 в 14:54)
| | | это известно мне, но не подходит из-за ресурсоемкости | |
| |
|
|
| |
|
|
| |
для: TetRiska
(26.08.2009 в 16:46)
| | | >это известно мне, но не подходит из-за ресурсоемкости
Вертикальный или горизонтальный градиент можно получить элементарно, используя для background-image однопиксельную полоску нужной длины залитую градиентом.
Для получения диагонального градиента можно сделать две полупрозрачные полоски в формате PNG. Одну поместить background-image для body, вторую для div-а, растянутого на весь экран | |
| |
|
|
| |
|
|
| |
для: dyadya
(28.08.2009 в 10:22)
| | | > Вертикальный или горизонтальный градиент можно получить элементарно, используя для background-image однопиксельную полоску нужной длины залитую градиентом.
Если я правильно понял, то ширина 1 пиксел, а длинна такая насколько растянут сайт по высоте?
> Для получения диагонального градиента можно сделать две полупрозрачные полоски в формате PNG. Одну поместить background-image для body, вторую для div-а, растянутого на весь экран
Немного не понял :( Собственно у меня диагональный градиент. Можете пример привести? Рисунок в самом верху прикреплен. Переход подобный должен быть, мне бы примерчик. спасибо | |
| |
|
|
| |
1.3 Кб |
|
| |
для: TetRiska
(28.08.2009 в 13:41)
| | | >Если я правильно понял, то ширина 1 пиксел, а длинна такая насколько растянут сайт по высоте?
1-я картинка: 1px -высота, ширина - максимальная, на которую Вы рассчитываете
2-я картинка: 1px -ширина, высота - опять же максимальная предполагаемая
>Немного не понял :( Собственно у меня диагональный градиент. Можете пример привести? Рисунок в самом верху прикреплен. Переход подобный должен быть, мне бы примерчик. спасибо
Вот так приблизительно я себе это представляю:
<html>
<head>
<style type="text/css">
* {margin: 0; padding: 0; border: 0;}
div {width: 100%; height: 100%; background-image: url(gr_v.png)}
body {background-image: url(gr_g.png);}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div></div>
</body>
</html>
|
| |
| |
|
|
| |
721 байт |
|
| |
для: dyadya
(29.08.2009 в 00:10)
| | | Прикрепляю вторую картинку. Делал по-быстрому чисто для примера (пример - рабочий). Если поиграться с градиентами можно достичь довольно интересных результатов. | |
| |
|
|
| |
40.5 Кб |
|
| |
для: dyadya
(29.08.2009 в 00:19)
| | | То, что получилось... | |
| |
|
|
| |
|
|
| |
для: dyadya
(29.08.2009 в 00:27)
| | | благодарю сделал под себя :) | |
| |
|
|
| |
|
|
| |
для: TetRiska
(29.08.2009 в 02:29)
| | | Поэкспериментировать с параметрами вашей картинки, дабы выяснить какая ее минимальная область необходима для того, чтобы создать впечатление единого фона, а не набора отдельных картинок. И не ресурсоемко вовсе получится... | |
| |
|
|
| |
|
|
| |
для: GeorgeIV
(26.08.2009 в 14:54)
| | | ... | |
| |
|
|
| |
|
|
| |
для: TetRiska
(26.08.2009 в 16:46)
| | | проблема еще не решена :( | |
| |
|
|
| |
|
|
| |
для: TetRiska
(26.08.2009 в 02:23)
| | |
table.background { background: url(./image.jpg) no-repeat top center }
|
| |
| |
|
|
| |
|
|
| |
для: Vyacheslav Tsv.
(29.08.2009 в 01:35)
| | | А не проще ли в фотошопе сделать маленький рисунок градиента как текстуру с перетекаемыми краями? Я лично так делаю!)) | |
| |
|
|
