Css и множественный фон / хабр

Изменение вида и цвета текста

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

— такие метаданные применяют, чтобы выделить текст или его часть жирным шрифтом. Можно использовать и тег ( ).

— таким способом можно сделать выделение курсивом.

— в этом случае получим подчеркивание выделенного фрагмента.

<s> </s> — тег для перечеркивания текста.

— устанавливает верхний индекс (х2)

— таким образом создается нижний регистр (Н2О)

<hr> — применяем, если нужно сделать вставку в виде горизонтальной линии.

— такие метаданные меняют цвет, размер текста и стиль шрифта.

<html>

<head>

<title>для изменения цвета устанавливаем атрибут text</title>

</head>

Потом идет текстовый блок страницы, таблицы, картинки и т.д.

</body>

</html>

После таких изменений текст получится зеленым.

Рисунок или фотография в качестве фона

Остановимся также и на возможностях языка гипертекста для такой задачи, как сделать изображение фоном в HTML. Существует 3 варианта установки картинок для фона страницы только с применением HTML + CSS (JS не используется). Но сперва определим основные требования к фоновой картинке:

Изображение должно покрывать всю ширину и высоту страницы сайта.
В случае необходимости фон может масштабироваться (background растягивается/сжимается с учетом параметров экрана).
Пропорции изображения сохраняются (aspect ratio).
Картинка центрируется на странице.
Фоновой изображение не вызывает скроллов.
Решение полностью кроссбраузерное.
Не применяются разные технологии, только CSS

Установка однотонного заднего фона с помощью html

Метод 1

Наиболее простой и прогрессивный способ, как сделать фото фоном в HTML. В этом случае используется свойство CSS3 background-size, в применении к тегу html. Тег body не применяется, потому что он имеет большую высоту, которая определяется высотой окна браузера. Вначале нужно установить центрированную и фиксированную картинку фона, а потом изменить ее размер с помощью background-size: cover.

