So, I'm looking to do a background image in CSS using a sprite sheet. And just to be clear, no I am not going for this effect. I have a full sprite sheet, and I would like to take a 16px by 16px square on the sheet and set it as the background that will be repeated.
At some point in the future, I hope to be able to do this via spacial dimensions using media fragments in the URL parameter, but since this isn't supported yet I'm looking for an alternative. Is there any way to get this same effect via modern CSS techniques or hacks?
Some notes:
I don't need to support old browsers, just the latest FF or Chrome will do.
I would prefer pure CSS solutions. I can and will create a JS/Canvas solution with data:URI's if I need to but considering how many elements I may need this for, I would prefer to not have to do that if I can get better results via pure CSS.
Need to repeat in both x and y directions
Looking for solution that takes advantage of a single image in memory/cache so that I don't have to load the sprite-sheet for every sprite I want to insert
Here's a pure CSS solution that works in Firefox only, but seems to meet all your requirements.
body{ background-image: -moz-image-rect(
url('http://placekitten.com/500/500'),
0,100,100,0
); }
Example at http://jsfiddle.net/47CMr/2/
There is only one method that falls under your conditions (the hardest one is the need to repeat): using the border-image.
The dabblet with the demo: http://dabblet.com/gist/1635890
The point is: you can mark the part that you want to use using the border-image-slice part of the border-image property. The syntax is a bit tricky, but using it you could create different repeating paterns from border-images. Also, when the needed parts are not on the edge, or when you need to repeat the image both on X and Y, you'll need a clip property, so you'll need a block to be absolute positioned. All these things work even in Opera.
But, there is one bad, bad thing: the rendering of central part of border-image is a kelly hell: there is a difference not only between webkit and mozilla, but even between the Safari and Chrome, so I added a lot of hacks there.
In conclusion: the goal can be achieved, but with a hell of a hacks.
So, I'd advice you to use the data:uri, 'cause there are no other ways to do this in webkits and Fx both (in Fx-only you could use the -moz-image-rect as mentioned above).
Related
I want to create an opacity blur overlay, similar to Windows Aero or iOS7. Unfortunately the filter: blur() or filter: url(#svgBlur) properties can only apply to the element, not content behind it.
To get round this we need a copy of the background that is blurred. This is possible in FX using the background: -moz-element(#elementId) experimental CSS property. Using that I can get the effect I want in FX only.
There are other questions about solving the blur problem, and one solution appears to be the use of the html2Canvas plug in.
However that is recreating the entire blurred content, including manually recreated styles and the like. It's very impressive work, but it seems like massive overkill (both in performance and size) for this kind of effect.
What I want to do is create is some kind of shim just for -moz-element. It looks like that should be possible using an SVG foreignObject, but that has both security issues and fails if your HTML is not valid XML.
Is there any way round of emulating -moz-element (using canvas, SVG, or something else) where I don't have to parse/redraw the entire overlaid area?
Browsers that support the BackgroundImage pseudo input allow you to filter the content behind an element. Opera 12 supports that and maybe some other UAs too.
I think Opera 12 also supports the SVG 1.2 Tiny feature of having an external foreignObject i.e.
<foreignObject xlink:href="external file url"/>
You could combine this with the backgroundImage to have html content as a background even if the html content was not not valid XML.
Your milage may vary with other UAs though and as you say Firefox has a different solution.
You can check out a plugin I recently made called AeroJS. It does exactly what you're looking for and supports everything but IE.
EDIT: My apologies for not not including a description of the plugin.
Basically, the way AeroJS works is by taking the HTML of a specified element (backgroundElement), the background image of a specified element (backgroundImage) and prepending them to the specified element. Then, using WebKit's blur filter, a specified amount of blur (blurAmount) is applied to the elements in the background. It's still in the early stages of development so bugs are expected. One drawback of using AeroJS is that it's almost entirely static. You can move around the element and everythung behind it will be blurred however any changes that happen to the original DOM will not be reflected in the blurred/copied HTML. Custom code will be needed for that.
If those properties only apply to the selected element, why don't you select them all?
Maybe with:
#myElementID *
So I'm looking at a specific application for a web browser which requires me to express color as a straight alpha channel with a black and white alpha channel as a separate element. (an example of both types
I know many moons ago, IE supported some perverse filter options, but since I'm doing css3 transforms, I need this to work in a modern browser, preferably Chrome.
Basically what I'd like to do is have an element with CSS transforms applied, specifically rotation most likely, then I'd like to take that and copy it to another equivalently sized element which has the black / white transformation applied. An additional bonus would be setting the original element to use straight alpha, but I can live without that for now.
I haven't been able to find any routes with which to start investigating. If you have one, I'd be super grateful. My last resort is to start doing things in WebGL or Canvas and modifying the output there.
Two or three different elements stacked on top of each other using absolute positioning and z-index? This would require you to save two different images which I'm guessing you're trying to avoid.
You can do CSS 3D transforms. Browser support is basically there in newer IE, Chrome, Firefox, iOS and Android.
where can you use them
how to use them
MDN
I've actually figured out the answer... it's CSS Shaders.
https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html
Not yet available, but soon.
The reason not to use Canvas is for simplicity in authoring. (Long story.)
To set a semi-transparent background I use:
background-color: rgba(0, 120, 180, 0.8);
For IE, which doesn't support rgba I use a 1x1 png with the same color:
background-image: url(http://i53.tinypic.com/2mgtu9e.png);
(demo here)
Question 1
I know that there is another method for IE which uses filters.
Is this method considered as W3C compliant ?
Question 2
Say I combine 20 1x1 png images into a single sprite.
How could I use this sprite to set an element's background color according to the 7th pixel in the sprite ?
As others have said, no IE filters are not W3C compliant. They also incur significant overhead and have performance ramifications. Unless I am mistaken when a filter is applied to an HTML element it will be applied to everything in that element including its text. So you'd end up with semi-transparent text too. There may be a way to keep that from happening but I haven't come across it. Also there are times when IE filters don't play well with semi-transparent PNGs as this article mentions.
Speaking of PNGs, the idea of using a sprite really only works if you have a specific height or width or both. So this really won't work for what you need, like Merianos Nikos said. Also tiling a 1x1 image is a really terrible idea. I say this because there are performance issues when you do that, especially with IE6. Though IE6 may not be a concern for this, tiling such a small image still causes a performance hit since the browser must draw and redraw each and every one. See this StackOverflow entry.
For this situation I would use something like Modernizr which will make rgba available to use in browsers that don't support rgba. After customizing a download for just rgba and a few other things (HTML5 shim, yepnope, and adding CSS classes) the download was 6.1kb. Not a huge hit to make development easier.
Update I misspoke when I said that Modernizr enables rgba. It doesn't do that but it will let you know that rgba is enabled in the browser. It will add classes to the html tag that tells you the abilities of the browser.
Answer #1
This method is not W3C compliant. The way that Internet Explorer uses Filters is not the regular one. Filters are not supported at all from the W3C specification. The filters are Internet Explorer plugins.
Answer #2
There is no way to use them. In sprites you can only use images that are not repeated in the background.
In example: Say that you have the following sprite
x y z
r t s
u v a
if you have now an area that you like to use as a background the image t from your sprite. You can set the very top left side of the div to display the t image, but then when you need to reapeat the background you will start again from x. That means that you will have repeated all the images from the sprite.
Question 1: CSS3please. The box-gradient shows how to use the MS-filter.
To check if valid: W3C CSS validator . I'm getting errors, so I guess it's not considered valid CSS
I'm trying to create a trapeze like shape using any number of techinques so that it will be as much as possible. the shape i'm trying to create a shape like this:
(there will be content inside the shape [imgs & txt])
so far, the possible ways of doing that are: masking (webkit) and SVG effects on html content (firefox). but I cant seem to find any way to make this work with IE and opera.
So if anyone could show me how to do this, it will be greatly appreciated.
There are a few options for creating non-rectangular shapes using CSS, but they are all hacks. This isn't something that you'd normally expect to do using CSS.
The most well known technique is triangles made using borders. It is very much a hack, and would require using multiple elements for a single shape. I wouldn't suggest using it on a production site.
The other CSS solution I can think of would be to use an extreme border-radius setting to modify the shape of the box. This is less hacky, but won't work in IE8 and lower, so fails your criteria.
You say you've tried the SVG approach and given up on it because it doesn't work in IE8. It's worth pointing out that while IE doesn't support SVG, it does support VML, which is a competing vector graphics format. SVG is now standardised, so VML will fade away, but older IEs will continue to support it.
Therefore the solution I'd go with would be to use SVG by default, and VML instead on IE7/8. The good news is that there are several Javascript solutions which make this easy.
One is Raphael, which allows you to draw SVG/VML images using Javascript. Commonly used for real-time graphs, etc.
There are also a number of solutions which simply convert SVG to VML. For example http://code.google.com/p/svg2vml/. But there are several others available.
Hope that helps.
As you suggest, masking and SVG are the way to go. These will be supported in future browsers. If you must be backwards compatible with IE, look into the IE "filter" for CSS (google "ie filter").
Be forewarned: It's very unintuitive (compared to CSS3) and generally a bitch to work with. If your goal is to make the page look identical to the CSS3 version, it will be difficult and you're probably better off using images.
Is there any way to make ie (7,8) display a gradient AND a background-image on the same div?
The only way I got it working (but only almost) was by using two filters, one for the gradient and one using the AlphaImageLoader - but of course, then you can't position the image.
Declaring a background-image and gradient filter doesn't work, because it simply won't render the image - only the gradient.
Is there any (preferably non-js) solution to this?
If not, I'll have to resort to using a background image for the gradient as well, which isn't quite as nice but won't make much of a difference either...
I would say that adding a little unnecessary markup is the lesser of the evils here. Either that, or let IE-users live without the gradient.
Oftentimes getting your design to work is a trade-off between semantics, performance, standards and pixel perfection. Accepting that fact was hard for me, but it's made me a better front-end developer - I can work faster, and I can make decisions about what metric is important in a given case.