Как задать фон сайта в css

CSS: Фон

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

Обратите внимание, область с теорией и редактором в уроках отделены от остального сайта белым фоном. Это делается не только для удобного чтения, но и для того, чтобы глаза быстро находили область с основным контентом. Для установки фонового цвета используется свойство background-color , значением которого является цвет.

В качестве цвета можно использовать уже знакомые hex -значения:

.card

Карточка с белым текстом на фиолетовом фоне

Задание

Добавьте в редактор с классом background и установите цвет фона #2196f3 . Стили запишите в теге

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

• Выбрать цвет и получить его hex -код можно на HTML Color Codes

Как сделать меняющийся фон в css

Узнайте, как легко создать эффектно меняющийся фон на своем сайте с помощью CSS. Наши подробные инструкции упростят вам этот процесс и помогут создать уникальный дизайн для вашего сайта.

Один из способов придать своему сайту эффектный вид — изменить фоновое изображение или цвет в зависимости от времени суток или действий пользователя. К счастью, для создания такого эффекта вам не нужно быть экспертом в программировании. Достаточно немного кода CSS и некоторых простых инструментов.

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

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

Как сделать меняющийся фон в CSS?

Есть несколько способов сделать меняющийся фон на сайте с помощью CSS. Первый способ — использовать свойство background-image и чередовать разные изображения в CSS. Для этого нужно создать классы для каждого изображения и задать им свойство background-image и путь к файлу, который будет использоваться. Затем можно использовать JavaScript или CSS анимацию для плавного перехода между изображениями.

Второй способ — использовать свойство background-color и задавать ему разные цвета. Также можно использовать CSS анимацию для плавного перехода между цветами фона. Для этого нужно создать классы с разными цветами и задать им свойство background-color.

Третий способ — использовать свойство background-gradient, которое позволяет создавать градиенты на фоне сайта. Для этого нужно задать значения для начального и конечного цветов градиента и установить его на фоне с помощью background-gradient.

Читать далее«title»: Что делать после шпаклевки стен: этапы и рекомендации.

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

Использование свойства background-color

Свойство background-color определяет цвет фона элемента. Оно может быть использовано для задания цвета фона для любого элемента на странице, включая блоки текста, изображения, заголовки и другие.

Значение свойства background-color задается в формате цветового кода или названии цвета. Например, можно использовать значение «red» для задания красного цвета, или значение «#000000» для черного цвета.

• Когда значение свойства background-color устанавливается на элементе, цвет фона этого элемента будет изменяться на указанный цвет.
• Можно использовать свойство background-color в сочетании с другими свойствами CSS, такими как background-image, чтобы создать меняющийся фон с использованием изображений и цвета.

С использованием правильного сочетания свойств CSS, можно создавать интересные и динамичные эффекты для фона веб-страницы.

Использование свойства background-image

Свойство background-image позволяет задать фоновое изображение элемента на веб-странице. Оно может быть использовано для того, чтобы создать эффект изменяющегося фона или для добавления дополнительного декора на страницу.

Для использования свойства background-image необходимо задать путь к изображению в CSS-коде. Путь может быть относительным или абсолютным. Важно также установить другие свойства background, такие как цвет фона и позиционирование изображения.

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

• Преимущества использования свойства background-image:
• Усиления визуальной привлекательности веб-страницы, создание более достойной внешней оболочки текстовой информации;
• Возможность создания оригинальных эффектов. Например, добавление текстурного узора, расцветки, зеркального отражения изображения и прочее;
• Увеличение скорости загрузки страницы, так как отдельные части сайта не приходится вырезать из фотографий, а можно их использовать в качестве фона;
• Возможность уменьшения размера изображений на сайте без ущерба для качества.

Использование тега

Тег — это основной тег документа HTML, который содержит все элементы, которые будут отображаться на странице. Внутри тега можно добавлять различные элементы, такие как текст, изображения, видео и т.д. Этот тег может также содержать различные атрибуты, такие как фон, цвет текста, шрифт и многие другие.

Читать далее«Арбуз кримсон руби F1: отзывы, сроки и правила посадки».

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

Итак, тег — это основной элемент HTML, который контролирует визуальное представление страницы. Он позволяет задавать цвет фона, шрифты, создавать списки и таблицы и множество других элементов, которые могут быть полезными при создании веб-страницы.

Использование CSS анимаций

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

Основная идея анимации в CSS заключается в изменении свойств элементов на определенный период времени. Для этого используется свойство «animation», которое позволяет задавать ключевые кадры анимации и время их выполнения.

Ключевые кадры анимации определяют начальное и конечное состояния элемента, а время выполнения позволяет задавать, сколько времени должна проходить между этими состояниями.

• Для создания анимации необходимо задать название анимации, используя свойство «animation-name».
• Затем нужно задать время выполнения анимации с помощью свойства «animation-duration».
• Также можно указать тип функции «ease», которая определяет, как изменятся свойства элемента.

Анимации можно применять к различным элементам, таким как текст, фотографии, кнопки и другие элементы интерфейса.

