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.
Related
It looks perfect in chrome and firefox, but the scaling in IE and Edge is terrible. The size is good but the image looks sharper, the actual image is 2 times bigger than the background size. Is there a way to fix it, I've tried several things I found on stackoverflow but nothing seems to work.
The problem is your relying on the browser to resize your images. Browsers have notoriously poor rendering when scaling images. You should use a specific size and pre-format them in a graphic package beforehand.
I would also consider using an SVG for what you are trying to achieve (I assume the scaled down image is so that on different resolutions, things still look good?) I would seriously consider the flexibility it would give you.
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
I am working on an infographic with sliding carousel <li>s, but the SVG is showing up pixelated in Firefox, even though the bug with SVGs in FF has been resolved, I thought. Can anyone see a fix for this?
URL: http://weaver-wp.weavertest.com/radiation-infographic/
You are zooming your SVG file to a very large size:
background-size: 9730px 30000px;
background-position: -7310px -29250px;
Most browsers will not antialias very large SVG shapes, as it requires too much graphics memory. (This is what we see in Safari and Chrome.) It looks like Firefox is actually rendering the SVG to the size of the canvas and then blowing it up with image interpolation to your cropped region.
The fix for both is the same:
Crop your SVG first and use just the cropped portion as a background.
Use the viewbox property of the element when panning/zoooming. It is much higher performance and simpler to use.
Is there any image modification tool out there that will work on webkit?
Something like the one on this page
http://developer.yahoo.com/yui/examples/imagecropper/simple_crop.html
Except that when you interact, you interact with the image in a given space and the mask is fixed (i.e pinching the image, rotating the image etc)
Thanks,
Tee
The jQuery image crop plugin should work with Webkit and does cropping. I don't know of a free plugin that can do image rotation at the same time.
WebKit supports html5 canvas and canvas supports image manipulation. You could make an app to do this. I recommend looking here
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.