Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Follow us on LinkedIn for our latest data and tips!
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.
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%)
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%)
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.
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Let DI help you design solutions to onboard, upskill or reskill your software development organization. Fully customized. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 500 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.”
VMwareThank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
© 2013 - 2020 DevelopIntelligence LLC - Privacy Policy
Let's review your current tech training programs and we'll help you baseline your success against some of our big industry partners. In this 30-minute meeting, we'll share our data/insights on what's working and what's not.
Training Journal sat down with our CEO for his thoughts on what’s working, and what’s not working.