Всем привет! Сегодня поговорим об одной составной части дизайна любого блога — фон, или же бакгроунд (background). Потихоньку заполняется рубрика Уроки HTML, CSS, Div.

Создание фона и градиента в HTML и CSS

Немного мучая свой блог (шаблон), меняя на нем различные свойства в CSS — пришел к выводу, что вариант, который используется на данный момент более пригоден и белая подложка (фон контента) делает текст более читабельным. Осталось разобраться с плагином подсветки кода и допилить его дизайн, чтобы он выделялся среди основного текста. Также немного выделил блок подписки но не простым цветом, а градиентом, который более приятно смотрится для глаз.

Создание фона с использованием Css и HTML кода

Приступим к созданию простого фона без каких-либо свойств и градиентов. Первый простой способ создания фона для всей страницы с использованием стандартного языка разметки HTML. Отвечает за цвет фона параметр BGCOLOR, который дословно переводится как цвет фона. Устанавливается BGCOLOR в теге body, то есть внутри него. Таким способом нас учили на уроке информатики заливать всю страницу сайта.

Кроме того, цвет BGCOLOR можно задать двумя способами — на простом английском (например RED), или с помощью кода цвета, который используется в Html. Первый прост и пригоден, разве что для ознакомления, так как подобрать сложный цвет на нем будет просто невозможно (есть готовые варианты популярных цветов, которые сгенерированы как раз с помощью кода, но в тех случаях используются цвета, которые употребляют чаще всего девушки — персиковый и т.д.). Следовательно, стоит использовать кодовую разметку, в которой можно подобрать почти все тона. Создадим сначала фон с помощью слов, который как я сказал, указывается на английском. Пусть это будет желтый — YELLOW:

<html>
<body BGCOLOR = "YELLOW">
</body>
</html>

Как видно из кода, то фон задается совсем просто, цвет фона заключается в кавычки. Теперь создадим фон использованием кода. Желтый цвет будет иметь такой вид ffec00 — конечно, это не точно желтый, но приближенный к нему:

<html>
<body bgcolor = "#ffec00">
</body>
</html>

Здесь цвет уже задается после знака #, но тоже заключается в кавычки. А теперь выберем такой цвет, который не указать словом:

<html>
<body bgcolor = "#4d5f16">
</body>
</html>

Второй способ указать фон страницы — использовать заранее созданное изображение. Удобно тем, что есть простор для фантазий, нет рамок одних цветов. Задается фон также внутри тега body, только через параметр background.

Градиент в фоне

После него уже указывается путь к изображению. Но тут есть пара уловок, которые следует учесть. О них дальше, а сейчас создадим простой фон с использованием картинки:

<html>
<body background = "picture.jpg">
</body>
</html>

В данном случае фон также заключен в кавычки. Теперь про уловки, на которые можно попасться — обязательно проверяйте имена изображений, бывает так, что имя в теле кода не совпадает с именем изображения в папке.

Расположение файлов в HTML

Ошибки могут быть разные — орфографическая, регистры букв и расширения файла (за место *.jpg пишут *.jpeg). Следующая уловка — если изображение лежит в папке, которая не содержит в себе файл страницы html, то тут следует прописать путь до картинки. Вот как это выглядит:

<html>
<body background = "images/1.jpg">
</body>
</html>

Здесь удобно то, что все картинки лежат в одной папке и не создают путаницу своим количеством. Таким методом структурированы все шаблоны для WordPress и не только.

Теперь создадим фон для страницы с помощью CSS. Для начала создадите файл *.css, допустим style.css и подключите его к вашей странице:

<link rel="stylesheet" type="text/css" href="style.css">

Данную строку нужно написать между тегами head. Более подробно я писал про CSS в записи Что такое CSS, создание собственного стиля. Теперь создаем в нем шаблон для body:

body{

}

Пустую область дополняем кодом цвета:

body{
background:#cccccc;
}