Примеры анимаций, которые можно создать с помощью CSS, включают смену цвета фона, изменение размера и положения объекта, а также появление и исчезновение эффектов.

Использование анимации в CSS может помочь создать динамичную и привлекательную веб-страницу. Однако, не стоит злоупотреблять этим, чтобы не создать перегруженный или слишком яркий дизайн. Для лучшего эффекта анимация должна быть подобрана в соответствии с контекстом веб-страницы и не мешать ее функциональности.

Использование JavaScript для изменения фона

JavaScript — это язык программирования, который позволяет создавать интерактивные веб-страницы. С помощью JavaScript можно изменять различные элементы веб-страницы, в том числе и фон.

Для изменения фона веб-страницы с помощью JavaScript необходимо использовать метод document.body.style.background. Этот метод позволяет изменять свойства фона веб-страницы, такие как цвет, изображение, повторение и т.д.

Например, для установки цвета фона веб-страницы с помощью JavaScript можно использовать следующий код:

Этот код устанавливает красный цвет фона веб-страницы. Чтобы установить другой цвет, необходимо заменить слово «red» на название нужного цвета.

Также можно использовать JavaScript для создания меняющегося фона веб-страницы. Для этого необходимо использовать функцию setInterval, которая будет вызывать изменение фона через определенные промежутки времени.

Например, для создания меняющегося фона с помощью JavaScript можно использовать следующий код:

var colors = [«red», «green», «blue»];

if (i == colors.length)

Этот код создает массив цветов (красный, зеленый, синий), и каждую секунду меняет цвет фона веб-страницы на следующий цвет из массива. Когда достигнут последний цвет массива, функция начинает изменять цвет сначала.

Использование плагина для jQuery

Для создания меняющегося фона на веб-странице можно использовать различные подходы и инструменты. Один из них — это плагин для библиотеки jQuery, который позволяет управлять анимацией и изменениями стилей элементов на странице.

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

Затем, необходимо определить область, где будет находиться изображение-фон. Для этого можно использовать тег с определенным идентификатором или классом. Например,

Далее, в скрипте необходимо указать путь к изображениям, которые будут использоваться для фона. Для этого можно создать массив изображений и указать его в коде плагина. Например, var images = [‘image1.webp’, ‘image2.webp’, ‘image3.webp’];.

Затем, указывается интервал времени, через который должно меняться изображение-фон. Для этого используется функция setInterval() внутри кода плагина. Например, setInterval(function() , 5000);, где 5000 — это время в миллисекундах.

