CSS Master

(Primo) #1
Figure 10.6. The effect of filter: blur(10px) grayscale(1)

IfwewantedtobluranimageandmakeitgrayscaleasinFigure10.6,wecanuse
thefollowingCSS:


img {
filter: blur(10px) grayscale(1);
}

FullsupportforfiltersareavailablewithoutaprefixinFirefox35+.Firefoxversions
3.6-34onlysupporttheurl()functionforfilters.Chrome18+,Opera15+,andSafari
6+alsosupportfilterswitha-webkit-prefix.MicrosoftEdgesupportsfilters,but
iswithoutsupportfortheurl()function.Filtereffectscanalsobeanimated,unlike
blendmodes.


Keepingtrackofallofthiscanbeoverwhelming.Justwhenyouthinkyou’reupto
dateoneverything,youfindanewspecthatyoudidn’tknowexisted,oranexisting
specchangesinasignificantway.Becausespecificationsandimplementationsare
ofteninflux,keepingupwithchangestoCSScanbequitetough,butitispossible.


How to Follow Changes and Additions to CSS


TheWorldWideWebConsortiummanagesalistofcurrentspecificationsandtheir
status.^10 Ifyoudon’tmindgettingintheweeds,theCSSWorkingGroupmailing
listisagreat—thoughoverwhelming—waytotrackdiscussionsandcontributeto
thedevelopmentofCSSspecifications.TheCSSWorkingGroupalsohasaTwitter


(^10) http://www.w3.org/Style/CSS/
Conclusion 361

Free download pdf