Posts

In photography, adjusting the contrast of an image is often an important part of the post processing routine. Contrast refers to the difference between light and dark in an image. In the color spectrum of an image the darkest color possible is black and the lightest color is white. A high contrast image is one that displays a large number of tones between these two extremes. Conversely a low contrast image is one that does not have too much variation between it’s light and dark tones. Images with high contrast tend to be colorful and vibrant whereas images with low contrast tend to be dull and dimmed down.

When speaking of image contrasts another topic that frequently comes up is adjusting the brightness of an image. Modifying the brightness is another way to alter the tones in an image to achieve a specific look. It is possible to adjust the contrast and brightness of an image in CSS. This is done through the filter property. The filter property allows for a range of alterations to be made to images. Two values of the filter property are contrast( ) and brightness( ). Below are examples of how each works.

This is the original image to which we will be applying the contrast and brightness filters.

See the Pen xRexdM by Remi D (@Remi7497) on CodePen.


Contrast

The syntax for contrast is filter: contrast(value); Contrast takes percentage values between 0% to over 100%. A value of 100% results in no change to the image. Values less than 100% reduce the contrast of the image, whereas values greater than 100% increase the contrast of the image. Decimal values are also acceptable as input values. Below are a few examples of applying various contrasts to the image. As you can see at 70% the image is dimmer than the original image. As the contrast is increased the shadows get darker while the highlight tones of the image get brighter.

contrast(70%)                                        contrast(120%)

contrast(150% )                                       contrast(250%)

Brightness

The syntax for adjusting brightness is filter: brightness(value); Brightness like contrast takes percentage values ranging from 0% to above 100%. A value of 100% keeps the original image. Any value less than 100% dims the image, with a value of 0% resulting in a completely black image. Values over 100% increases the brightness of the image. Below is the image at four different brightness levels.

brightness(80%)                                       brightness(130%)

brightness(180%)                                   brightness(250%)

Conclusion

Images are a great way to enhance webpage content and communicate more effectively with users.  The CSS filter property can be used to create bright high contrasted images or dim low contrasted images quickly and easily.

The jQuery .css method is used to GET or SET DOM element CSS properties.

The following tutorial will demonstrate 4 core concepts of jQuery’s .css method

    1. 1. GET a CSS property from a DOM element
    1. 2. GET multiple CSS properties from a DOM element
    1. 3. SET a CSS property on DOM elements
    1. 4. SET multiple CSS properties on DOM elements

When looking to GET a CSS property with jQuery’s .css method, jQuery will return the first matched element’s CSS properties. So, you will want to pay close attention to the jQuery selector used when requesting a CSS property. If you pass a class into the selector and a group of elements gets returned, jQuery’s .css method will only show CSS properties for the first matched element in the group of matched elements.

Let’s start by taking a look at using jQuery’s .css method to GET a CSS property from a DOM element with a class of box. In this first example, let’s create a <div> with a solid background color

.box {
	background-color: #000;
	width: 100px;
	height: 100px;
	opacity: 0.8;
}

Next, let’s use jQuery’s .css method to GET the opacity of the <div>


	var box_opacity = $('.box').css('opacity');
	console.log(box_opacity) // "0.8"

Note: jQuery’s .css method returns the CSS value as a string, not a number

To return multiple CSS properties, pass in an array of CSS properties. Passing in an array of CSS properties will return an object with CSS key:”value” pairs


var box_props = $('.box').css(['opacity', 'width', 'height', 'background-color']);
console.log(box_props); // Object {opacity: "0.8", width: "100px", height: "100px", background-color: "rgb(0, 0, 0)"}
console.log(box_props.width); // "100px"
console.log(box_props.opacity); // "0.8"

Next, let’s take a look at how to set CSS properties with jQuery. When looking to SET CSS properties, all matched elements returned by the selector will have the css properties defined SET. Setting properties with jQuery’s .css method makes updating a large group of html elements easy. You could update all of paragraph tags in your docuemnt with just one line of code.


$('.box').css('opacity', '0.2');

Finally, setting multiple css properties with jQuery can be done by passing in a javascript object. The key is name of the css property, and the value will be the css value. A good practice is to enclose the keys within quotes to avoid errors with certain css properties such as background-color which has a hyphen between background and color.


$('.box').css({
	'opacity': '1',
	'width': '50px',
	'height': '50px',
	'background-color': '#f48035'
});

To summarize, jQuery’s .css method makes getting and setting css properties with javascript convenient and easy. Whether you are looking to get the font size of some text, or set the width and height of an html element, jQuery’s .css method is a great addition to your tool set. One detail to note when getting a css property, is the css values will get returned as a string. However, when setting a css property such as opacity, width, height, etc.. the .css method conveniently accepts strings or numbers. When setting multiple css properties, a good practice is to wrap your javascript’s object keys in single or double quotes.