2/10/2015 ImageAdjustmentwithCSSFilterEffects

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

ImageAdjustmentWithCSSFilterEffectsByThoriqFirdaus.FiledinCoding,WebDesign

AdjustingimageBrightnessandContrast,orturningimageintoGrayscaleorSephiaisacommon

featureyoumayfindinimageeditingapplication,likePhotoshop.But,itisnowpossibletoaddthe

sameeffectstowebimagesusingCSS.

ThiscapabilitycomesfromtheFilterEffectswhichactuallyisstillintheWorkingDraftstage.However,

theWebkitbrowserseemstobeastepaheadinimplementingthisfeature.

So,letsgiveitatryandwewillusethisimagefromMehdiKhtodemonstratingtheeffects.

TheEffectsApplyingtheeffectsisveryeasy.Takealookatthesnippetbelow,forturningimagesintograyscale

01. img{

02. webkitfilter:grayscale(100%);

03. }

2/10/2015 ImageAdjustmentwithCSSFilterEffects

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

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. }

2/10/2015 ImageAdjustmentwithCSSFilterEffects

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

Thebrightnesseffectworkslikethecontrastandsepiaeffectabovewherethevalueof0%willkeepthe

imageasitisandapplying100%willtotallybrightentheimage,whichwouldpossiblyshowonlya

blankwhitepageinsteadofanimage.

Thebrightnesseffectalsoallowsfornegativevalues,inwhichitwilldarkentheimage.

01. img{

02. webkitfilter:brightness(50%);

03. }

..andwecanadjusttheimagecontrastthisway.

01. img{

02. webkitfilter:contrast(200%);

03. }

2/10/2015 ImageAdjustmentwithCSSFilterEffects

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

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%);

2/10/2015 ImageAdjustmentwithCSSFilterEffects

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

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

2/10/2015 ImageAdjustmentwithCSSFilterEffects

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

FinalThoughtThereareactuallyalotmoreeffectsinthespec.suchashue-rotate,invertandsaturate,butI

thinktheyarelessappliedinrealWebcases.Thus,thediscussionwaslimitedtojustfoureffects.

And,despitethediscussionbeingappliedtoimagesinthistutorial,thepropertycanactuallyalsobe

appliedtoanyelementintheDOM.

Finally,youcanviewthelivedemofromtheselinksbelow.PleasetakenotethattheFilteriscurrently

onlysupportedinChrome19andabove.

DEMO DOWNLOADSOURCE