Image Adjustment With CSS Filter Effects
-
Upload
vedran-vukelic -
Category
Documents
-
view
6 -
download
0
description
Transcript of Image Adjustment With CSS Filter Effects
-
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