diff --git a/.DS_Store b/.DS_Store index deecfc2..246bac4 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/_posts/2015-03-09-beginning.markdown b/_posts/2015-03-09-beginning.markdown index ad8f120..7ba1a58 100644 --- a/_posts/2015-03-09-beginning.markdown +++ b/_posts/2015-03-09-beginning.markdown @@ -21,7 +21,7 @@ let style = document.querySelector('style'); setInterval(() => { const now = Date.now(), birth = new Date(2015, 2, 9).getTime(), - color = `#(now - birth).toString(16).slice(0, 6)`, + color = `#(now - birth).toString(16).slice(0, -6)`, style.textContent = `#mahdi path { stroke: ${color} !important; @@ -39,7 +39,7 @@ var style = document.querySelector('style'); setInterval(function() { var now = Date.now(), birth = new Date(2015, 2, 9).getTime(), - color = '#' + (now - birth).toString(16).slice(0, 6); + color = '#' + (now - birth).toString(16).slice(0, -6); style.textContent = '#mahdi path {\ stroke: ' + color + ' !important; \ diff --git a/_posts/2015-03-28-css-filters.md b/_posts/2015-03-28-css-filters.md index 5385361..ff76d07 100644 --- a/_posts/2015-03-28-css-filters.md +++ b/_posts/2015-03-28-css-filters.md @@ -20,7 +20,7 @@ CSS Filters introduce a few useful effects and some image adjusting functions, n A simple demo showing blur, contrast and brightness combined (hover over image): - + I group filters by the type of value they take, let's explain them briefly: @@ -54,7 +54,7 @@ I group filters by the type of value they take, let's explain them briefly: ###hue-rotate If you're familiar with [Hue](https://en.wikipedia.org/wiki/Hue) you probably know that it's measured by angles. The hue-rotate rotates the hue circle of an image relative to it's current hue value (360 and 0 have the same results). - + ##Special These filter's don't fit in any of the groups above, they have special/mixed values. @@ -72,7 +72,7 @@ I group filters by the type of value they take, let's explain them briefly: Here is an example, a PNG image with transparent background and a CSS triangle made using the border hack: - + ###url With the url function we have the power of CSS and SVG Filters in one place. You can reference an SVG element by linking to it with a hash of the filter element's ID: @@ -117,18 +117,25 @@ Hey browser, please double the contrast of my element, then blur it out. (high c Here is the actual comparison: - + ##Inheritance Okay, you now know the order of filters matters, the filter property is not actually *inherited*, but when you apply a filter on a parent element, of course it's children are affected too, but what if the children have their own css filters? Ah-ha! CSS properties are applied bottom-up, which means childrens' filters are applied first. - + ##Implementation 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 + +You can use CSS Filter on *any* element, experiment different things; `