I want to put a red rectangular <div> element over my webpage so that it would look not only transparent, but also like blended in Photoshop’s Multiply mode.
The <div> would have position: fixed, so the content below it would change quickly.
Is that possible with any HTML5 / CSS3 / canvas / SVG trick?
I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here's the sample usage:
// Might be an 'offscreen' canvas
var over = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');
over.blendOnto( under, 'screen', {destX:30,destY:15} );
See the README for more information, including the currently-supported blend modes.
You could use this to perform multiply from one canvas to another, but not over standard HTML elements.
No (not natively) but it's coming soon: http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/
You can also look at this demo: http://media.chikuyonok.ru/canvas-blending/ to see how to do this with canvas.
Check the source for blending modes' formulae and how to apply them (formulae are much more readable than in pixastic or context-blender).
This isn't HTML5, but it's as close as I can find for what you're asking.
Javascript blending modes (OpenGL).
I don't think "blend modes" like Photoshop could be emulated with just pure HTML, unless the language took a sharp turn in another direction. But it would be great to see some easier way of doing this.
I am also very interested in doing that. Many layouts that I coded for visual designers could have used that. Aside from the other posts in this thread, there is a way to do this, currently only in Firefox 4, without using OpenGl or Canvas. It's trough the use of SVG filters. Aparrently it's on nighties from Webkit and Chrome also, but I couldn't see anything working yet.
Here are some demos and explanations:
(demo) http://people.mozilla.org/~roc/filter.xhtml
https://developer.mozilla.org/en/applying_svg_effects_to_html_content
https://developer.mozilla.org/web-tech/2008/09/15/svg-effects-for-html-content/
http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html
IMHO something anyware close to blend modes are too much hard to achieve right now. It's very hard to find any references on feConvolveMatrix, feSpecularLighting, or feColorMatrix, and the examples are just impossible to figure out for me. They could work but I don't know how.
I wish something like EffectGames suggested:
div.sprite {
position: absolute;
z-index: 2;
composite: add;
}
This would be a way better approach. Maybe some ninja there skiled in mathematics could make us a lib to do that.
EDIT: There is an easier SVG spec to do exactly blend modes. But no browser that I tested have this working (FF4, IE9, Opera11, Webkit Nightly): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - But I also don't know if this will be possible to use in HTML-DOM elements.
This is the closest I have seen, and yes, all assets have to be in the canvas. Note that Internet Explorer starts supporting canvas in version 9 which is not out yet, so if you have to support IE<9 you'll have to use a workaround.
It's landed in Chrome Canary so should reach release soon. http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/
You can already use it with just simple CSS (no Canvas). Example:
mix-blend-mode: 'multiply'
Internet Explorer may not support it, but the other browsers do.
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Depending on the images involved and the exact effect you are after, you might be able to do some creative layering of images and CSS gradients to achieve the desired affect:
http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/
I have implemented most popular blend modes known from gimp/photoshop using canvas in http://canvasquery.com/ however it is not suitable for relatime.
This will change with introduction of native blend modes in canvas
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable
Related
With some CSS styling properties, we need all these different kinds of approaches, tricks and hacks to make things work cross browser. I never wanted to be an expert in IE, and making it work, no...I wanted to specialize in designing good looking, practical and user friendly web applications without wondering if that rounded corner is going to be round in browser x and y.
CSS3 and even CSS doesn't work in browsers like IE7 like it's intended to, (I don't care for IE6), and one has to spend so much time in making things work across different browsers, that the creative concepts, and actual goal of a site goes out the window.
Is there is a solution for making/morphing CSS/CSS3 to be compatible with browsers that don't support it. Perhaps a JavaScript library?
It would be nice to be able to change opacity like this:
.style { opacity: 0.5; }
and not like this:
.style {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
...similar to Prefix Free which currently doesn't support IE
So are there JavaScript libraries out there that will dynamically expand CSS as needed by a particular browser, and also enable CSS3 support, and future proofing of CSS3?
One idea might be looking into the LESS framework. It's a object oriented way of doing CSS. So to set opacity, you'd do something like this:
.opacity (#opacity) {
opacity: #opacity;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=#opacity*100)";
filter: alpha(opacity=#opacity*100);
}
Then to use it, you'd just "call it" like a function.
.style {
.opacity(0.7);
}
And the output would be like your second code snippet
I use CSS3PIE for IE compatibility!
Not sure if there'd be any clashes between Prefix Free and CSS Pie - but it's worth a shot!
http://css3pie.com/
It requires a little bit of work to set up, but after that it's pretty good!
http://cssprefixer.appspot.com/ is possibly a good option! And using it in conjunction with something like LessCSS would be a viable option, but I guess the end results would be down to some proper benchmarking.
It's all about minimizing CSS file sizes, and also at the same time, trying to get the maximum client side performance in terms of rendering HTML and JS execution.
Filters like
img {filter:flipV;}
I'm guessing are pretty old, I just was asked by a colleague why they weren't working for him in FF. I assume they were an IE only thing that died out a while back?
Yes, it is IE-only. They didn't die-out, they were just a bad idea to begin with.
They were the only way to do some things in IE, for example PNG transparency in IE6...so they're still around. Web developers everywhere are hoping they die :)
Even in the latest jQuery UI files you can find it being used for Alpha transparency: http://dev.jqueryui.com/browser/trunk/themes/base/jquery.ui.theme.css
By no means are they gone...unfortunately. At this point, I'm hoping they don't stick something like this into IE9 and call it a "feature"...
You may find this article interesting. While filter is IE only, there is a Firefox equivalent (opacity) which is part of the CSS3 recommendation.
They are pretty old and work only in IE. Bad, don't use them unless you are targetting only IE (not good again). There are some things in CSS3 not supported by IE, you can sometimes use these filters to get around things.
For example, box shadow effect can be easily done with CSS3 but IE again does not support that, you can use these filters for IE and normal CSS3 for other browsers to create a cross-browser solution.
Any solution for reducing browser compatibility problem while writing css style.
These three are the main points you need to do yourself:
Write correct markup - make sure it validates
Make sure your markup is in standards mode
Write correct CSS - make sure it validates
In addition, you can do some of the following to reduce the amount of headache:
You can use a CSS framework, like Blueprint, 960.gs, YUI CSS library, etc.
For Internet Explorer -related issues, there is ie7.js and ie8.js
Know how HTML and CSS work
Test in all browsers you target
You may also want to use a CSS reset file to start on the common ground.
Well, as of now there is nothing like fixall() which will make all browsers compatible...however, you can reduce compatibility problems by using the correct doctype.
Read thisarticle on using doctypes. Also, validate your markup.
Edit: You can go to Browser shots to see screenshots of your web design in different browsers.
Discipline!
Validate your HTML. Use a correct DOCTYPE.
Use standards, hack the bugs.
Be descriptive, or use a reset stylesheet.
Simple -- test, test, test.
First thing, you should have at least these browsers on your computer: FireFox3.5B , InternetExplorer7 (+ optional Safari 3, Google Chrome 2 Beta and Opera).
Now for a more definite answer:
avoid css3 styling like "opacity" et cetera as CSS3 is not a standard yet. Instead use Javascript libraries like jQuery to apply those effects selectively
avoid png transparency like the plague... instead use dithered gif transparency (this is now somewhat old, as it now works on IE7+)
Test and test and test
I have been working on a webpage. It is the first I have actually tried to design using an image and then use proper CSS layout rather than tables.
http://www.roccocammisola.com/proj/brunel/bgimage.html
I have been having issues with the shadows on either side of the main content area. Of course these are only an issue in IE. As you can see the shadow has been cut down to about 10% of its actual height.
With my relative inexperience how do I look for relevant fixes to this issue.
Any help would be very much appreciated.
FireBug, the most crucial tool for debugging CSS, amongst other things.
get it here
IE Web Developer Toolbar
It's not as good as firebug in general, but it helps when you have an IE-specific problem.
In addition to Firebug, making sure your HTML is valid is an invaluable tool and can minimize CSS headaches. Sometimes your CSS may not work right because there are mistakes in the HTML. The different browsers have different ways of dealing with improperly written HTML which can sometimes make it seem like there's a cross-browser CSS issue. The validator can help you find mistakes in your markup.
http://validator.w3.org/
+1 for FireBug
In this particular case, I'd just suggest a new approach for your shadows. Currently, you have them as items. You typically want to use CSS background images for things like this.
.mainShadowRight {
*/ your other stuff */
url('images/mainShadowRight.gif');
}
Your .mainShadowRight CSS class specifies a min-height (which IE6 doesn't understand, and IE7 doesn't always 100% get correctly)
and as DLarsen pointed out, it appears you are missing the background-image: url(); bit.
Thanks for all your answers, seems to have done the trick.
I think I spazzed out with the upload as I should definitley have had the bg-image stuff there.
That IE web developer toolbar looks pretty good too as I have firebug and web developer bar for FF.
Another hot recommendation for debugging CSS - CSS Viewer.
It's a Firefox add-on that allows you to hover over elements in a web page and see their exact style. Often you figure out that the final style was not what you meant, possibly due to some inheritance of styles.
I'm using CSS Filters to modify images on the fly within the browser. These work perfectly in Internet Explorer, but aren't supported in Firefox.
Does anyone know what the CSS Filter equivalent for these is for Firefox? An answer that would work cross browser (Safari, WebKit, Firefox, etc.) would be preferred.
<style type="text/css">
.CSSClassName {filter:Invert;}
.CSSClassName {filter:Xray;}
.CSSClassName {filter:Gray;}
.CSSClassName {filter:FlipV;}
</style>
Update: I know Filter is an IE specific feature. Is there any kind of equivalent for any of these that is supported by Firefox?
Please check the Nihilogic Javascript Image Effect Library:
supports IE and Fx pretty well
has a lot of effects
You can find many other effects in the CVI Projects:
they are also JS based
there's a Lab to experiment
Good Luck
Could you give us a concrete example of what exactly you're trying to do? You'd probably get fewer "Your brower sux" responses and more "How about trying this different approach?" ones.
Normally CSS is used to control the look and feel of HTML content, not add effects or edit images in clever ways. What you're trying to do might be possible using javascript, but a behavior-oriented script still probably isn't very well suited for the kind of tweaking you want to do (although something like this is a fun and very inefficient adventure in CSS / JS tomfoolery).
I can't imagine a scenario when you would need the client to perform image tweaking in real-time. You could modify images server-side and simply reference these modified versions with your CSS or possibly Javascript, depending on what you're doing exactly. ImageMagick is a great little command-line tool for all the image effects you would ever need, and is pretty simple to use by itself or within the server-side language of your choice. Or if you're using PHP, I believe PHP's GD library is pretty popular.
There are no equivalents in other browsers. The closest you could get is using a graphics library like Canvas and manipulating the images in it, but you'd have to write the manipulations yourself and they'd require JavaScript.
filter is an IE-only feature -- it is not available in any other browser.
SVG filters applied to HTML content.
Only works in Firefox 3.1 and above, though I think Safari is heading in the same direction.
None that I know of. Filter was an IE only thing and I don't think any other browser has followed with similar functionality.
What is there a specific use case you need?
I'm afraid that you are pretty much out of luck with most of the cross-browser filter-type functionality. CSS alone will not allow you to do most of these things. For example, there is no way to invert an image cross-browser just using CSS. You will have to have two different copies of the image (one inverted) or you could try using Javascript or maybe go about it a completely different way, but there is no simple solution solely in CSS.
There are filters, such as Gaussian Blur et al in SVG, which is supported natively by most browsers except IE.
Pure thought experiment here, you could wrap your images in an SVG object on the fly with javascript and attempt to apply filters to them.
I doubt this would work for background images, though perhaps with alot of clever positioning it could work.
It's unlikely to be a realistic solution. If you don't want to permanently modify your source images, Rudi has the best answer, using server side tools to apply transformations on the fly (or cached for performance) will be the best cross browser solution.
This is a very very old question but css has updated to now support filters. Read more about it at
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Syntax
With a function, use the following:
filter: <filter-function> [<filter-function>]* | none
For a reference to an SVG element, use the following:
filter: url(svg-url#element-id)
Not really, and hopefully there never will be. It's not a web standard CSS feature for the reason that you're using CSS to format the webpage, not the browser itself. The day that other web designers and developers think they should style my browser how they wish and are then do so is the day I stop visiting their pages (and I say this as a front end web guy).