Background css3: background-attachment — CSS: Cascading Style Sheets

 body {
   фоновое изображение: ссылка;
   фоновый повтор: повтор: x;
} 

Пример:

Вывод:

Свойство Background-attachment : Это свойство используется для исправления фонового изображения земли. Изображение не будет прокручиваться вместе со страницей.
Синтаксис:  

 тело {
   background-attachment: исправлено;
} 

Пример:  

Вывод:  

Свойство Background-position : Это свойство используется для установки изображения в определенное положение.
Синтаксис :  

 тело {
   фоновый повтор: без повтора;
   фоновая позиция: слева вверху;
} 

Пример:  

HTML

Output:  

Related Articles

What's New

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

7 Ресурсы CSS3 для современного дизайна фона

Автор Tara Hornor

24 марта 2015 г.

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

Несмотря на то, что эти веб-сайты красивы, немного оригинальности имеет большое значение в современном мире плоского дизайна и однотонных коробок. Градиентные шаблоны CSS3 спешат на помощь! И с этими градиентами можно сделать гораздо больше, чем простой градиент.

CSS-градиенты имеют линейную (прямые линии) или радиальную (круги или эллипсы) формы, и любую из них можно использовать для создания потрясающих узоров. Результат? Чистые, современные фоны для маленьких и больших площадей!

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

Теперь сложность заключается в том, где все начинает запутываться, и я думаю, что это важно отметить. Преимущество градиентов CSS3 заключается в том, что они могут предоставлять более короткий код; код легко читается, понимается и изменяется, не выходя из файла CSS; и нет необходимости в HTTP-запросах. Как отмечает Леа Веру в своей знаменитой статье на эту тему, слишком сложные шаблоны градиентов нарушают первое преимущество (короткий, читаемый, легко редактируемый код). В этом случае вы должны просто последовать ее совету и использовать SVG или растровые изображения для фонового рисунка, а не CSS.

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

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

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

Прежде чем объяснять, почему я включил инструмент PIE (Progressive Internet Explorer) в этот обзор, давайте посмотрим на совместимость браузеров. Градиенты CSS работают со всеми современными браузерами: Chrome 10+, Safari 5.1+, Firefox 3.6+, Internet Explorer 10 и Opera 11.10+ (радиальные градиенты для Opera 11.60+). Тем не менее, если ваши пользователи будут просматривать ваш сайт в IE версий 6-9, вам лучше убедиться, что вы включили цвет фона хотя бы для небольшой привлекательности. То есть до ПИЕ.

С помощью PIE вы просто добавляете одно короткое правило в CSS, чтобы градиенты работали в Internet Explorer 6+. Чего ждать? Да, это так просто! Просто загрузите инструмент, чтобы сгенерировать правильное правило для любой задачи, которую вы выполняете с помощью CSS, будь то градиенты, закругленные углы, тени и многое другое.

2. Галерея шаблонов CSS3.

Как упоминалось выше, Леа Веру создала несколько очень сложных шаблонов, в основном в попытке помочь другим полностью понять код CSS-градиентов. В этом вопросе и многом другом она чрезвычайно хорошо осведомлена и весьма блестяща. Как настоящий фанат веб-стандартов и любитель Javascript/CSS, Веру имеет невероятное резюме, которое включает в себя работу в W3C/MIT.

В ее галерею шаблонов CSS3 входят как ее собственные творения, так и работы других дизайнеров. Все они очень уникальны и демонстрируют различные способы манипулирования градиентами для создания удивительных узоров. Чтобы использовать шаблон или изменить его по своему усмотрению, просто нажмите на миниатюру, чтобы увидеть полноэкранный предварительный просмотр, а также код для копирования. Из-за ограничений Javascript шаблоны не будут работать в Firefox 3.6 и IE10. И если вы придумаете шаблон, который соответствует ее стандартам, вы можете представить его на ее одобрение.

3. CSS-градиенты Standardista.

Галерея шаблонов на Standardista.com включает в себя несколько превосходных шаблонов. Некоторые из них, например, несколько из Lea, подходят только для изучения градиентов, как тыльная сторона вашей ладони, если у вас есть такая потребность в этом. Другие выглядят достаточно красиво, чтобы их можно было использовать отдельно или редактировать для собственного веб-дизайна.

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

4. Редактируемая витрина Fivera.net Live.

Никола Петрович предоставил действительно классный список шаблонов CSS3 на своем веб-сайте Fivera.net. Некоторые из них очень похожи на те, что можно найти на сайте Леи, но, к его чести, он упоминает, что она и Крис Койер являются его источником вдохновения. Изящная часть его списка включает Codepen.

Вы можете щелкнуть ссылку «Редактировать в Codepen», чтобы перейти в редактор Codepen с кодом шаблона, уже введенным в столбец CSS. Оттуда вы можете редактировать код и видеть, как изменения происходят в режиме реального времени в разделе предварительного просмотра. Или, если вам нравится шаблон как есть, нажмите на ссылку CSS, чтобы скопировать код.

5. Градиенты CSS Демосфена.

В своем блоге Demosthenes. info Дадли Стори подробно освещает широкий спектр тем, связанных с HTML, CSS и SVG. Взгляните на любую из его статей в его блоге или на его книгу о Pro CSS3 Animation, и вы увидите, что он действительно знает, о чем говорит. Его блог очень хорошо организован для такого большого количества контента. У него огромный список категорий, и в этих подкатегориях, которые включают так много постов, вы можете потратить дни на одну только подкатегорию.

Посты Стори о градиентах CSS3 действительно впечатляют. Я нажал на категории CSS>Градиенты, чтобы найти действительно невероятные обсуждения и учебные пособия по таким темам, как наложение линейных градиентов поверх изображений. Сайт Demosthenes — это тот сайт, который вы не захотите пропустить, если хотите изучить от базовых до продвинутых способов использования линейных / радиальных градиентов и многого другого.

6. Инструменты градиентов Westciv.com.

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

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

7. Редактор градиентов CSSMatic.

После тестирования нескольких различных редакторов градиентов CSS3 в Интернете (а их очень много, так что добро пожаловать) лично мне больше всего понравился редактор градиентов CSSMatic. В нем есть несколько пресетов, не так много, как в редакторе Colorzilla, но инструмент был намного проще в использовании и все еще очень похож на инструмент градиента Photoshop.

Вы можете добавить столько остановок, сколько хотите, чтобы создать уникальный шаблон градиента, радиальный или линейный. Он даже поставляется с кодом SASS, IE9поддержка, несколько цветовых форматов, возможность сохранения вашего пресета и опция импорта из css. Ребята из CSSMatic в очередной раз превзошли самих себя!

Помните….

Не забывайте о следующих моментах при использовании радиальных и линейных градиентов:

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

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