2/10/2015

ImageAdjustmentwithCSSFilterEffects

ImageAdjustmentWithCSS
FilterEffects
ByThoriqFirdaus.FiledinCoding,WebDesign

AdjustingimageBrightnessandContrast,orturningimageintoGrayscaleorSephiaisacommon
featureyoumayfindinimageeditingapplication,likePhotoshop.But,itisnowpossibletoaddthe
sameeffectstowebimagesusingCSS.

ThiscapabilitycomesfromtheFilterEffectswhichactuallyisstillintheWorkingDraftstage.However,
theWebkitbrowserseemstobeastepaheadinimplementingthisfeature.
So,letsgiveitatryandwewillusethisimagefromMehdiKhtodemonstratingtheeffects.

TheEffects
Applyingtheeffectsisveryeasy.Takealookatthesnippetbelow,forturningimagesintograyscale

01.

img{

02.

webkitfilter:grayscale(100%);

03.

data:text/htmlcharset=utf8,%3Ch1%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%3B%20border%3A%200px%3B%20fontweight

1/6

2/10/2015

ImageAdjustmentwithCSSFilterEffects

andthisisforsepiaalaInstagram.

01.

img{

02.

webkitfilter:sepia(100%);

03.

Boththesepiaandthegrayscalevaluesarestatedinpercentagewhere100%isthemaximumand
applying0%willkeeptheimageunchange,butwhenthevalueisnotexplicitlyspecifiedthe100%will
betakenasthedefault.

Brighteningtheimageisalsopossible,andwecandoitbyusingthebrightnessfunction,asfollows

01.

img{

02.

webkitfilter:brightness(50%);

03.

data:text/htmlcharset=utf8,%3Ch1%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%3B%20border%3A%200px%3B%20fontweight

2/6

2/10/2015

ImageAdjustmentwithCSSFilterEffects

Thebrightnesseffectworkslikethecontrastandsepiaeffectabovewherethevalueof0%willkeepthe
imageasitisandapplying100%willtotallybrightentheimage,whichwouldpossiblyshowonlya
blankwhitepageinsteadofanimage.
Thebrightnesseffectalsoallowsfornegativevalues,inwhichitwilldarkentheimage.

01.

img{

02.

webkitfilter:brightness(50%);

03.

..andwecanadjusttheimagecontrastthisway.

01.

img{

02.

webkitfilter:contrast(200%);

03.

data:text/htmlcharset=utf8,%3Ch1%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%3B%20border%3A%200px%3B%20fontweight

3/6

2/10/2015

ImageAdjustmentwithCSSFilterEffects

Thereisalittledifferenceonhowthevalueworksaswell,asyoucanseeintheabove,weset
thecontrast()by200%,thisisbecausethevalueof100%isthestartingpointwheretheimagewill
remainunchanged.Whenthevalueisbelow100%,letssay50%,theimagewillbecomeless
contrasted.
Furthermore,wecanalsocombinetheeffectinonedeclarationblock,suchasintheexamplebelow.We
turntheimageintograyscaleandincreasethecontrastby50%atthesametime.

01.

img{

02.

webkitfilter:grayscale(100%)contrast(150%);

03.

BycombiningthefilterwithCSS3transitionwecanmakeagracefulhovereffect.

01.

img:hover{

02.

webkitfilter:grayscale(0%);

03.

04.

img:hover{

05.

webkitfilter:sepia(0%);

data:text/htmlcharset=utf8,%3Ch1%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%3B%20border%3A%200px%3B%20fontweight

4/6

2/10/2015

ImageAdjustmentwithCSSFilterEffects

06.

07.

img:hover{

08.

webkitfilter:brightness(0%);

09.

10.

img:hover{

11.

webkitfilter:contrast(100%);

12.

Lastly,thereisonemoreeffectwecantrytheGaussianBlur,whichwillblurthetargetedelement.
viewplain

copytoclipboard

print

01.

img:hover{

02.

webkitfilter:blur(5px);

03.

LikeinPhotoshop,theblurvalueisstatedinpixelradiusandifthevalueisnotexplicitlystated,the
<0willbetakenasthedefaultandtheimageisleftasitis.

data:text/htmlcharset=utf8,%3Ch1%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%3B%20border%3A%200px%3B%20fontweight

5/6

2/10/2015

ImageAdjustmentwithCSSFilterEffects

FinalThought
Thereareactuallyalotmoreeffectsinthespec.suchashue-rotate,invertandsaturate,butI
thinktheyarelessappliedinrealWebcases.Thus,thediscussionwaslimitedtojustfoureffects.

And,despitethediscussionbeingappliedtoimagesinthistutorial,thepropertycanactuallyalsobe
appliedtoanyelementintheDOM.
Finally,youcanviewthelivedemofromtheselinksbelow.PleasetakenotethattheFilteriscurrently
onlysupportedinChrome19andabove.

DEMO

DOWNLOADSOURCE

data:text/htmlcharset=utf8,%3Ch1%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%3B%20border%3A%200px%3B%20fontweight

6/6