You have an object (span or div e.g.) with text. And this text should mask out the colored background of the object so that you can see the very background (of body element e.g.).
I know there is "mask-image". But they don't want to develop this CSS3 technique further. Is there a Javascript solution maybe so anyone can see this?
Is there any chance to do this cross-browser?
Can't think of a technique to do this in javascript or html. However, an approach that could be used (although not entirely desirable - I realize that this is going to be time consuming) would be to create a transparent .png for each letter, set the background of the letter to transparent and the rest of the image to some color, and then use those. You would have to make a whole set for each color you wished to use. You could also just make an image which was one word in a .png and use that which would be easier. This would be the only current way to get this to work with all browsers including older ones such as IE6 where the newer techniques are not available.
The reason, in my opinion, that this will not currently work, is that when you have text inside of a <div> or <span> even if the text is transparent, it would merely default to the color of the <div> or <span>. If their background was set to transparent, then nothing would even show up. Conversely, if their color was set, the text would not show up because it would merely inherit that color.
It looks like the closest you can get to full cross-browser support (without using images for each character in the text) is the very-limited tricks shown here. These tricks wouldn't work with a photographic bg image though.
If you don't require support for IE8 or earlier, you could investigate doing this in SVG or Canvas. Note however that Android prior to 3.0 doesn't support SVG, which rules out as much as 85% of existing Android devices.
Webkit has a proprietary background-clip:text style, but it only works on Chrome and Safari.
Using color:transparent for the text turned out to be completely useless for this.
On the whole, the best bet may be canvas, especially if you can find a JS library or jQuery plug-in that provides a VML alternative for IE8 and earlier (assuming the VML solution supports text masks), or if you can provide a graceful-degradation fallback option for IE8 and earlier that looks adequate even without a text mask.
Another solution that's easily overlooked: If you can dynamically render an image on the server using the current text on the page (caching it as needed), and then serve that image to the client, then there are no cross-browser issues to deal with. This could possibly be done in PHP using the GD graphics library, for instance.
Related
Is there a way to change colors of an image much like in Flash/ActionScript with using only HTML5/CSS/JavaScript?
Here's an example in Flash: http://www.kirupa.com/developer/actionscript/color.htm
My guess would be that it's only possible with Canvas, as far I know; but I'd like to know if there's another solution out there that also supports IE7 & IE8, without the need to install a google plugin for IE.
It depends on what you're trying to do.
If all you want is to overlay an image with a color, then you could layer a DIV on top which has a partially-transparent PNG of the desired color as its background image. Here's a JS Fiddle demonstrating:
http://jsfiddle.net/btCfK/
I don't have a copy of IE 7 handy to check, but I'm pretty sure that'll work in older IEs (later than 6 anyway).
This example uses a fixed size for both the overlay and the image. With some clever coding you could change that, and make a JavaScript based control for swapping colors in or out.
If you want something more sophisticated than that, it's probably not practical without using a Canvas element, SVG, or one heck of a lot of JavaScript.
I just stumbled upon this question and I thought I'd mention CSS filters.
At this time, only Chrome fully supports them (http://caniuse.com/#feat=css-filters), but things might improve in the future.
I'm trying to come up with a way to mimik something we were previously doing in Adobe Flash using some sort of Bitmap Filter but instead with pure javascript.
Previously we had a set of PNG images w/ transparency around the core image. When an image was clicked, a soft glow (ala border) would be added around the non-transparent portion of the image, slightly consuming some of the transparency but the majority of the outer transparent portion would remain transparent.
W/ javascript I can easily add a border around the entire image when clicked, but that is not what I am aiming for. I only want a border around the non-transparent portion of the image.
I'm unfortunately not familiar enough with image manipulation techniques, so I'm curious if there is a way I could achieve this using the various JS image manipulation libs out there ala BitmapData or Pixastic. Taking a look at both of these I wonder if there is something I could do w/ edge detection, glowing effects, and overlays...
If you're already using Raphael (or are willing to use it), you might consider using Dmitry's blur plugin. Building on this answer, I was able to achieve the glow effect I think you're looking for by adding another image behind the one I'd like "glowed". The background image is blurred, giving a "glow" or "halo" around the crisp image on top.
Sample code:
var img = this.R.image("yourImage.png", 0, 0, 50, 50);
var glow = img.clone().toBack();
glow.blur(5);
The plugin includes the caveat that there's no WebKit support. It seems that there is now some WebKit support as it works in Chrome (I'm running 18.0) but not Safari (I'm running 5.1.5).
I only want a border around the non-transparent portion of the image.
It is impossible to do it with js. Only if a replacement image is already prepared. Canvas is not really a solution (if you need compatibility) and all these 'calculations' will take resources and time.
I'm not sure it's entirely suitable for your situation, but there are tools out there to convert Flash to HTML (e.g. Swiffy). I suspect they can be flaky at times, but it's something to consider :)
I created animation in flash and converted it into HTML5 using Swiffy.
I think it's using SVG to render all of it; is there some JavaScript or a trick to make IE8 and below support it? My animation is working well with Internet Explorer 9.
Thanks!
While no option is perfect, there are a few choices:
1.) Adobe has a SVG plugin for IE8 http://www.iegallery.com/en/addons/detail.aspx?id=444
2.) The Raphael JavaScript Framework allows vector graphics cross browser - http://raphaeljs.com/
3.) Then there are the Open Source projects: http://code.google.com/p/svg2vml/ and http://code.google.com/p/svgweb/
4.) There is the option to display flash for IE8 and below.
5.) There is the option to gracefully degrade for IE8 and below and show a static image in place of the animation.
Based on your reason for the animation - I would recomend 4 or 5.
There are two options that will not tie you to specific frameworks (raphael) or complicated solutions (svgweb):
Chrome Frame: if you're going to get an extension, get that one
Server-side rasterization: send your SVG back to the server, inkscape rasterize to png, send it back.
If you go number 2 (yes it is a crappy option), and want to keep clickable parts and tooltips, you will have to use invisible divs, or labels that are in HTML on top of the rendered svg.
You can reuse the positioning information from the svg to position those divs in order to avoid overhead for that part.
The best option probably is to diplomatically encourage them to use a real browser, but then it's not always possible for those who live under the rule of an unskilled IT department ;)
This one is not trivial. I want to create a chroma key menu. For those not familiar, it is the same in video with the green background (or whatever color) being removed and special background is added.
I have images as a background in a menu. What I want is to set in someway the section where the background is transparent and the rest being filled with a color. In the example below, the background of the menu is image. Can we have such a background without one?
I am interested in unified solutions, not ones using css3.
I'm happy to be proven wrong, but I'm fairly sure the answer is no, not even with CSS3. Maybe using IE's very advanced filter()s but those aren't cross-browser.
Using a transparent channel for the background is the only way to go. It won't be trivial, but you could use a server-side script to change a specific colour into the transparent colour.
ImageMagick should be able to do this. Here's a promising example.
However, these examples are for replacing one colour. Whether it's possible to make this look good for anti-aliased edges (where the "transparent" colour blends into the surface colour, creating a mixture that the program would have to detect), I don't know.
If at all possible, use proper transparency from the start.
I imagine this would be possible on the client-side by copying the image into a <canvas> rendering context, processing the image data (like ImageMagick does) then outputting a data uri which you can use as the CSS background-image of your menu.
For reference see:
http://www.hmp.is.it/creating-chroma-key-effect-html5-canvas/
http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-url/
To create rounded corners on my container elements I use this CSS:
border-radius:12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;
However, IE does not appear to recognize and interpret the border-radius property (at least version 7-8, apparently its slated for version 9).
Is there a workaround for this that's doable entirely in CSS (no script, no extra markup)?
For JavaScript/jQuery solutions: I'd use a solution based on these if I could include a single script that would read my CSS, interpret the border-radius properties (including border-top-left-radius, border-top-right-radius), and apply the corners accordingly. Does this exist?
As far as I know for IE<9 there is no way to do this in pure CSS.
It has been documented that IE9 has border radius support.
There are Javascript workarounds available, but as you said you don't want to implement them, you're a bit stuck.
Unless you want to use images, this works well if you have static size elements, but doesn't work if they change size.
Other than that, I am not aware of any pure CSS solution without a lot of hacky markup.
Update:
I already linked to a resource that can do this for you, the CurvyCorners jQuery will detect the use of -webkit-border-radius and moz-border-radius on DOM elements and duplicate the effect in IE using a series of small DIVs with no images. You can also tell it to apply the effect to specific elements.
Update #2:
After Spudley's suggestion of checking out CSS3Pie, I would very much suggest this as the way to go as it uses the CSS property behaviour which only applies to IE, so it won't screw with the rest of the browsers, also this means no hacky markup added to your page (Curvy Corners adds many small divs) and no use of images.
Hope it helps :)
You ask for a way to do it without scripting and without any extra markup. This simply isn't possible. The feature is missing from IE7/8, and the only way to get IE to do it is by simulating the feature either with scripting or markup.
The best options are ones which only affect IE and are invisible to other browsers. This means that CSS3Pie stands head and shoulders above all the other options, because the technique it uses is only supported by IE. It also allows you to specify your border radius in CSS in the same way as for other browsers, making it more consistent.
Personally, I'd go for this solution every time. It's by far the cleanest solution you'll find for IE. Forget about any jQuery or pure javascript solutions; they almost all have issues of one sort or another, and as for markup options that involve corner graphics; just don't even think about it!
The real benefit that CSS3Pie has over other common solutions is that it uses a vector-graphics based solution, rather than pasting loads of divs into your document as CurvyCorners and others do. This means that the rounded corners CSS3Pie generates are smoothly drawn and works properly with background graphics on both the element itself and those behind it. Most other solutions have serious issues in these areas.
I don't know why you'd object to using scripting - especially HTC-based ones like this which don't get in the way of the other scripts. The absolute worst case is that a user has scripting turned off. And in that case, all they get is square corners; it's not the end of the world.
you can use .htc for border radius. link1 for htc files link2 for htc files
I suggest to have a look at this site. CSS3 Please
The scripting / jQuery solution you are talking about does exist, take a look at jQuery Curvy Corners.