После того, как настройки плагина определены, необходимо вызвать его в скрипте и применить к элементу на странице с помощью метода css(). Например, $(function() < $(‘#background’).bgSwitcher(< images: images, interval: 5000 >); >);.

Таким образом, использование плагина для jQuery позволяет создавать эффект изменения фона на веб-странице с помощью небольшого количества кода и минимальных настроек. Этот подход является эффективным и популярным при создании различных интерактивных элементов на веб-страницах с использованием библиотеки jQuery.

Использование плагина для WordPress

Если вы хотите добавить дополнительные функции на свой блог WordPress, вы можете использовать плагин. Это программное обеспечение, которое может быть установлено на свой сайт для добавления новых функций и улучшений для пользователя.

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

Чтобы установить плагин, вы можете перейти на страницу плагинов WordPress, выбрать нужный плагин и нажать кнопку установки. После установки и активации плагина, вы можете настроить его параметры через админ-панель WordPress.

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

Использование CSS библиотек

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

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

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

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

Видео по теме:

Вопрос-ответ:

Зачем делать меняющийся фон на сайте?

Меняющийся фон может придать сайту дополнительную динамику и интерактивность, а также создать особую атмосферу и настроение.

Какие технологии нужны для создания меняющегося фона?

Для создания меняющегося фона на сайте нужно использовать технологию CSS, а именно свойство background-image и анимацию CSS.

Какие виды анимации CSS можно использовать для создания меняющегося фона?

Можно использовать различные виды анимации, например, изменение прозрачности (opacity), смещение фона (background-position), увеличение размера (scale), а также передвижение фона (translate).

Как добавить эффект плавной смены фона?

Для добавления эффекта плавной смены фона нужно использовать анимацию CSS с помощью свойства transition, указав время перехода (transition-duration) и функцию рассинхронизации времени (transition-timing-function).

Можно ли использовать видео как меняющийся фон на сайте?

Да, можно использовать видео-фон на сайте с помощью технологии CSS и HTML5 video. Однако, при использовании видео-фона нужно учитывать, что это может негативно повлиять на загрузку страницы.

Как избежать проблем с совместимостью браузеров при создании меняющегося фона?

Чтобы избежать проблем с совместимостью браузеров, нужно убедиться, что свойства CSS, которые используются для создания меняющегося фона, поддерживаются всеми современными браузерами. Также можно использовать хаки и полифиллы, которые позволяют эмулировать отсутствующие свойства в браузерах, которые их не поддерживают.

Как выбрать подходящую графику для меняющегося фона?

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

Использование настраиваемых фоновых изображений

Настраиваемый фоновый рисунок — это изображение, которое используется как фоновое изображение для элемента веб-страницы, такого как заголовок, текст или блок. Эти изображения могут быть настроены для повторного использования по горизонтали, вертикали или обоим направлениям.

Чтобы настроить фоновое изображение, нужно создать класс или ID элемента, на котором задании изображения. Фоновые изображения могут быть расположены на локальном компьютере или на сервере, иначе на веб страницу можно добавить ссылку на требуемое изображение или задать путь до файла изображения.

Ниже приведен пример использования настраиваемых фоновых изображений с помощью CSS:

• Шаг 1: Сначала определим класс элемента, на котором мы хотим задать фоновое изображение. Например, для тега это будет выглядеть так: .mydiv < background-image: url(«path/to/image.webp»); >
• Шаг 2: Для настройки изображения использовать свойство background-repeat, чтобы задать повторение изображения по горизонтали, вертикали или обоим направлениям. Например, для повторения изображения только по горизонтали: .mydiv < background-image: url(«path/to/image.webp»); background-repeat: repeat-x; >
• Шаг 3: Дополнительно, используйте свойство background-position, чтобы задать положение фонового изображения. Это свойство может использоваться для выравнивания изображения по горизонтали и вертикали. Например, для задания положения изображения по центру: .mydiv < background-image: url(«path/to/image.webp»); background-repeat: no-repeat; background-position: center; >

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

Использование градиентов

Градиенты — это плавные переходы из одного цвета в другой. Они могут использоваться для создания интересных и эффектных фоновых изображений на веб-страницах.

В CSS есть возможность создавать градиенты двумя способами: линейные и радиальные.

• Линейный градиент создается путем определения направления, в котором должен идти переход цветов. Градиент может быть вертикальным, горизонтальным или любым другим направлением.
• Радиальный градиент создается в форме круга или эллипса, где цвет переходит от центра к краям.

Для создания градиента можно использовать следующие свойства:

• background-image: определяет изображение фона.
• background-clip: определяет, как фон будет отображаться внутри элемента.
• background-origin: определяет, где начинается фоновое изображение (угол, граница или содержимое).
• background-size: определяет размер фонового изображения.

Пример создания градиента:

background-image: linear-gradient(to bottom, #ffffff, #000000);

Этот код создает вертикальный градиент от белого до черного цвета. Но можно создавать градиенты любых цветов и направлений, вести изображение в разные стороны и создавать уникальные эффекты.

Как сделать фон в HTML

От автора: всех приветствую. Фоновые цвета и изображения в веб-дизайне имеют огромную роль, так как позволяют более привлекательно оформить любые элементы. Как сделать фон в html, мы рассмотрим сегодня.

Можно ли обойтись средствами html при задании фона?

Сразу скажу, что нет. Вообще html не создан для того, чтобы оформлять веб-страницы. Это просто очень неудобно. Например, там есть атрибут bgcolor, с помощью которого можно задавать фоновый цвет, но это очень неудобно.

Соответственно, мы будем использовать каскадные таблицы стилей (css). Там гораздо больше возможностей для задания бэкграунда. Мы сегодня разберем самые основные.

Как задать фон через css?

Итак, прежде всего вам нужно определиться с тем, какому элементу нужно задать фон. То есть нам нужно найти селектор, к которому мы будем писать правило. Например, если фон нужно задать всей странице в целом, то можно сделать это через селектор body, всем блокам – через селектор div. Ну и т.д. Фон можно и нужно привязывать к любым другим селекторам: стилевым классам, идентификаторам и т.д.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

После того, как вы определились с селектором, нужно написать само название свойства. Для задания фонового цвета (именно сплошного цвета, не градиента и не картинки) используется свойство background-color. После него нужно поставить двоеточие и написать сам цвет. Это можно сделать по-разному. Например, с помощью ключевых слов, hex-кода, форматов rgb, rgba, hsl. Любой способ подойдет.

Чаще всего используется способ шестнадцатеричного кода. Для подбора цветов можно использовать программу, в которой видно код цвета. Например, photoshop, paint или какой-либо онлайн-инструмент. Соответственно, для примера пропишу общий фон для всей веб-страницы.

Я советую вам сейчас создать на рабочем столе html и css файлы, подключить css к html и повторять за мной. Так вы поймете все намного лучше, чем если просто читать. Для работы с файлами советую использовать программу Notepad++. Назовите первый файл, например index.html, а второй — style.css. Подключить css к html можно так:

Этот код нужно вставить в секцию head. Важно, чтобы файлы находились в одной папке.

Хорошо, а мы идем дальше. Чтобы показать вам другие возможности задания фона, мне придется создать небольшой блок, в котором мы и будем экспериментировать с фоновым изображением. Да-да, именно с изображением.

Картинка в качестве фона

В качестве картинки я буду использовать маленький значок языка html:

Создадим пустой блок с идентификатором:

Зададим ему явные размеры и фон:

Из этого кода вы можете видеть, что я использовал новое свойство – background-image. Оно предназначено как раз для вставки картинки в качестве фона html-элементу. Посмотрим, что получилось:

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

Если вы сделали этого, а в блоке все равно не отображается фон, проверьте еще раз, правильно ли вы написали название картинки, правильно ли задан путь и расширение. Это самые частые причины того, что просто не выводится фон, так как браузер не может найти изображение.

Но заметили ли вы одну особенность? Браузер взял и размножил картинку по всему блоку. Так вот, чтобы вы знали, это поведение фоновых картинок по умолчанию – они повторяются по вертикали и горизонтали до тех пора, пока могут влезь в блок. По этим поведением вы можете легко управлять. Для этого используют свойство background-repeat, у которого есть 4 основных значения:

Repeat – значение по умолчанию, изображение повторяется по обеим сторонам;

Repeat-x – повторяется только по оис x;

Repeat-y – повторяется только по оси y;

No-repeat – не повторяется вообще;

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

Теперь повторение только по горизонтали. Если прописать no-repeat, то была бы только одна картинка.

Отлично, на этом уже можно заканчивать, так как это базовые возможности работы с фоном, но я вам покажу еще 2 свойства, которые позволяют получить вам больше возможностей в управлении.

С помощью повторения верстальщики раньше достигали того, что создавали фоновые текстуры и градиенты, используя одно малюсенькое изображение. Оно могло быть 30 на 10 пикселей или еще меньше. А может и немного больше. Изображение было таким, что при его повторении по одной или даже по обеим сторонам, не было видно переходов, так что в итоге получался единый цельный фон. К слову, такой подход стоит использовать и сейчас, если вы хотите использовать бесшовную текстуру на своем сайте в качестве фона. Градиент же сегодня уже можно реализовать методами css3, об этом мы еще обязательно поговорим.

Позиция фона

По умолчанию фоновое изображение, если для него не задано повторение, будет находиться в левом верхнем углу своего блока. Но положение можно легко изменить с помощью свойства background-position.

Задавать его можно по-разному. Один из вариантов, это просто указать стороны в которых должна находиться картинка:

То есть по вертикали все так и осталось: фоновая картинка располагается сверху, но по горизонтали мы изменили сторону на right, то есть правую. Еще один способ задать позицию – в процентах. Отсчет при этом начинается в любом случае с верхнего левого угла. 100% — весь блок. Таким образом, чтобы поместить картинку ровно по центру, запишем так:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Запомните одну важную вещь, связанную с позиционированием – первым параметром всегда указывается позиция по горизонтали, а вторым – по вертикали. Итак, если вы видите значение 80% 20%, то можно сразу заключить, что фоновое изображение будет сильно сдвинуто вправо, но вниз при этом сильно не уйдет.

Ну и наконец, прописывать позицию можно в пикселях. Все то же самое, только вместо % будет px. В некоторых случаях может понадобиться и такое позиционирование.

Сокращенная запись

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

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

Далее мы рассмотрим другое свойство – размер фона. Его уже не задашь сокращенно в качестве параметров в сокращенной записи.

Управляем размером фоновой картинки

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

Как можно поступить в таком случае? Конечно, самым простым и разумным вариантом будет просто уменьшение картинки, но не всегда есть возможность это сделать. Допустим, она лежит на сервере и в данный момент нет времени и возможности ее уменьшить. Проблему можно решить с помощью свойства background-size, которое можно назвать относительно новым и которое позволяет манипулировать размером фонового изображения, да и вообще любого фона.

Итак, моя картинка сейчас занимает все пространство в блоке, но я задам ей размер фона:

Опять же, первым параметром задается размер по горизонтали, вторым – по вертикали. Мы видим, что все правильно применилось –фото стало размером на 80% ширины блока в ширину и наполовину в высоту. Тут только нужно внести одно уточнение – задавая размер в процентах вы можете повлиять на пропорции картинки. Так что будьте внимательны, если хотите не нарушить пропорции.

Как вы можете догадаться, также размер фона можно указывать в пикселях. Еще есть два ключевых слова-значения, которые также можно использовать:

Cover – произойдет масштабирование картинки таким образом, чтобы хотя бы по одной стороне она полностью заполняла блок.

Contain – отмасштабирует так, чтобы картинка полностью влезала в блок в максимальном своем размере.

Преимущества этих значений в том, что они не изменяют пропорции картинки, оставляя их прежними.

Также вы должны понимать, что растягивание картинки может привести к ухудшению ее качества. Могу привести пример из жизни и реальной практики верстальщиков. Все знают и понимают, что при верстке под десктопы нужно адаптировать сайт под основные ширины мониторов: 1280, 1366, 1920. Если вы возьмете фоновую картинку размером, допустим, 1280 на 200, и не зададите ей background-size, то экранах с шириной больше появится пустое место, картинка не будет заполнять ширину полностью.

В 99% случаев это не устраивает веб-разработчика, поэтому он задает background-size: cover, чтобы картинка всегда тянулась на максимум по ширине окна. Это хороший прием, который нужно использовать, но теперь вы столкнетесь с проблемой, что пользователи с шириной экрана 1920 пикселей могут увидеть картинку неоптимального качества.

Я напомню, она растянется на максимум по ширине. Соответственно, качество автоматически ухудшится. Единственно правильным решением тут будет изначально использовать картинку большего размера – 1920 пикселей в ширину. Тогда на самых широких экранах она будет в своем натуральном размере, а на других просто будет потихоньку обрезаться, но при этом, при грамотном подборе фоновой картинки, на внешний вид сайта это не повлияет.

В общем, это всего лишь 1 пример того, как использовать знания, полученные вами в этой статье, при верстке реальных макетов.

Полупрозрачный фон с помощью css

Еще одна фишка, которую можно реализовать с помощью css – полупрозрачный фон. То есть через этот фон можно будет разглядеть, что находиться за ним.

Для примера я задам всей странице в качестве фона картинку, которую мы использовали ранее в примерах. Блоку же с идентификатором bg, на котором мы проводим все наши эксперименты, зададим фон с помощью формата задания цвета rgba.

Как я уже и говорил ранее, в css есть много форматов для задания цвета. Один из них – rgb, достаточно известный формат тем, кто работает в графических редакторах. Он записывается так:rgb(17, 255, 34);

Первым значением в скобках идет насыщенность красного, потом зеленого, потом синего. Значение может быть числовым от 0 до 255. Соответственно, формат rgba ничем не отличается, только добавляется еще один параметр – альфа-канал. Значение может быть от 0 до 1, где 0 – полная прозрачность.

Соответственно, для задания средней полупрозрачности нужно записать примерно так:

Как сделать фон в html?

Для создания сайта, немаловажным вопросом является то, как сделать фон в html. Такая процедура подразумевает использование определённых тегов – кодовых слов и букв. Благодаря ним, можно поставить различный фон, сделать его однотонным – залить, или поставить на место фона любую картинку. Такие действия очень пригодятся всем верстальщикам, и тем, кто решил самостоятельно «приодеть» свой сайт.

Делаем фон

Перед тем как сделать фон сайта html, нужно открыть в текстовом редакторе код html страницы. Нужно помнить, что теги на странице размещаются вертикально. Затем, между тегами … , нужно поставить тег

— эти теги нужны для того, чтобы уточнить стиль элементов данной веб-страницы. На месте трёх точек нужно прописать – body . Это параметр, благодаря которому можно устанавливать разные стили для фона страницы. Можно сделать операцию по установке цвета двумя способами. Первый:

body – теперь фон страницы должен стать чёрного цвета.

Этот способ подходит и для того, чтобы задать и цвет, и картинку фоном. Именно после двоеточия, можно поставить или код цвета или ссылку на картинку. А можно использовать способ, который обозначает только установку цвета – определённой заливки для страницы. После двоеточия нужно прописать так называемый параметр – color. И после него, ставить код самого цвета. Этот способ хорош, если использовать его как шаблон. Прописать его и сохранить, а когда нужно — задать цвет, поставить его на страницу.

Можно поставить, вместо однотонного фона, картинку. Если нужно узнать: в html, как сделать картинку фоном, то операции нужно проделать подобные. Прописать теги, поставить body . Нужно помнить, что сама картинка, может быть где угодно. И на сайте в интернете, но лучше всего создать в корне документа папку. В папке, внутри которой будет сохраняться вся информация о странице сайта, нужно создать ещё одну – для картинок. Операция будет выглядеть так:

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

Как сделать фон для сайта?

Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол « застелить » дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:

Фон для сайта

Бывает так, что старый дизайн сайта уже приелся. И хочется чего-нибудь новенького и вкусненького. А новый дизайн будет таковым, если его приготовить своими руками.

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

Существует несколько способов того, как поменять фон на сайте. Для этого используются возможности CSS или html . Но многие из свойств для работы с фоном имеют одинаковое название и методику применения в этих веб-технологиях.

Основы работы с фоном в html

В качестве фона можно использовать несколько элементов:

• Цвет;
• Фоновую картинку;
• Текстурное изображение.

Разберемся с применением каждого из них подробнее.

Для того чтобы установить цвет заднего фона для сайта используется свойство background-color стилевого атрибута style . То есть, чтобы задать основной цвет для веб-страницы, нужно прописать его внутри тега . Например:

Кроме шестнадцатеричного кода цвета поддерживается значение в формате ключевого слова или RGB . Примеры:

Установка цвета фона с помощью ключевых слов имеет ряд ограничений по сравнению с остальными двумя способами.

В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.

Поэтому для того, чтобы установить фон для сайта html , лучше использовать шестнадцатеричный формат или RGB .

Кроме выбора цвета доступны и другие параметры настройки. Если свойству background-color задать значение transparent , то фон страницы станет прозрачным. Это значение данному свойству присвоено по умолчанию.

Теперь рассмотрим возможности языка гипертекста для установки фонового рисунка для сайта. Это возможно сделать с помощью свойства background-image .

Как видно из кода, привязка изображения происходит через путь url , заданный в скобках. Но не все картинки оказываются такими большими, чтобы своими размерами заполнить всю площадь экрана. Посмотрим, как будет отображаться меньший по величине рисунок.

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

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

Наверное, четырех улыбающихся лошадей с крыльями поэтам будет чересчур много для вдохновения. Поэтому запрещаем клонирование нашего Пегаса. Делаем это с помощью свойства background-repeat . Возможные значения:

• repeat-x – повторение фонового изображения по горизонтали;
• repeat-y – по вертикали;
• repeat – по обеим осям;
• no-repeat – повторение запрещено.

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

Но, конечно, лучше, если бы наш летун расположился посредине экрана. Свойство background-position как раз и предназначено для позиционирования фонового рисунка на странице. Задавать координаты расположения можно несколькими способами:

• Ключевым словом ( top , bottom , center, left, right) ;
• Процентами – отсчет начинается от верхнего левого угла;
• В единицах измерения ( пикселях ).

Воспользуемся самым простым вариантом центрирования:

• scroll;
• fixed.

Нам нужно последнее значение. Теперь код нашего примера будет выглядеть вот так:[/HTML]

Текстурный фон сайта

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

Такой объем никак не влияет на скорость загрузки страницы браузером при высокоскоростном соединении с интернетом. Но как быть с мобильным интернетом, при использовании которого загрузка нескольких « метров » займет много времени?

Все эти проблемы решаются с помощью текстурного фона. В нем в качестве рисунка текстуры используется маленькое изображение. Даже при условии его многократного повторения рисунок загружается лишь один раз.

Для создания темного фона для сайта заходим в Photoshop , создаем изображение в виде полоски длинной 1200 пикселей, и шириной 15 пикселей. Затем применяем простой черно-белый градиент и подключаем получившуюся текстуру к странице сайта:

Для наглядности мы добавили текст и задали его цвет с помощью свойства color . Вот что получилось:

Средства CSS

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

Результат будет аналогичным.

Ну, вот мы и рассмотрели все варианты, как поменять фон на сайте. Теперь осталось лишь создать рисунок будущего ковра и расстелить его на страницах своего ресурса. Но это уже ваших рук дело.

Как установить фон для сайта

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

Делаем новый фон для сайтов

Существуют различные способы отыскать подходящую идею для фонового рисунка:

• фон одного цвета;
• фон определённой текстуры;
• фон, созданный с помощью градиента;
• фон из адаптированного большого изображения.

Создаем фон с помощью одного цвета

Это наиболее простой способ создать задний фон. Сегодня так практически никто не поступает. Но если вы решили сделать одноцветный фон, необходимо перейти в файл style.css и отыскать значение – body (оно отвечает за основное тело сайта). Теперь необходимо прописать функцию background-color, если ее не было, и указать код цвета. В том случае, когда вам необходимо создать задний фон для белого сайта, придется прописать следующий код:

Вы сможете найти полный перечень цветов на сайте – (STM). Для изменения цвета, просто регулируйте значение после двоеточия и наслаждайтесь результатами.

Создание фона при помощи текстуры

Таким образом вы сможете несколько разнообразить задник своего ресурса. Чем он будет интереснее, тем легче для восприятия. Текстуры могут казаться простыми, но очень красивыми, именно поэтому их часто используют. Для того чтобы подключить любую текстуру, ее необходимо загрузить в папку image. Так что вам придётся поработать с настройками в админке своего сайта. После этого необходимо прописать следующий код:

В этом коде есть знакомый нам параметр для поддержания цвета (он зеленый) и элемент, который отвечает за подключение текстуры зеленого цвета.

Делаем фон с помощью градиента

Любое изображение, которое подключается за счет css функций, можно повторять, как по горизонтали, так и по вертикали (по осям X и Y). Такая возможность позволяет нам создать любой красивый фон для сайта css. Начните с создания градиента шириной в 1 мегапиксель (см. картинку ниже), сохраните его, как изображение, и загрузите на хостинг. Далее вам придётся немного поработать с кодом. Вставьте следующие строки:

Внутри него используется функция, позволяющая сменить фон. Сразу после неё следует параметр, отвечающий за цвет вашего задника, и функция, повторяющая его по оси X.

Используем большие картинки для фона сайта

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

Если с первыми двумя параметрами все понятно, то два последующих могут вызвать у вас вопросы. Третья функция позволяет закрепить изображение по центру сайта, а последний параметр блокирует его повторение по всей структуре страницы.

Для масштабирования изображения существует свойство background-size. Именно оно отвечает на вопрос, как сделать фон в HTML на весь экран. Если установить этот параметр на 100%, фон займёт всю ширину окна браузера.

Вы можете использовать и другие форматы изображения. Например, фон для сайта png так же имеет право на жизнь. Чем более качественное вы берёте изображение, тем лучше оно растягивается на больших мониторах.

Изменяем фон на сайтах Ucoz

Сегодня всё ещё есть вебмастеры, предпочитающие бесплатные хостинги, вроде Ucoz. И специально для них мы приводим инструкцию по изменению фона. Для того чтобы изменить фон сайта на Ucoz, необходимо перейти в панель управления, зайти в «Управление дизайном», а потом в «Редактирование шаблонов».

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

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

Изменяем фон для сайта на HTML

Если вы не знаете, как сделать фон для сайта в блокноте, то ответ покажется вам на удивление простым. Всё что потребуется, это внести некоторые изменения в теле кода:

Вам необходимо загрузить своё изображение в галерею и использовать его, для создания фона.

Для тех, кто вообще не хочет думать о фоне, есть такой же простой способ, покрасить его одним цветом:

Изменяем фон блока

Как правило, фон блоков отличается от заданного в background. Ведь вам нужно, что бы текст легко читался, а не сливался с фоновым изображением. И если у вас возникает вопрос, как сделать картинку фоном блока div, то и он решается достаточно легко:

Параметры width и height отвечают за высоту и ширину блока. Его позицию вы так же можете задать вручную. В HTML за это отвечает функция: position.

Заключение

Задний фон вашего сайта играет очень важную роль в повышении его популярности. Известные бренды платят огромные деньги за разработку персонального дизайна. И делается это не просто так. Внешнее оформление ресурса привлекает новых клиентов, а старых мотивирует посещать его снова и снова. Не забывайте, что наиболее распространённый формат мониторов сегодня — FullHD. Всегда проверяйте, как выглядит фон для сайта 1920х1080 — большинство ваших посетителей будут видеть его именно так.

Похожие публикации:

1. Как убрать время посещения в whatsapp на айфоне 11
2. Как убрать фон на фото на ipad
3. Как удалить базу 1с с сервера sql
4. Как удалить страницу в ворде на айпаде

CSS стили для заголовков сайта

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

Собственно, о них мы сегодня и поговорим — пост использует наработки из этой англоязычной статьи. Там имеется 6 разных вариантов оформления заголовок на любой вкус, я же приведу лишь 5 самых интересных, на мой взгляд. Они могут давать вам идеи и подсказки при реализации своих уникальных стилей. Также советуем глянуть подборку лучших шрифтов Google Fonts для заголовков.

Перед тем как начать пару моментов:

• Все шрифты из примеров являются бесплатными и доступны в Google WebFonts.
• В примерах имеются только заголовки Н1-Н4 так как они наиболее часто используемы.
• Автор CSS стилей использовал модель при которой [ширина] = [фактическая ширина элемента] + [отступы padding] + [границы borders]. Для этого в коде расположен сниппет:

*, *:after, *:before { box-sizing: border-box; }

Напоследок во вступлении упоминается такое понятие как «вертикальный ритм» (vertical rhythm). Оно фактически задает все отступы между блоками на странице — будь то заголовки, текстовые параграфы, изображения или даже просто элементы шаблона сайта. Особенно актуально это при использовании необычной типографики. Итак, во всех примерах CSS стилей используется один и тот же «ритм»:

h1 { font-size: 36px; line-height: 40px; } h2 { font-size: 30px; line-height: 40px; } h3 { font-size: 24px; line-height: 40px; } h4 { font-size: 18px; line-height: 20px; }

Теперь можно переходить непосредственно к практике.

Пример 1

Начинаем с более-менее простого варианта. Типографика отлично подходит для сайта СМИ, может быть даже какой-то газеты. Особых изысков это решение не предлагает, разве что используется 2 шрифта — Ultra (sans-serif), Orienta (sans-serif). Итоговый CSS код:

.demo-1 .main h1 { margin: 1em 0 0.5em 0; color: #343434; font-weight: normal; font-family: 'Ultra', sans-serif; font-size: 36px; line-height: 42px; text-transform: uppercase; text-shadow: 0 2px white, 0 3px #777; } .demo-1 .main h2 { margin: 1em 0 0.5em 0; color: #343434; font-weight: normal; font-size: 30px; line-height: 40px; font-family: 'Orienta', sans-serif; } .demo-1 .main h3 { margin: 1em 0 0.5em 0; color: #343434; font-size: 22px; line-height: 40px; font-weight: normal; text-transform: uppercase; font-family: 'Orienta', sans-serif; letter-spacing: 1px; font-style: italic; } .demo-1 .main h4 { margin: 1em 0 0.5em 0; color: #343434; font-size: 18px; line-height: 20px; font-weight: normal; font-family: 'Orienta', sans-serif; }

Пример 2

Здесь уже чуть более интересная реализация — добавляется фон для заголовка в виде сплошной заливки и картинки. CSS код прописан достаточно грамотно, отступы указаны в процентах дабы при уменьшении изображения текст заголовка не сливался с фоновой картинкой. Используемые шрифты Titillium Web (sans-serif), Muli (sans-serif).

.demo-2 .main h1 { margin: 1em 0 0.5em 0; font-weight: 600; font-family: 'Titillium Web', sans-serif; position: relative; font-size: 36px; line-height: 40px; padding: 15px 15px 15px 15%; color: #355681; box-shadow: inset 0 0 0 1px rgba(53,86,129, 0.4), inset 0 0 5px rgba(53,86,129, 0.5), inset -285px 0 35px white; border-radius: 0 10px 0 10px; background: #fff url(../images/bartoszkosowski.jpg) no-repeat center left; } .demo-2 .main h2 { margin: 1em 0 0.5em 0; font-weight: normal; position: relative; text-shadow: 0 -1px rgba(0,0,0,0.6); font-size: 28px; line-height: 40px; background: #355681; background: rgba(53,86,129, 0.8); border: 1px solid #fff; padding: 5px 15px; color: white; border-radius: 0 10px 0 10px; box-shadow: inset 0 0 5px rgba(53,86,129, 0.5); font-family: 'Muli', sans-serif; } .demo-2 .main h3 { margin: 1em 0 0.5em 0; font-weight: 600; font-family: 'Titillium Web', sans-serif; position: relative; text-shadow: 0 -1px 1px rgba(0,0,0,0.4); font-size: 22px; line-height: 40px; color: #355681; text-transform: uppercase; border-bottom: 1px solid rgba(53,86,129, 0.3); } .demo-2 .main h4 { margin: 1em 0 0.5em 0; font-weight: 600; font-family: 'Titillium Web', sans-serif; position: relative; font-size: 18px; line-height: 20px; color: #788699; font-family: 'Muli', sans-serif; }

Пример 3

Теперь пример реализации заголовков для сайта с темным дизайном. Для этого был подобран достаточно яркий, контрастный голубой цвет в противовес темно серому фону. Используемые шрифты Hammersmith One (sans-serif), Questrial (sans-serif).

.demo-3 .main h2:after, .demo-3 .main h3:after, .demo-3 .main h4:after { position: absolute; content: ""; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 2px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.3); } .demo-3 .main h2:after { background: #0AF; } .demo-3 .main h3:after { background: #3BF; } .demo-3 .main h4:after { background: #6Cf; } .demo-3 .main h1 { font-size: 36px; line-height: 40px; margin: 1em 0 .6em 0; font-weight: normal; color: white; font-family: 'Hammersmith One', sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; color: #6Cf; } .demo-3 .main h2 { margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: 'Hammersmith One', sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; font-size: 30px; line-height: 40px; } .demo-3 .main h3 { margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: 'Hammersmith One', sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; font-size: 24px; line-height: 40px; font-family: 'Questrial', sans-serif; } .demo-3 .main h4 { margin: 1em 0 .6em 0; padding: 0 0 0 20px; font-weight: normal; color: white; font-family: 'Hammersmith One', sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); position: relative; font-size: 18px; line-height: 20px; font-family: 'Questrial', sans-serif; }

Пример 4

Экспериментируем с фоном — как насчет добавить деревянную текстуру. Шрифты Scada (sans-serif), Carrois Gothic (sans-serif), причем листочек для H2 также реализован через шрифт, а не картинку.

.demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i { padding-right: 10px; color: #A8D13B; font-size: 0.8em; } .demo-4 .main h2:after, .demo-4 .main h3:after, .demo-4 .main h4:after { position: absolute; content: ""; height: 1px; border-radius: 2px; left: 0; bottom: 0; box-shadow: 0 -1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.6); } .demo-4 .main h2:after { width: 100%; } .demo-4 .main h3:after { width: 75%; } .demo-4 .main h4:after { width: 50%; } .demo-4 .main h1 { margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 36px; line-height: 40px; font-family: 'Carrois Gothic', sans-serif; } .demo-4 .main h2 { margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: 'Scada', sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 30px; line-height: 40px; } .demo-4 .main h3 { margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: 'Scada', sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 24px; line-height: 40px; } .demo-4 .main h4 { margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: 'Scada', sans-serif; position: relative; text-shadow: 0 2px 0 rgba(255,255,255,0.5); font-size: 18px; line-height: 20px; }

Пример 5

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

.demo-6 .main h1 { margin: 1em 0 0.5em 0; font-weight: 100; text-transform: uppercase; color: #00caa6; font-style: italic; font-family: 'Josefin Sans', sans-serif; font-size: 58px; line-height: 54px; text-shadow: 2px 5px 0 rgba(0,0,0,0.2); } .demo-6 .main h2 { margin: 1em 0 0.5em 0; color: #148773; font-size: 26px; line-height: 40px; font-weight: bold; font-family: 'Josefin Sans', sans-serif; } .demo-6 .main h3 { margin: 1em 0 0.5em 0; color: #343434; font-size: 22px; line-height: 40px; font-weight: 100; text-transform: uppercase; font-family: 'Josefin Sans', sans-serif; letter-spacing: 1px; font-style: italic; } .demo-6 .main h4 { margin: 1em 0 0.5em 0; color: #343434; font-size: 18px; line-height: 20px; font-weight: bold; font-family: 'Josefin Sans', sans-serif; }

Если вы знаете CSS практически досконально, то в оригинальной статье рассказывается как использовать некие pre-processors в стилях дабы сократить объем кода и сделать его проще. Честно говоря, использование функций и подстановку параметров в файле стилей CSS я видел впервые, но код получается весьма наглядным. Также, разумеется, в исходной статье найдете ссылки на исходники и демо версии всех вариантов.

P.S. Тем, кто работает в интернете или только-только начинает статья о том что такое ТИЦ поможет сориентироваться в одном из самых актуальных и обсуждаемых понятий в сети.