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 предоставляет простые иллюстрации, которые приобрели популярность в последние пару лет.
Вы можете найти все виды иллюстраций в зависимости от ваших потребностей, а также выполнить поиск по определенной теме, такой как «спорт» или «финансы», и вы увидите некоторые иллюстрации, которые могут иметь для вас значение.
Что так необходимо, так это то, что вы можете изменить цвет иллюстраций в правом верхнем углу, и все иллюстрации будут иметь такой цвет, как показано на изображении выше.
Что еще прекрасно, так это то, что он с открытым исходным кодом, и вы можете использовать его бесплатно.
Сохранение фоновых изображений на странице — HTML и CSS — Форумы SitePoint
vinpkl 1
привет всем
кто-нибудь использует плагин для любого браузера для сохранения фоновых изображений с веб-страницей.
это может быть для любого браузера firefox, т.е. опера.
винит
phillip_davies 2
В firefox, если вы хотите сохранить фоновое изображение, вы можете просто: щелкнуть правой кнопкой мыши ~ просмотреть фоновое изображение ~ щелкнуть правой кнопкой мыши ~ сохранить или скопировать изображение
винпкл 3
phillip_davies:
В Firefox, если вы хотите сохранить фоновое изображение, вы можете просто: щелкнуть правой кнопкой мыши ~ просмотреть фоновое изображение ~ щелкнуть правой кнопкой мыши ~ сохранить или скопировать изображение
привет Филипп
я знаю об этом, но при этом я должен сохранять все фоновые изображения одно за другим.
Я хочу сохранить все изображения и фоновые изображения вместе с веб-страницей.
винит
phillip_davies 4
ах, понятно, я хотел сказать попробовать файл ~ сохранить страницу как, но, похоже, это все, кроме фоновых изображений
gary_turner 5
ура,
Гэри
АлексДоусон 6
vinpkl, в Internet Explorer вы должны сохранить всю страницу (включая фон), если она сохранена как единый архив (я думаю, что расширение mht), он объединяет все сценарии, изображения и ресурсы, чтобы страница выглядела как это будет отображаться на экране, надеюсь, это будет полезно
винпкл 7
Алекс Доусон:
vinpkl, в Internet Explorer вы должны сохранить всю страницу (включая фон), если она сохранена как единый архив (я думаю, расширение mht), он объединяет все сценарии, изображения и ресурсы, чтобы страница выглядела так, как она должна на экране, надеюсь, это полезно
привет алекс
Файл .