html {

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

Copy

ТОП-30 IT-профессий 2022 года с доходом от 200 000 ₽

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

Подборка содержит только самые востребованные и высокооплачиваемые специальности
и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились
с карьерной целью на ближайшее будущее!

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

Александр Сагун
Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2022

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

Получить подборку бесплатно

pdf 3,7mb
doc 1,7mb

Уже скачали 14873

Этот способ можно использовать в любой версии Chrome, Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Метод 2

В этом варианте применяется элемента img. Его размер можно изменить с учетом размеров браузера. Для растягивания картинки фона на полный экран следует задать для фона min-height и width с параметром 100%.

Если установить min-width со значением, которое аналогично ширине изображения, то фон будет сжиматься меньше оригинального размера изображения. Для ситуации, когда окно уже ширины картинки, чтобы выровнять бэкграунд по центру устанавливают media query.

Copy

img.background {

min-height: 100%;

min-width: 640px;

width: 100%;

height: auto;

position: fixed;

top: 0;

left: 0;

/* Определяется размером картинки */

@media screen and (max-width: 640px){

img.bg {

left: 50%;

margin-left: -320px;

}

Метод 3

Еще один способ, как сделать изображение фоном в HTML. Нужно закрепить изображение <img /> на странице вверху слева и растянуть его, используя свойство min-width и min-height 100% (необходимо сохранить соотношение сторон).

Отметим, что при таком решении изображение не центрируется. Чтобы центрировать картинку ее нужно завернуть в <div />, сделав его в 2 раза большим, чем размеры окна. При этом, саму картинку растягиваем и устанавливаем по центру.

</div>

Copy

div.background {

position: fixed;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

}

img {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

min-width: 50%;

min-height: 50%;

}

Данный метод также может использоваться в хороших браузерах и IE 8+.

Параметры фона сайта

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

Параметры фона сайта

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

При этом важно, чтобы страницы не выглядели сильно растянутыми

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

Есть два варианта, как сделать задний фон в HTML. Это может быть монотонная цветная подложка или изображение. Каждый вариант имеет свои недостатки и преимущества. Монотонный оттенок не будет «утяжелять» ресурс загрузкой лишних картинок, но фон в виде эффектного изображения добавит бонусов дизайну сайта.

Для вас подарок! В свободном доступе до02 октября

61 проверенный канал из закрытой подборки по поиску работы в IT

Гарантированно найдете выгодную работу за 1-2 дня

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

Перейти

Скачать файл

Какими параметрами определяется HTML фон страницы.

Цветовой оттенок HTML фона сайта определяет CSS атрибут background-color, расположенный в теге <body>.
HTML фонового цвета фона определенных элементов (блок, параграф или табличная ячейка) определяется таким же атрибутом, который размещен внутри соответствующих тегов.
HTML фон сайта можно определить во внешнем файле .css.
HTML картинка. Простой способ, как сделать картинку фоном в HTML- использование атрибута background-image и картинки.

Подробнее рассмотрим каждый способ установки фона на страницах сайта.

background-size – масштабирование фона

Свойство масштабирует фоновое изображение согласно заданным размерам. По умолчанию оно имеет значение .

Пример синтаксиса для явного указания размеров фона:

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

1. Ключевые слова: (по умолчанию), и .

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

2. Одно значение. При указании только одного значения (например, ), оно указывает ширину, а высота в этом имеет значение .

В задавать размеры можно используя любые единицы измерения: , , , , и т.д.

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

Установка однотонного заднего фона с помощью html

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

Прежде всего, раскроем особенности изменения фона страниц в HTML. Чтобы установить цветовой оттенок, применяют свойство background-color в стилевом атрибуте style. Таким образом, задать фоновый цвет сайта можно прописав его характеристики в тег <body>. К примеру:

Фон сайта #55D52B

</body>

Помимо 16-теричного кода оттенка можно задать цвет фона в виде ключевого слова или RGB. Пример:

Фон сайта rgb(23,113,44)

</body>

Отметим, что в сравнении с двумя другими вариантами, при установке цвета фона в формате ключевого слова есть несколько ограничений. В html для того, чтобы задать цвет могут применяться только шестнадцать ключей. К примеру, white, red, blue, black, yellow и др. В связи с имеющимися ограничениями мы рекомендуем для установки HTML фона сайта применять16-теричного кода или RGB.

Вы сумеете не только установить цвет фона, но и сделать еще ряд настроек.

Свойство CSS background-image

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

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

Удобно при работе с маленькими картинками. Чтобы получить такой код, воспользуйтесь сервисами вроде https://snipp.ru/tools/base64-img. Там все очень просто: загружаете картинку и получаете готовый код для сайта. При таком использовании не производится дополнительное обращение к серверу за картинкой, что хорошо для скорости загрузки.

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

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

Для фона можно использовать большинство известных форматов: JPG, PNG, SVG, GIF-анимацию и другие.

background-repeat – повтор фонового изображения

Свойство определяет должно ли повторяться фоновое изображение, а если да, то как.

Значения этого свойства (помимо обычных значений вроде ):

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

Также имеется синтаксис с двумя значениями (первое – по горизонтали, второе – по вертикали):

Синтаксис с одним значением – это просто сокращение синтаксиса с двумя значениями. Например, значение вычисляется как .

Текстура в фотографии

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

Web-дизайн

Лэндинги и многостраничники великолепно подходят для того, чтобы похвастаться фото. Подкованные дизайнеры, как ребята из Poco People, например, фотографии с частичной «тяжелой» текстурой перекрывают плоской графикой. Пейзажи смотрятся просто прекрасно: скалистая местность, покрытая снегом придает дизайну массу тактильности.

Дизайн печатной продукции

Выпуск журнала Audubon Creative Pro

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

Лица

Плакат для Jazzdor; Брюс Уиллис в «Esquire»; обложка журнала L’Obs

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

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

Типографская печать

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

background-position – положение фонового изображения

Свойство задаёт позицию фонового изображения (или градиента). Значение по умолчанию: (помещает изображение в верхний левый угол).

Первое значение определяет смещение по горизонтали, а второе — по вертикали.

Указывать значения можно посредством:

пикселей (например, );
процентов ();
с помощью ключевых слов: , , , и ().

В современных браузерах в можно указывать до 4 значений.

Когда вы объявляете одно значение, оно будет определять горизонтальное смещение. Вертикальное в этом случае будет иметь значение .

Задавать можно с помощью трёх или четырёх значений. В трех- или четырехзначном синтаксисе чередуются ключевые слова (кроме ) и величина смещения ( или ). При этом ключевое слово должно предшествовать величине смещения, указанной с помощью или .

При указании трёх значений, браузер выставляет «отсутствующее» четвертое значение как 0.

Это свойство расположит фоновое изображение слева на 45px и снизу на 0px.

Пример использования в 4 значений:

Это свойство поместит изображение слева на 45px и снизу на 10px.

Установка фона с помощью градиента

Рисунки, подключенные с использованием css функций, могут повторяться по вертикали, и по горизонтали. Эта особенность дает нам еще один вариант, как сделать градиент фон в HTML. Для начала создайте градиент шириной 1 мегапиксель, сохраните его в качестве рисунка и выгрузите на хостинг. Теперь для установки фона нужно в код внести строки:

body {

background-color: #83C5E9;

background-repeat: repeat-x;

}

Только до 3.10

Как за 3 часа разбираться в IT лучше, чем 90% новичков и выйти надоход в 200 000 ₽?

Приглашаем вас на бесплатный онлайн-интенсив «Путь в IT»! За несколько часов эксперты
GeekBrains разберутся, как устроена сфера информационных технологий, как в нее попасть и
развиваться.

Интенсив «Путь в IT» поможет:

За 3 часа разбираться в IT лучше, чем 90% новичков.
Понять, что действительно ждет IT-индустрию в ближайшие 10 лет.
Узнать как по шагам c нуля выйти на доход в 200 000 ₽ в IT.

При регистрации вы получите в подарок:

«Колесо компетенций»

Тест, в котором вы оцениваете свои качества и узнаете, какая профессия в IT подходит именно вам

«Критические ошибки, которые могут разрушить карьеру»

Собрали 7 типичных ошибок, четвертую должен знать каждый!

Тест «Есть ли у вас синдром самозванца?»

Мини-тест из 11 вопросов поможет вам увидеть своего внутреннего критика

Хотите сделать первый шаг и погрузиться в мир информационных технологий? Регистрируйтесь и
смотрите интенсив:

Только до 3 октября

Получить подборку бесплатно
pdf 4,8mb
doc 688kb

Осталось 17 мест

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

Настоящая текстура

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

Обложки книг

The Scouring of the White Horse; высокая печать обложки «Topophobia»; тиснение обложки «2666»

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

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

Визитки

Текстурированные визитные карточки Lift, Arūnas Kaltanas и Koodoz Design

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

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

Этикетки

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

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

Способ второй. Плагин Categories Images

Плагины выполняют один и тот же функционал, но у Categories Images, на мой взгляд, удобнее сделано добавление изображений и вывод списка рубрик в нужном месте.

Добавляем картики

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

Одним словом, выбираете нужный вам способ, самое главное — прилепить изображения к рубрикам.

Выводим картинки в рубриках с помощью плагина Categories Images

В нужном месте темы, размещаем следующий код

$args = array(
	'parent' => 0,
	'hide_empty' => 0,
	'exclude' => '', // ID рубрики, которую нужно исключить
	'number' => '0',
	'orderby' => 'count',
	'order' => 'DESC',
	'pad_counts' => true
);
$catlist = get_terms('category',$args);

<ul>
 <?php foreach ($catlist as $cat) : ?>
 <li>
 <img src="<?php echo z_taxonomy_image_url($cat->term_id, 'thumbnail'); ?>" />
 <a href="<?php echo get_term_link($cat->slug, 'category'); ?>"><?php echo $cat->name; ?></a>
 </li>
 <?php endforeach; ?>
</ul>

Параметр и обозначают тоже самое, что и предыдущем примере.

CSS-свойство background

В CSS свойство предназначено для управления фоном любого элемента.

Это универсальное свойство, которое позволяет вам сразу установить несколько параметров. А именно:

фоновое изображение или градиент;
начальную позицию фонового изображения и его размер;
повтор фонового изображения;
перемещение фона относительно области просмотра браузера и элемента;
цвет и т.д.

Универсальное свойство состоит из восьми других свойств (в скобках указано значение по умолчанию, которое имеет каждое из них):

(none);
(0% 0%);
(auto);
(repeat);
(scroll);
(padding-box);
(border-box);
(transparent).

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

Искусственная текстура

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

Искусственная текстура больше не занимает такое важное место в дизайне, как это было раньше

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

Наложение

Guimarães JAZZ 2009; «Tropical»; обложка журнала OC Weekly

На самом деле в текстуре есть два элемента: объем и «тактильность», что относится к более точному описанию формы. В реальном мире их сложно разъединить, но в дизайне вполне возможно. Один из способов передать объем без необходимости связываться с «тактильностью» — через наложение.

Все изображения выше дают ощущение многослойности. Это одна из форм текстуры, о которой дизайнеры не всегда думают.

Имитация

Текстуры Jacopo Severitano, Greenblatt-Wexler и Pawel Nolbert

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

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

Текстурированный шрифт Creative Pro и Man Greig Farin

Традиционная типографика ничего не имитирует. Буквы — это абстрактные символы, передающие определенное лингвистическое наполнение.

На протяжении последних лет, особенно с изобретением цифровых инструментов, шрифтовики экспериментируют с более игровыми формами шрифта, которые начинают передавать текстуру. Бесполезный, глупый, дешевый шрифт с прямоугольными засечками слева вверху, пожалуй, слишком яркий пример, но все же очень необычный. Начертание шрифта справа вверху называется «Canyon». Его создал Ман Фарин и этот пример более легкий и утонченный. Буквы здесь передают информацию о текстуре, позаимствованной у скал.

Скевоморфизм

designmodo.com and designerdaily.com

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

Создание текстурного фона

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

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

Создание текстурного фона

Для создания рисунка текстуры применяют компактное изображение, которое даже при многоразовом повторении будет загружаться только раз.

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

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

body {

background-color: #537759;

}

Как вы видите, в таком коде присутствует параметр по установке оттенка (зеленый) и параметр, который подключает зеленую текстуру.

background-image – фоновое изображение или градиент

CSS-свойство позволяет в качестве фона устанавливать обычные изображения (например, PNG, SVG, JPG, GIF, WebP) и градиенты. По умолчанию данное свойство имеет значение .

Использовать в качестве фона изображение очень просто. Осуществляется это так:

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

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

В задать изображение можно также через URI данные:

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

Пример двухцветного линейного градиента, идущего сверху вниз:

С указанием угла и нескольких цветов:

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

Пример конического градиента:

Кроме этого в CSS имеются повторяющиеся градиенты (, и ), с помощью них можно например, создавать различные узоры.

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

Выравнивание изображения

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

background-size

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

– картинка становится размером 100 на 100 пикселей, также можно использовать проценты;
– устанавливает размер картинки равным размеру элемента;
– увеличивает размер картинки по горизонтали и по вертикали, пока изображение не покроет весь элемент по горизонтали.

background-origin или background-clip

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

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

Заключение

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

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

Напоследок приведу немного иснофрмации о том, что такое лицензия Creative Common 0 (СС0), о которой не раз упоминалось в статье.

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

Но к счастью, в сети существует достаточно ресурсов, которые распространяют изображения, шрифты, иллюстрации и многое другое по лицензии Creative Commons. Это лицензия, которая позволяет бесплатно использовать распространяемые под ней ресурсы в коммерческих целях. У нее есть несколько разновидностей. Например, Creative Commons 0 – позволяет использовать объект в коммерческих целях без указания авторства (самый удобный вариант). В других вариантах может понадобиться указание авторства на скаченный объект и т.д. В любом случае, прежде чем использовать в своих работах результат чужого труда, обязательно ознакомьтесь с лицензией, чтобы не попасть впросак и если нужно, укажите авторство того, что вы используете.

Поблагодарим все сообщество дизайнеров и фотографов, которые готовы предоставлять результаты своего труда в безвозмездное пользование!

Подписывайтесь на обновления блога «Дизайн в жизни»

и мы обязательно опубликуем для вас еще больше полезных бесплатных ресурсов!