thereadme/theread.me
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[css-filter] new #Go Wild head and example

Browse Source
This commit is contained in:
Mahdi Dibaiee 2015-03-29 17:49:42 +04:30
parent a7d8c13e41
commit 958affe74d
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
_site _site
.sass-cache .sass-cache
.DS_Store

5
_posts/2015-03-28-css-filters.md
View File

@ -129,12 +129,13 @@ Okay, you now know the order of filters matters, the filter property is not actu
I said using the url function we have "the power of CSS and SVG filters in one place", but the CSS filters are actually implemented using SVG filters! You know, the functions are actually referencing to an svg generated in the browser. Here is the list of [CSS Filter equivalents](http://www.w3.org/TR/filter-effects/#ShorthandEquivalents). I said using the url function we have "the power of CSS and SVG filters in one place", but the CSS filters are actually implemented using SVG filters! You know, the functions are actually referencing to an svg generated in the browser. Here is the list of [CSS Filter equivalents](http://www.w3.org/TR/filter-effects/#ShorthandEquivalents).
##Go Wild #Go Wild
You can use CSS Filter on *any* element, experiment different things; `<video>`, `<canvas>`, `<iframe>`, GIF images, etc. You can use CSS Filter on *any* element, experiment different things; `<video>`, `<canvas>`, `<iframe>`, GIF images, etc.
Here is an example animating filters on GIF images: My try:
<iframe width="100%" height="300" src="//jsfiddle.net/mdibaiee/hjaL0ka3/4/embedded/result,css,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
----- -----