Теперь при создании любой страницы, к которой подключен файл style.css будет серый фон.

Файлы для создания сайта

Чтобы задать изображение в качестве фона, то следует дополнить данный шаблон следующим образом:

body{
background:#d5e9ed url(/zoonews/services/helps/kak-sozdat-fon-css-gradient-css-instrumenty-dlya-sozdaniya-gradienta/images/1.jpg);
}

После url указывается путь до изображения, в данном случае он находится в папке images.

Создание градиентного фона с использованием Css

С простым фоном все понятно, теперь приступим к созданию фона в виде градиента. Самый простой способ — создать готовый градиент на любом редакторе, типа Photoshop и поставить его в качестве фона в файле style.css. Правда в этом способе есть свои уловки, которые можно решить довольно простым способом, но об этом ниже. Теперь создадим градиентный фон с помощью кода CSS. Данный код создает градиент, направленный от верхней точки к низу:

background-image: -webkit-linear-gradient(top, rgb(255,255,255) 50%, rgb(255,255,255) 50%, rgb(0,0,0) 100%);

Интересно было название webkit — движок для браузеров, который используется в KDE (среда окружения рабочего стола в Linux). Используется данный движок в таких браузерах, как Google Chrome, Safari, Midori, Maxthon, Konquer и т.д. Следовательно данный код подойдет для просмотра страниц на браузерах под webkit.

Ну а теперь разберем сам код — первые два участка кода указывают на верхние параметры части цвета градиента. В данном случае используется цифровой код для обозначения цвета (RGB). Проценты указывают на степень заполнения и рассеивания цвета. Третий участок кода — конечный цвет, до которого идет переход. Для браузеров Opera будет использоваться за место webkit — o, для mozilla — moz, для IE — ms. Есть вариант по проще:

background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 50%, rgb(0,0,0) 100%);

В данном случае используется лишь два участка градиента, но результат остается прежним.

Задание свойства для атрибута background в коде

Бывает так, что результат получается не таким, как ожидалось. Поэтому некоторые неурядицы можно исправить с помощью свойств, которые присущи background. Созданный фон с помощью картинки делается мозаикой, особенно это касается изображений низкого разрешения. Исправляется это заданием свойства repeat-x — изображение растянется по всему экрану.

Мозаика в фоне HTML

Если требуется, чтобы картинка была в единственном экземпляре и не была расположена мозаикой, задайте свойство для background no-repeat. Для расположения его по центру, устанавливаем свойство center, в верхней части — top, по правому краю right, по левому, соответственно left.

Также есть возможность установить расположение картинки внизу экрана — bottom. Расположения изображения можно комбинировать, допустим left center — расположение в центре по левому краю, center-center — изображение будет иметь позицию ровно по середине экрана.

Сервисы для создания CSS градиента для сайта

Чтобы облегчить создание простых и сложных градиентов с помощью CSS, созданы специальные сервисы, которые автоматически генерируют код градиента. Остановился на двух сервисах для создания градиента CSS — Gradient Generator и Ultimate CSS. Рассмотрим каждый из них.

Сервисы для создания градиента в CSS

Начну с Gradient Generator — он позволяет создавать вертикальный градиент с использованием нескольких цветов и настройки их положения. Интерфейс в себя включает настройку и добавление дополнительных цветов, сам пример градиента, точки начала и конца координат, код цвета — RGB или HEX. Внизу расположен сам код градиента для всех браузеров. По умолчанию уже создан готовый линейный-вертикальный двухцветный градиент.

Генератор кода CSS

Создадим свой, с использованием 3-х цветов, начальным положением -левый верхний край, и конечным — правый нижний. Формат цвета укажем стандартный RGB. Итак, приступим — Добавим новый цвет, для этого нажмите на знак плюс рядом с Color Swatches. Ниже появится 3 цвета, который настройте по желанию, а ниже укажите степень рассеивания для каждого цвета.

