КИТА unofficial

Компьютерный => Компьютерная графика и цифровое фото => Тема начата: grimgav от Март 25, 2007, 06:25:18


Название: Создание бэкграундов для веб-страниц.
Отправлено: grimgav от Март 25, 2007, 06:25:18
Цитата: 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 (http://alepira.ural.ru/css2/colors.html).

    С теорией пока все.

    Насколько я понял Alder'а интересует процесс создание размножаемого фона, чтобы не было заметно стыков? Делается это следующим образом:
    (http://clearone.com.ua/images/bg-tut/01_small.jpg) (http://clearone.com.ua/images/bg-tut/01.jpg)01. Создаем в фотошопе новый документ, скажем 320х494 пикселей. Рисуем на нем какой-нибудь узор.
    (http://clearone.com.ua/images/bg-tut/02_small.jpg) (http://clearone.com.ua/images/bg-tut/02.jpg)02. Далее используем фильтр Offset (Filter > Other > Offset...). В поле Horizontal указываем половину от ширины нашего изображения, т.е. 160 пикселей. При этом изображение сдвигается на половину, переходя на левую сторону.
    (http://clearone.com.ua/images/bg-tut/03_small.jpg) (http://clearone.com.ua/images/bg-tut/03.jpg)03. Продолжаем дорисовывать нашу плитку для фона.
    (http://clearone.com.ua/images/bg-tut/04_small.jpg) (http://clearone.com.ua/images/bg-tut/04.jpg)04. Опять сдвигаем изображение по горизонтали на половину ширины.
    (http://clearone.com.ua/images/bg-tut/05_small.jpg) (http://clearone.com.ua/images/bg-tut/05.jpg)05. Заполняем пустое пространство (если это необходимо).
    (http://clearone.com.ua/images/bg-tut/06_small.jpg) (http://clearone.com.ua/images/bg-tut/06.jpg)06. Опять сдвигаем по горизонтали на половину ширины.
    (http://clearone.com.ua/images/bg-tut/07_small.jpg) (http://clearone.com.ua/images/bg-tut/07.jpg)07. Заполняем пустое пространство (если это необходимо).
    (http://clearone.com.ua/images/bg-tut/08_small.jpg) (http://clearone.com.ua/images/bg-tut/08.jpg)08. Сдвигаем изображение по вертикали на половину высоты.
    (http://clearone.com.ua/images/bg-tut/09_small.jpg) (http://clearone.com.ua/images/bg-tut/09.jpg)09. Заполняем пустое место. При необходимости эту процедуру можно повторить несколько раз. В итоге мы получаем готовую плитку для заполнения фона страницы.
    (http://clearone.com.ua/images/bg-tut/big_fill_small.jpg) (http://clearone.com.ua/images/bg-tut/big_fill.jpg)

    (http://clearone.com.ua/images/bg-tut/mid_fill_small.jpg) (http://clearone.com.ua/images/bg-tut/mid_fill.jpg)

    (http://clearone.com.ua/images/bg-tut/small_fill_small.jpg) (http://clearone.com.ua/images/bg-tut/small_fill.jpg)

    (http://clearone.com.ua/images/bg-tut/micro_fill_small.jpg) (http://clearone.com.ua/images/bg-tut/micro_fill.jpg)    		10. Приведены изображения с размноженными плитками разного размера.

    Теперь создадим на основе уже полученной плитки новую, которая будет размножаться нами только по горизонтали в верху страницы.
    (http://clearone.com.ua/images/bg-tut/hor/01_small.jpg) (http://clearone.com.ua/images/bg-tut/hor/01.jpg)01. За основу возьмем плитку размером 40х62 пикселя. Откроем ее в фотошопе.
    (http://clearone.com.ua/images/bg-tut/hor/02_small.jpg) (http://clearone.com.ua/images/bg-tut/hor/02.jpg)02. Определим ее как шаблон. Для этого выделим все изображение (Select > All или Ctrl+A) и выберем пункт меню Edit > Define Pattern... Назовем наш шаблон cell =)
    03. Создадим новое изображение ширина которого будет такой же как и у нашей плитки 40 пикселей, а высота в несколько раз больше, 600 пикселей.
    04. Заполним теперь новое изображение нашим шаблоном cell. Для этого выберем пункт меню Edit > Fill...
    (http://clearone.com.ua/images/bg-tut/hor/05_small.jpg) (http://clearone.com.ua/images/bg-tut/hor/05.jpg)05. В появившемся диалоге выберем в поле Use значение Pattern, а ниже в поле Custom Pattern наш шаблон cell.
    (http://clearone.com.ua/images/bg-tut/hor/06_small.jpg) (http://clearone.com.ua/images/bg-tut/hor/06.jpg)06. Мы получим изображение заполненное по вертикали нашим шаблоном.
    (http://clearone.com.ua/images/bg-tut/hor/07_small.jpg) (http://clearone.com.ua/images/bg-tut/hor/07.jpg)07. Добавим теперь в нижней части градиент переходящий из прозрачного в цвет нашего фона. Таким образом мы получили изображение плитки которой можно заполнить нашу страницу (http://clearone.com.ua/images/bg-tut/hor/hor-fill.html). К тегу <body> был применен следующий стиль:
    Код:
    body {
      background: url('hor-fill.jpg') #f1eecd top left repeat-x;
    }

    Название: Re: Создание бэкграундов для веб-страниц.
    Отправлено: Alder от Март 25, 2007, 06:32:25
    Во! Самое оно! Спасибо :)
    Держи законный +1

    Название: Re: Создание бэкграундов для веб-страниц.
    Отправлено: grimgav от Март 25, 2007, 06:34:30
    Цитата: Alder от Март 25, 2007, 06:32:25
    Во! Самое оно! Спасибо :)
    Держи законный +1

    Гы =)) процесс пошел =))

    PS: там на катринки кликать можно, чтобы в полный размер посмотреть.

    Название: Re: Создание бэкграундов для веб-страниц.
    Отправлено: petru4o от Март 25, 2007, 09:45:35
    спасибо.все доходчиво.+1

    Название: Re: Создание бэкграундов для веб-страниц.
    Отправлено: grimgav от Март 25, 2007, 10:11:33
    Цитата: petru4o от Март 25, 2007, 09:45:35
    спасибо.все доходчиво.+1

    Всегда пожалуйста.


    Powered by SMF 1.1.8 | SMF © 2006-2008, Simple Machines LLC