Now that CSS3 includes styles to add rounded corners to images automatically, does this mean that adding rounded corners to images without CSS should be discarded?
I would assume that shaving off some of the image would load the page faster then shaving off some of the CSS, but at the same time, that would all depend on how fast the browser renders the rounded corners from CSS. Also, images with rounded corners should be completely browser independent and I could assume they would look, and act the same in all browsers.
If you are capable of creating your own images with rounded corners, is that the best way to go? Or should you cut the image down to be square, and add the rounded corners using CSS?
Thanks for any help!Metropolis
Internet Explorer 8 and lower do not support CSS3 rounded corners. I would stick with an image-based solution for a couple more years.
EDIT: CSS3 PIE emulates border-radius on IE 6 to 8. You might want to use that for your page load time comparisons.
Related
I have a website and the contact section of the website on larger screens is basically divided onto two sections and separated by a diagonal which I created using CSS3 gradient properties. It render great on Mozilla Firefox. But when I hover on the contact link the diagonal seems to shift a little bit. The effect is significantly small but it can be seen. Have I hit a Chrome based bug? Or is there something which I can't figure out?
The link to the site
I am trying to mask dynamically sized images on a webpage. The SVG mask I use for Chrome and Safari with their webkit-mask-box-image work great by resizing the mask to fit the element I'm using which in this case is an image. Is there any thing that is similar to webkit-mask-box-image for Gecko-baised browsers?
Have you seen this html5rocks article? http://www.html5rocks.com/en/tutorials/masking/adobe/
Regardless, I think the best cross-browser solution for masks is canvas.
I've fixed image size. And I want to achieve rounded corners through html/css.
Options I'm thinking about is to overlay image with four corner png. Using img:after and content. But unfortunately img:after is purely supported across browsers, let alone compatibility with IE 6.7.
Is there any simple clean way to achieve this?
In theory I could also create div with corner background and make it go absolute over the image... but that would break save as functionality.......
any ideas?
Well, there's always CSS3 rounded corners border radius which has very good support in every modern browser, then the CSS3PIE polyfill for older versions of IE.
If you can live with the fact that browsers that don't support border-radius will show plain old square images, you could use this jQuery script to automatically wrap your images in div's and give them corners:
http://www.smoothdivscroll.com/roundedimagecorners/
(View the source to get the js and see how it's used)
Here's an article that I've written that explains the background to this script:
http://www.swedishfika.com/2010/03/19/rounded-corners-on-images-with-css3-2/
Regards,
Thomas
To make border round in IE there is little work around for that. Please have a look at this link
On this test page: http:// www.onebagoneearth.com/ Products-test , where it says "oboe love series", "oboe kind series", etc, when you hover over that text (which is a background-image) in IE7 and IE8(at least on Vista, and also with IETester), the image blurs (not just by being opaque though...that would be the normal hover effect). Why is that?
The same thing doesn't happen on this page with similar CSS: http:// www.onebagoneearth.com /Products . If it's the zoom:1 bit of CSS, I don't understand why it would do that on one page and not the other.
I see what you mean, but on my computer it doesn't blur, it gets a noisy outline of dark gray pixels instead.
It's because you are using a PNG image with an alpha channel, and are applying a filter to it. Internet Explorer doesn't handle this correctly and draws the semi transparent pixels against a solid background instead of the actual background.
When this happens and how it appears exactly may vary from computer to computer, and even on the same computer in different situations. That's why some people experience it and some don't.
I cannot make the image a background image to a div and round the div's corners because the image is resized, and as far as I know, you cannot resize a background image.
What are my options, if any? Open to all suggestions including wrapper divs and corner images.
Also, if it cannot be done in IE but there's a solution for Firefox, that's just fine with me.
If you're re-using the image and it's varying in size, you should be chopping up your corners accordingly if possible. I had a quick look for you, and here's a site that shows you how to achieve it using sprites. This increases your markup because you need to use positioned divs to position each section of the box.
Of course, recent versions of Firefox, Safari, Opera and Chrome support border-radius which allows you to create rounded corners without using images. IE9 will support this too, when it gets released.
I've seen sites that use border-radius and just leave it at that, so the borders aren't rounded in browsers that don't support it.
If you're interested in creating corners in IE then this may be of use - http://css3pie.com/
The jQuery corner plugin is what I use. You can do:
$('#div').corner('10px');
I am not sure, but maybe you can achieve what you want by using svg backgrounds. This will not work in IE.