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

Danilin.biz

1 подписчик

Автоматическая генерация градиентов из изображений

Если вы пользуетесь iTunes, то наверняка обращали внимание как фон подстраивается под цвета обложки активного диска, и насколько гармонично это выглядит. Признаюсь, у меня никогда не стояло задачи реализовать нечто подобное для веб. Но на днях мне попалась JavaScript-библиотека от Ben Howdle, которая автоматически генерирует градиенты из двух доминирующих цветов изображения.

Оказывается с её помощью можно с лёгкостью достичь схожего с iTunes эффекта.   Использование Grade.js Все как обычно, ничего нового. Подключаем библиотеку grade.js, инициируем её с помощью метода addEventListener() и задаём имя класса с фоном которого мы будем работать. В примере ниже это gradient-wrap. <!--the gradient is applied to this div as a background-image--> <div class="gradient-wrap"> <!--this inner image is used to create the gradient--> <img src="./samples/good-dinosaur.jpg" /> </div> <script src="../dist/grade.js"></script> <script type="text/javascript"> window.addEventListener('load', function(){ Grade(document.querySelectorAll('.gradient-wrap')) }) </script>…

Полная версия статьи: Автоматическая генерация градиентов из изображений.

Ссылка на первоисточник

Картина дня

наверх