Создание бэкграундов для веб-страниц.
(1/1)
grimgav:
Цитата: Alder от Март 25, 2007, 01:50:38
Мой заказик простой :)
Хотелось бы получить сведения о создании красивых бэкграундов для веб-странички (не в 1*1 пиксель рзмером ;))
Существует 2 способа задания бэкграунда у страниц:
1. Указание атрибута bgcolor и background у тега <body> которые отвечают за цвет и изображение соответственно. Код выглядит следующим образом:
Код:
...<body bgcolor="#cc0000" background="images/red_background.jpg">
С появлением листов стилей (CSS) оформительские атрибуты тега <body> были помечены как устаревшие и могут быть убраны из последующих реализаций языка HTML. W3C рекомендует использовать для этих целей CSS.
2. Использование свойств группы background в CSS. К ним онтосятся:
background-color: указывает на цвет фона страницы. Может принимать как строчное значение с названием цвета, так и числовое значение в RGB системе.Код:
/* В данном примере все записи устанавливают один и тот же цвет фона - красный*/
body {
background-color: red;
background-color: #f00;
background-color: #ff0000;
background-color: rgb(255,0,0);
background-color: rgb(100%, 0%, 0%);
}
background-image: указывает путь к файлу изображения для фона.
Код:
body {
background-image: url('images/site_background.jpg');
}
background-repeat: данное свойство отвечает за размножение изображения для фона. Может принимат значения repeat (изображение размножается горизонтально и вертикально), repeat-x (изображение размножается только горизонтально), repeat-y (изображение размножается только вертикально), no-repeat (изображение не размножается: выводится только одна копия изображения).Код:
body {
background-image: url('images/site_background.jpg');
background-repeat: repeat-x;
}
background-attachment: указывает будет ли фон прокручиваться вместе с содержимым страницы (значение scroll) или не будет прокручиваться (значение fixed).
Код:
body {
background-image: url('images/site_background.jpg');
background-attachment: fixed;
}
background-position: указывает в каком месте будет размещено исходное изображение для фона. Для указания этого места используются пары значений для задания координаты х и у соответственно относительно верхнего левого угла браузера. Такими значениями могут быть величины в процентном отношении к ширине и высоте окна браузера (background-position: 20% 30%;), значения в пикселях (background-position: 200 300;), или пары значений для вертикального (top, middle, bottom) и горизонтального (left, center, right) позиционирования.
Код:
/*В данном случае изображение будет размножено по центру окна в вертикальном направлении*/
body {
background-image: url('images/site_background.jpg');
background-position: top center;
background-repeat: repeat-y;
}
Подробней смотрите в спецификации CSS.
С теорией пока все.
Насколько я понял Alder'а интересует процесс создание размножаемого фона, чтобы не было заметно стыков? Делается это следующим образом:
01. Создаем в фотошопе новый документ, скажем 320х494 пикселей. Рисуем на нем какой-нибудь узор.02. Далее используем фильтр Offset (Filter > Other > Offset...). В поле Horizontal указываем половину от ширины нашего изображения, т.е. 160 пикселей. При этом изображение сдвигается на половину, переходя на левую сторону.03. Продолжаем дорисовывать нашу плитку для фона.04. Опять сдвигаем изображение по горизонтали на половину ширины.05. Заполняем пустое пространство (если это необходимо).06. Опять сдвигаем по горизонтали на половину ширины.07. Заполняем пустое пространство (если это необходимо).08. Сдвигаем изображение по вертикали на половину высоты.09. Заполняем пустое место. При необходимости эту процедуру можно повторить несколько раз. В итоге мы получаем готовую плитку для заполнения фона страницы.
10. Приведены изображения с размноженными плитками разного размера.
Теперь создадим на основе уже полученной плитки новую, которая будет размножаться нами только по горизонтали в верху страницы.
01. За основу возьмем плитку размером 40х62 пикселя. Откроем ее в фотошопе.02. Определим ее как шаблон. Для этого выделим все изображение (Select > All или Ctrl+A) и выберем пункт меню Edit > Define Pattern... Назовем наш шаблон cell =)03. Создадим новое изображение ширина которого будет такой же как и у нашей плитки 40 пикселей, а высота в несколько раз больше, 600 пикселей.04. Заполним теперь новое изображение нашим шаблоном cell. Для этого выберем пункт меню Edit > Fill...05. В появившемся диалоге выберем в поле Use значение Pattern, а ниже в поле Custom Pattern наш шаблон cell.06. Мы получим изображение заполненное по вертикали нашим шаблоном.07. Добавим теперь в нижней части градиент переходящий из прозрачного в цвет нашего фона. Таким образом мы получили изображение плитки которой можно заполнить нашу страницу. К тегу <body> был применен следующий стиль: Код:
body {
background: url('hor-fill.jpg') #f1eecd top left repeat-x;
}
Alder:
Во! Самое оно! Спасибо :)
Держи законный +1
grimgav:
Цитата: Alder от Март 25, 2007, 06:32:25
Во! Самое оно! Спасибо :)
Держи законный +1
Гы =)) процесс пошел =))
PS: там на катринки кликать можно, чтобы в полный размер посмотреть.
petru4o:
спасибо.все доходчиво.+1
grimgav:
Цитата: petru4o от Март 25, 2007, 09:45:35
спасибо.все доходчиво.+1
Всегда пожалуйста.
Навигация