View All Posts

Auto Detect Lightness/Darkness of a Background Image!

This Script allows you to automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it. Great for Sliders!

screenshot-www.kennethcachia.com 2016-09-02 11-31-48

How Simple It Is:

HTML

 <script src="scripts/css-backgrounds.js"></script>
</head>

CSS

.label.background--light {
  color: black;
}

.label.background--dark {
  color: white;
}

 JS

BackgroundCheck.init({
  targets: '.ui',
  images: '.thumbnail'
});

 http://www.kennethcachia.com/background-check/ (Demos)

 https://github.com/kennethcachia/background-check (Code)

 

Posted: September 2nd, 2016
Category: Development
Tags: ,