Теперь укажем позиции для расположения цветов: xStart — Left, yStart — Top, xEnd — Right, yEnd — Bottom, а формат цвета (Color Format) укажите RGB. Осталось только скопировать сгенерированный код в файл style.css:

background-image: linear-gradient(left top, rgb(0,0,0) 17%, rgb(181,144,69) 46%, rgb(255,255,255) 79%);
background-image: -o-linear-gradient(left top, rgb(0,0,0) 17%, rgb(181,144,69) 46%, rgb(255,255,255) 79%);
background-image: -moz-linear-gradient(left top, rgb(0,0,0) 17%, rgb(181,144,69) 46%, rgb(255,255,255) 79%);
background-image: -webkit-linear-gradient(left top, rgb(0,0,0) 17%, rgb(181,144,69) 46%, rgb(255,255,255) 79%);
background-image: -ms-linear-gradient(left top, rgb(0,0,0) 17%, rgb(181,144,69) 46%, rgb(255,255,255) 79%);

background-image: -webkit-gradient(
	linear,
	left top,
	right bottom,
	color-stop(0.17, rgb(0,0,0)),
	color-stop(0.46, rgb(181,144,69)),
	color-stop(0.79, rgb(255,255,255))
);

Приступим к более сложному, но в тоже время функциональному инструменту для создания градиента Ultimate CSS. Функционал напоминает Photoshop — есть готовые стили (Presets) — от простого двухцветного градиента, до градиента с прозрачным фоном. В блоке предварительного просмотра (Preview) можно выбрать тип градиента — горизонтальный, вертикальный, диагональный и радиальный.

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

Генератор CSS кода для HTML

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

Также нашел еще один инструмент для создания градиента в CSS — приложение ВКонтаке CSS Генератор Градиента. Его интерфейс напоминает Ultimate CSS, однако он русифицирован и более простой. Также есть блок стилей — Задать, в котором, жаль конечно, но отсутствуют стили с прозрачным фоном.

Генератор CSS в ВКОНТАКТЕ

Ниже также расположена панель настройки и выбора цветов в общем и для каждого участка градиента. Справа расположен блок предварительного просмотра, ориентации и размера градиента. Ниже готовый сгенерированный код созданного градиента. Процесс создания аналогичен с Ultimate CSS

Вот и все про свойства фона в CSS и HTML. Казалось бы простой фон, а имеет много свойств, которые кардинально меняют вид от простого цвета, до сложных градиентных заливок.

Комментариев: 15

  1. Александр

    Отличная и полезная статья. Можно разнообразить свой блог, и соответственно он будет отличатся от других стандартных шаблонов!

  2. writer

    Orcinus Orca Спасибо ;) Стараюсь. Тему такую выбрал, так как сам ставил градиент на блок с RSS, вот и думаю раскрыть все способы

  3. writer

    West Blogger Итак, а то стандартный вариант несколько затрудняет чтение, особенно при плохом зрении (у меня в частности, бывает приходится носить очки)

  4. Марина

    Добрый вечер, Вадим! Уже несколько часов читаю твой сайт, нашла кучу интересного, важного и полезного — и всё на одном сайте! Просто уникальный случай! Я абсолютный «чайник», но мне захотелось завести свой сайт, однако никак не могла найти такую «шапку», чтобы «вот! это моё!», поэтому решила сделать сама и так увлеклась изучением и освоением этих технологий, что самим сайтом и заниматься некогда! и ещё, Вадим, без обид — не «за место», а «вместо». Ещё раз спасибо за информацию.

  5. Роман

    Добрый вечер.
    Подскажите пожалуйста, у меня такая проблема: я сгенерировал градиент и вставил его в в css, но после этого кнопки перестали менять цвет по наведению курсора и после нажатия. Не знаю что делать

    1. writer

      Проверьте правильность написания кода, кавычки и прочее. Возможно и то, что сам браузер не может воспроизвести вам вашу работу

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>