Is there a way to make a grayscale image in chrome via css?
I have tried this but doesn't work on latest version of chrome
support for native CSS filters in webkit has been added from the current version 19.0.1084.46
so -webkit-filter: grayscale(1) will work and which is better and easier approach than SVG for webkit...
Another solution would be svg with a level of indirection.
Basically, <img src="wrapper.svg"/> where wrapper.svg applies an svg filter to the svg, and the svg has an image element pointing to your raster image. Works in Opera, Chrome, Firefox and probably IE10 (untested).
Here's a demo. You can pass in your own url if you encodeURIComponent it first. Note though that for passing in parameters to work it relies on scripting being enabled, so if you need to use it in <img> elements or in a css background image you'd need to generate the svg files on the server.
Not yet, but Chrome 18 will support css filters (released later this year). SVG filters is only supported by Firefox. You should be able to find a consistent canvas+javascript solution though.
EDIT: See Erik Dahlström's post for alternate solution.
Here's an HTML5 solution. Supported by current versions of Chrome: http://webdesignerwall.com/demo/html5-grayscale/
Related
I have just taken a simple image and trying to animate it. It is working fine in google chrome, but image is not showing in case of firefox.
Here, I am giving you js fiddle link.
<body><div class="icon"></div></body>
Rest of the code is given in link:
http://jsfiddle.net/vvkkumar06/tA7qw/
the answer in the MDN docs.
http://oli.jp/2010/css-animatable-properties/#background-image
background-image
This is still a little up in the air, with “only gradients” in the
current Working Draft, no background-image at all in the current
Editor’s Draft, and “Animatable: no” for background-image in CSS
Backgrounds and Borders Module Level 3 Editor’s Draft. However,
support has appeared in Chrome 19 Canary, and this is something that
designers want. Until widespread support arrives this can be faked via
image sprites and background-position or opacity.'
At this time I have found that nobody actually supports gradients (Chrome 17, FF 12, IE9). Only Chrome supports background-image (that's why it doesn't work in FF for me).
To Animate Background
Try this
I think you should shorten your code like this http://jsfiddle.net/DreamBig/tA7qw/4/. I put backgound-image in the div so you don't have to write it again in the keyframes definition like 6 or 10 times.
background-image: url('http://www.rotateweb.com/images/WebDesignB1.jpg');
I've tested and it runs perfectly in FF.
So I've been messing around with SVG filters, and I'd like to apply them to HTML content.
http://paulirish.com/work/videooo.xhtml - works in firefox, not chrome.
https://dl.dropbox.com/u/4031469/woohtml.html - My example, works in FF, not Chrome.
Around the web, I've seen things mentioning the url() syntax for defining svg-based filters, while custom() refers to css shaders.
However, I haven't been able to get the filter working by either using the filter: property, nor the -webkit-filter: property.
Any ideas on how to get them to work? about:flags in Chrome doesn't have any options, so I'm trying to figure out if they're not implemented yet, or if I'm doing something incorrect.
In addition to the shorthand filters (blur, sepia, etc), Chrome now supports SVG filters on HTML content, as of V.21, using the -webkit-filter: url(#foo) syntax.
Webkit doesn't support svg filters on html elements. It does, however, support css filters.
So if you want to support both browsers you could write...
selector {
filter: url(#reference_to_blur);
-webkit-filter: blur(10px);
}
You can see more CSS filters here: http://davidwalsh.name/css-filters
I haven't tested, but I doubt IE9 and Opera support css or svg filters in their current incarnations (IE9 and Opera 11).
I have a HTML file with inline SVG, which in turn refers to SVG elements in external SVG file with library elements. It uses a <use> elements with xlink:href="Library.svg#libraryShapeID". It works as a breeze in Opera and Firefox, but doesn't work in Safari. I've made a simple test file here:
http://sasq.comyr.com/Stuff/SVG/test01.html
Is it some browser bug or am I doing something wrong?
How should I rewrite it to make it work in Safari too?
There was a bug about this on Webkit but it has been fixed for the Version: 420+ BUT the bug for Fragment identifier is still not solved.
Someone gave an answer: Importing external SVG (with WebKit) using XMLHttpRequest. Quite unfortunate but in the meantime, I guess working.
I realize that this is an old question. But as this method of using SVGs has become more popular these days, I wrote a polyfill to make this technique work in browsers that fail to load the external SVG by default. At the time of writing this, IE9+ doesn't support referencing external SVGs in use elements. The polyfill that I wrote is quite simple and lightweight; it detects whether the SVG has failed to load and if so, sends a GET request to fetch it. It will then prepend it to body.
I hope you find it useful. I would appreciate any feedback.
In my website, it looks great on any browser but Internet Explorer. I know that older versions Internet Explorer doesn't support CSS3, so I was wondering if there were equivalents in HTML to these methods: max-width:, border-radius:, box-shadow:, and transition:.
Any help would be appreciated.
For border-radius and box-shadow there is http://css3pie.com/ but that requires Javascript in IE. For a HTML only solution you have to use images, i guess.
You are asking for a way to get some of the newer features of CSS rendered in a browser that doesn't support CSS (or let's hope you are ignoring browsers that old and instead working with a browser version that do some CSS, but not enough for your tastes). Those browsers are outdated and you are not going to get it work just by avoiding css.
If you go far enough back, you may actually end up at a point in time when there were things that were possible in html weren't in css. However, it has been quite a while now that CSS is your best shot at getting things like that to work. If it doesn't work, it usually means that the browser doesn't support it at all, not that it doesn't support it through CSS.
Of course, you can work some magic and try to fake things with javascript, but it just isn't the same.
I recommend using modernizr. It detects if a browser supports different css3 (and html5) features and, if it doesn't, you can conditionally load javascript as a fallback solution.
Internet Explorer 9 supports max-width, border-radius and box-shadow, but not transition.
Personally I don't think CSS should have transition (or animation) as styles should affect how content is displayed, not how it behaves (I am also against the behaviour IE extension for this reason).
Overall, these styles you are asking for are aesthetical, and shouldn't really be a major issue if they aren't supported by the browser your user is on.
IE5.5+ has supported the CSS attribute "filter" where you convert a color image into grayscale using just CSS.
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
Do other browsers support a similar CSS tag without using JavaScript?
No. Filters are tied to ActiveX.
One example of how to achieve greyscaling in other browsers, but it does use JavaScript.
No they do not. Realistically you shouldn't be using those in cross-browser web development unless it is to make IE work in ways the other browsers don't. The obvious example is PNG support.
You can check out: http://snipplr.com/view/2836/grayscale-img-with-css-crossbrowser/
I hope it helps. I would still recommend using server-side for image manipulation, or Photoshop.
I'm pretty sure Opera supports some of the MS stuff. Haven't been able to find out exactly what parts they do support.