Default CSS Filter Values for Brightness and Contrast

How to Decrease Image Brightness in CSS

The feature you're looking for is filter. It is capable of doing a range of image effects, including brightness:

#myimage {
filter: brightness(50%);
}

You can find a helpful article about it here: http://www.html5rocks.com/en/tutorials/filters/understanding-css/

An another: http://davidwalsh.name/css-filters

And most importantly, the W3C specs: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Note this is something that's only very recently coming into CSS as a feature. It is available, but a large number of browsers out there won't support it yet, and those that do support it will require a vendor prefix (ie -webkit-filter:, -moz-filter, etc).

It is also possible to do filter effects like this using SVG. SVG support for these effects is well established and widely supported (the CSS filter specs have been taken from the existing SVG specs)

Also note that this is not to be confused with the proprietary filter style available in old versions of IE (although I can predict a problem with the namespace clash when the new style drops its vendor prefix).

If none of that works for you, you could still use the existing opacity feature, but not the way you're thinking: simply create a new element with a solid dark colour, place it on top of your image, and fade it out using opacity. The effect will be of the image behind being darkened.

Finally you can check the browser support of filter here.

How to update bright value in css filter using javascript without removing other filter attributes.?

It's easier to combine both values in a single event. Simply add .slider class to both sliders.

$('.slider').on('input', function () {
var bright = $('.brightness').val();
var contrast = $('.contrast').val();

var selectedItem = document.getElementsByClassName('box')[0];
selectedItem.style.filter = "contrast("+contrast+"%) " + "brightness("+bright+"%)";
});

This works with both brightness and contrast.

Adjust leaflet map's brightness using filter css property

Here's one way of doing it:

HTML

<body>
<input type="range" min="0" max="200" value="0" class="slider" id="brightness-slider">
<div id="map"></div>
</body>

JavaScript

var mymap = L.map('map').setView([51.505, -0.09], 13);

var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
tileLayer.getContainer().style.filter = 'brightness(0%)';

var slider = document.getElementById('brightness-slider');
slider.addEventListener('input', function(e) {
var value = e.target.value;
tileLayer.getContainer().style.filter = 'brightness(' + value + '%)';
});

Try it out in this JSBin.



Related Topics



Leave a reply



Submit