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.
Related
Use of gradient images is very common among developers for styling a page. Gradient images are used in many places from styling the navigation bar to styling the background. Technique like repeating a small image in either direction is also common.
One more way to style and give this effect is by using multiple div's one below another with different color, the latter being a little lighter than the former. In the most simple scenario doing so would include only a small script. So, no problem of writing a lot of markup, just some simple code.
The only concern that remains is speed and performance.
Speed
The script, more precisely the function would be much shorter in size than a image. So, in matters of speed the latter method seems more good.
Performance
Today's browsers are very powerful, so the difference between displaying an image and executing a function is negligible.
Css management
Obviously, problems like positioning would be another concern but we do struggle with such problems in every day life. The problem is no greater than overlapping two div's and setting their z-index. The whole gradient div's can lie inside one parent div.
So having addressed the issues of performance and speed isn't using Gradient div's a much better approach than using images?
It's an alternate approach, yes. But not a good one. You get zero points for:
Maintainability
Scalability
SEO
Separation of presentation from content
Furthermore, to say that we needn't worry about performance since today's browsers are more powerful is a gross assumption.
Actually, I think the second option you describe (creating multiple divs with atering colour) is downright terrible.
You're altering markup for the sake of styling. That's a no-go.
It's a common thing among users to disable JavaScript. What happens then?
As you said yourself, positioning mayhem.
When it comes to performance, I would be more cautious than to state it's no longer an issue. Especially with the dawn of mobile browsers in mind.
Such styling would be harder to understand and maintain. Particularly when your team changes someday.
Also, there are two other ways to implement gradients.
CSS gradients - limited to simple variants and requiring a lot of CSS to provide decent cross-browser capabilities. You can try this generator get a taste of these: http://www.colorzilla.com/gradient-editor/
SVG backgrounds. These allow you to create just any gradient you wish. You can use an svg file in your CSS just like any other image. However, some browsers don't support this feature. Here's a table showing when it's an option
Using images is the most reliable option, while combining SVG with normal images (for these browsers that don't support SVG) seems the most flexible approach.
I've been experimenting with pretty complicated SVG backgrounds (via CSS, fixed, 100% size) and it makes both FF and Webkit based browsers slow to a crawl, to the point it's impossible to scroll.
Would you have any idea how to improve the speed of it?
I investigated a big PNG (slow to load, not as "smooth" as SVG) and Canvas without much success.
The site in question was here. Now it incorporates canvas method.
All the elements on the site are vector-based so it can scale to whatever device there is.
So it seems that all popular browsers render page/scroll much faster when the complicated svg background is applied to an underlying canvas (or img) then if it was applied to the body element itself.
Still looking for suggestions how to make it work faster, but at least now it is usable.
This background is very complicated to render on the fly, so I believe that SVG is not feasible. You will have to consider one of the following solutions:
Use a pre-rendered background (i.e. a png background).
Use a simpler SVG, with less elements. In your current background the browser will have to render each line individually.
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).
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.
I want to use a diagonal gradient in my background.
I have read this, and I found that it has just only horizontal gradient and vertical gradient in IE.
Is it possible to make the gradient in IE show in the diagonal like Firefox?
You can do it using CSS, but it's kind of a hacked together solution involving two layers. You can read about the details of it here.
Yes, you have to use a background-image though so there may be a limited element size depending on how much you want a page to cost, and you will need to use a separate image.
HTML5 brings along SVG images though which are scalable and take up little space.