Фон для сайта css: Как сделать фоновый рисунок в css

5 ресурсов, чтобы легко найти или создать свой следующий фон CSS | Kasper Due

Чтение: 4 мин.

·

11 октября 2020 г.

Фото Доменико Лойи на Unsplash

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

С помощью этих ресурсов вам будет проще создать или найти следующий фон для вашего следующего проекта!

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

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

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

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

Pixabay — еще один сайт с бесплатными изображениями, такой же, как unsplash.com, где вы можете использовать изображения, не опасаясь нарушения авторских прав.
Что мне действительно нравится в Pixabay, так это то, что у вас есть возможность выбирать между иллюстрациями, векторными видео и музыкой. У вас есть несколько медиа, объединенных в один сайт, поэтому, если вы в конечном итоге захотите изменить свою целевую страницу с причудливого фонового изображения на видео, вы можете найти его здесь.
Pixabay содержит более 2,1 миллиона бесплатных стоковых фотографий, и у вас есть возможность фильтровать их по цвету, размеру, ориентации и т. д., чтобы вы могли легко найти подходящую фотографию для своего сайта.

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

5 CSS-анимированных фонов, которые вдохновят вас на следующий проект | Элисон Куалья

Опубликовано в

·

Чтение: 3 мин.

·

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

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

Вот довольно простой пример использования только чистого CSS для начала! Этот фон вращается между 4 различными цветовыми градиентами, исчезая и исчезая вдоль диагональной оси в бесконечном цикле с использованием

ключевых кадров . Это очень легко настроить, изменив цвета, скорость или направление градиента.

В следующем примере используется чистый SCSS для создания красочного эффекта парящего шара. Цвета генерируются случайным образом, а шары медленно вращаются, танцуя на экране. При ближайшем рассмотрении я узнал, что каждый «шар» на самом деле представлен текстом! В частности, они представляют собой случайно сгенерированные тени периода, как вы можете видеть, перечисленные как content в коде:

 head::before, head::after, 
 body::before, body::after { 
 position: fixed; 
 верх: 50%; 
 осталось: 50%; 
 ширина: 3em; 
 высота: 3см; 
 содержимое: '.'; 
 смешанный режим: экран; 
 анимация: 44 с -27 с двигаться бесконечное чередование плавности входа и выхода; 
  } 

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

Этот анимированный фон имеет точно такой же код , что и плавающие цветные шары, только с ДВУМЯ изменениями! Контент был переключен с '. ' на 'V' , а тень текста в цикле для была изменена с 7 пикселей на 2 пикселя. Вот и все, и мы добились совершенно новой анимации!

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

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

Мне нравится этот! Фоновые изображения накладываются друг на друга и перемещаются с разной скоростью в разных направлениях с использованием чистого CSS. Этот стиль анимации называется «параллакс», и это отличный способ создать иллюзию глубины из 2D-изображений.