Если вы пользуетесь 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>…Полная версия статьи: Автоматическая генерация градиентов из изображений.
