Css фон: Фон и границы — Изучение веб-разработки

Анимированный фон веб-страницы на чистых HTML и CSS

Домой Обучение Анимированный фон веб-страницы на чистых HTML и CSS

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Перевод статьи «Amazing Pure HTML and CSS background animations».

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

Диагональный градиент

See the Pen Diagonal Color Gradients by Alison Quaglia (@hylobates-lar) on CodePen.

Написать такой код легко, а эффект получается очень интересный.

Скольжение диагоналей

See the Pen Sliding Diagonals Background Effect by Chris Smith (@chris22smith) on CodePen.

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

Анимированный фон

See the Pen Animation Background || Only Css by Nour Ibram (@nouribram) on CodePen.

Обратите внимание, насколько прост сам бэкграунд и насколько меняется его восприятие благодаря анимации.

Бесконечный паттерн

See the Pen Pattern Animation (Infinite) by Adam Abundis (@adamabundis) on CodePen.

Отдельное спасибо @keyframes за бесконечную прокрутку!

Прекрасный анимированный бэкграунд

See the Pen Awesome Animated background by beshoy ekram (@beshoooo) on CodePen.

Просто задержитесь на мгновение и насладитесь тем, насколько привлекательна эта анимация. Такое приятное смешение цветов, а между тем оно совершенно не отвлекает внимание от названия на переднем плане.

Анимированный «лесной» фон

See the Pen CSS Multiple Background Image Parallax Animation by carpe numidium (@carpenumidium) on CodePen.

Плавающие квадраты

See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.

Снова диагональные линии

See the Pen Sépion CSS background animation 2 by Sépion (@Sepion) on CodePen.

Весьма ненавязчиво!

Плывущие облака

See the Pen Floating Cloud Background by Shaw (@shshaw) on CodePen.

Да, в названии заявлено, что все на чистом СSS, но когда я увидел этот фон, не смог не добавить его в коллекцию, несмотря на то, что здесь использован CSS(Less).

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

• ТЕГИ
• frontend
• верстка

Предыдущая статьяКак создавать инклюзивные и доступные цифровые продукты

Следующая статья4 полезных инструмента для веб-разработки, нечасто попадающих в списки «самых-самых»

Редакция techrocks. ru

techrocks.ru — качественный контент, созданный инженерами для инженеров

Как установить фон при помощи CSS свойства background

12.08.18 ИТ / CSS 2063

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

Среди множества свойств для установки фона обычно выделяют следующие:

• background-attachment — устанавливает, будет ли фоновое изображение прокручиваться вместе с содержимым элемента. Возможные значения: fixed, scroll, inherit, local;
• background-clip — определяет, как фоновая картинка или цвет фона будет выводиться под границами. Возможные значения: padding-box, border-box, content-box;
• background-color – служит для определения цвета фона элемента. Возможные значения: transparent, inherit;
• background-image — устанавливает фоновое изображение для элемента. Возможные значения: url, none, inherit;
• background-origin — определяет область позиционирования фонового рисунка. Значения: padding-box, border-box, content-box;
• background-position — задает начальное положение фонового изображения, установленного с помощью соответствующего свойства. Значения: inherit, а также px, em и т.д.;
• background-position-x — задает положение фонового изображения внутри элемента по горизонтали, является нестандартным свойством и не входит в спецификацию. Значения: inherit, left, center, right, а также px, em и т. д.;
• background-position-y — задает положение фонового изображения внутри элемента по вертикали, является нестандартным свойством и не входит в спецификацию. Значения: inherit, top, center, bottom, а также px, em и т.д.;
• background-repeat — определяет, как будет повторяться фоновое изображение, установленное с помощью соответствующего свойства. Значения: no-repeat, repeat, repeat-x, repeat-y, inherit, space, round;
• background-size – устанавливает масштаб фонового изображения согласно заданным размерам. Значения: auto, cover, contain, а также %, px, em и т.д.

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

Фоновые изображения CSS и доступность

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

Проблема

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

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

Сравнение со встроенными изображениями

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

Требования

Для изображений текста, для которых часто используется этот метод, существует четкое требование WCAG 2 уровня AA не использовать изображения текста, когда текст может быть отображен технологической платформой. Для веб-приложений почти всегда можно создать текст, за исключением шрифтов, которых может не быть в пользовательских системах. В этих случаях можно использовать технику стиля Cufon. Проблема все еще остается для изображений, которые не являются текстовыми, но имеют смысл, и проблемы по-прежнему относятся к другим требованиям доступности, таким как Раздел 508.

Решения

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

Не использовать фоновые изображения

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

Размещение частей встроенного изображения

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

Использовать до или после псевдоэлементов

Для отображения изображений можно использовать псевдоэлементы. Этот метод отлично подходит для изображений, чтобы сохранить их на экране, но не поддерживается некоторыми браузерами, в основном Internet Explorer 7. Информацию об этом методе можно найти в блоге Paciello Group. Кроме того, псевдоэлементы не могут быть выбраны.

Использовать HTML 5 Canvas

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

Используйте трюк с позиционированием CSS

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

Этот метод работает неодинаково в разных браузерах. Firefox по-прежнему отображает текст поверх фонового изображения, в то время как Internet Explorer скрывает текст за изображением. Хотя в режиме высокой контрастности Internet Explorer не отображал текст должным образом.

Заключение

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

Хотите расширить знания своей команды о передовых методах веб-доступности?

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

Фоновые цвета и изображения

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

Цвет фона

Цвет фона можно добавить практически к любому элементу html с помощью свойство background-color , за которым следует допустимое определение цвета (см. руководство по определениям цветов CSS).

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

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

Фоновое изображение

Фоновое изображение можно применить с фоновым изображением и ссылку на путь к изображению.

По умолчанию фоновое изображение:

• Повторяется по обеим осям x и y.
• Выравнивается по верхнему левому краю элемента.
• Размер соответствует фактическому масштабу файла изображения.

В приведенной выше демонстрации попробуйте заменить URL-адрес изображения другим изображением, найденным в Интернете. Обратите внимание на то, как размер изображения влияет на его поведение. Что происходит, когда вы используете очень маленькое изображение? А если очень большой?

Повтор фона

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

повтор-х

повтор-y

без повтора

Фоновое положение

Обратите внимание, что в предыдущих примерах фоновое изображение по умолчанию располагается в левом верхнем углу элемента, к которому оно применяется. Это можно изменить с помощью background-position свойство. Он будет принимать два значения: положение по оси X и положение по оси Y.

Ключевые слова

Самый простой способ указать значения для background-position — использовать доступные ключевые слова: left , right , top , bottom или center . Каждый ведет себя так, как вы ожидаете.

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

Измерения

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

В приведенном выше примере попробуйте разные значения измерения для свойства background-position . Играйте с разными типами юнитов и разными числами.

Фоновое приложение

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

Размер фона

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

Ключевые слова

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

содержат

содержат Масштабирует изображение так, чтобы все изображение было видно внутри элемента.