Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Основные техники фона веб-страницы Категория: CSS
Название: Основные техники фона веб-страницы
Дата добавления: 14-01-2013
Раз просмотрено: 2647
Комментарии: 1
Рейтинг: * * * * * * · · · · (4 голоса)

Основные техники фона веб-страницы

Старое и всем известное свойство фона является одним из основных элементов, которые мы можем использовать в веб-дизайне. В этой статье будут рассмотрены четыре наиболее распространенных подхода к созданию фона страницы: от простого цвета до крупного изображения в качестве фона. Если вы только начинаете изучать веб-дизайн, вы найдете здесь некоторые полезные базовые CSS техники для использования в ваших будущих проектах.

Одноцветный фон

Вы не можете получить ничего проще, чем одноцветный фон у вашего сайта. Браузеры по умолчанию, устанавливают его белым, но вы можете задать свой собственный цвет фона для всей страницы и отдельных элементов:

body {
	background-color: #A1BAD1;
}

Простой цвет в качестве фона веб-страницы
Простой цвет в качестве фона веб-страницы

Повторяющийся фоновый рисунок

Существуют повторяющиеся узоры и текстуры всех видов и форм, от простых и малозаметных текстур с «шумом», до сложных и богато украшенных узорами орнаментов. По умолчанию, фоновое изображение будет повторяться и в X и Y направлениях, поэтому нет необходимости указывать это в вашем CSS коде. Не забудьте убедиться, что ваше фоновое изображение бесшовное, в противном случае вы увидите некрасивые линии, где изображение повторяется. Несмотря на задание повторяющегося фонового изображения, вы все равно должны установить цвет фона, для тех случаев, когда пользователь отключил показ изображений в браузере, или у него довольно медленная скорость интернета (чтобы пока картинка не загрузился был виден хотя бы цвет фона).

body {
	background-color: #A1BAD1;
	background-image: url('images/pattern.png');
}

Повторяющаяся текстура в качестве фона веб-страницы
Повторяющаяся текстура в качестве фона веб-страницы

Горизонтально и вертикально повторяющиеся фоны

Фоновые изображения в CSS можно повторять не только полностью, но и на осях X или Y исключительно. Повтора фона по оси X обычно используется, чтобы добавить градиент к веб-элементам, особенно к таким элементам, как кнопки. Тонкая полоска градиента, которая при повторении разместиться на всю ширину, может быть установлена в качестве фонового изображения для всей страницы. По умолчанию изображение будет позиционироваться в верхней части страницы, но выравнивание по центру или нижней части также может быть использовано. Цвет фона страницы должен быть установлен такой же, как и самый близкий к нему цвет градиента, чтобы обеспечить плавный переход от фонового изображения к цвету фона.

body {
	background-color: #A1BAD1;
	background-image: url('images/gradient.jpg');
	background-repeat: repeat-x;
}

Градиент в качестве фона веб-страницы
Градиент в качестве фона веб-страницы

Большие фоновые изображения

Задним фоном не обязательно должно быть маленькое изображение, которое будет повторяться определенным образом. Вы также можете использовать некоторую довольно большую графику. Так как размер большого фонового изображения будет выше, чем маленькой повторяющейся картинки, будьте внимательны с уровнем его сжатия, чтобы обеспечить быструю загрузку страницы у пользователя. Не имеет значения, насколько будет большим ваш фон, так  как фоновые изображения, конечно же, не влияют на полосы прокрутки. Чем больше окно браузера будет у пользователя, тем большую часть изображения он увидит. Большие фоновые изображения обязательно должны переходить в сплошной цвет (это реализуется с помощью градиентов), чтобы обеспечит плавный переход картинки в цвет фона, у тех пользователей, которые видят всю фоновую картинку благодаря большим экранам. Обычно эта техника реализуется так:

body {
	background-color: #A1BAD1;
	background-image: url('images/bg-image.jpg');
	background-position: center top;
	background-repeat: no-repeat;
}

Большое изображение в качестве фона веб-страницы
Большое изображение в качестве фона веб-страницы

Это интересно: «Эффект старой фотографии на CSS».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
Влад  •  2014-02-15 12:11:50
Хоть я и знал данную информацию, но для новичков будет очень полезно. Все расписано подробно и просто.