Vlado Varbanov - Webdesigner, Front-end developer - Blog - Web & Graphic Design

Blog

Rounded corners on images - CSS and Mootools

Rounded corners on images  - CSS and Mootools

Create a rounded corners on a images with CSS and small bits of Mootools framework for non CSS 3 browsers.

From rounded corners with css in Tim Van Damme’s blog I was following the other version using javascript and more specifically JQuery in this case I was decided to play with this using my favorite Mootools website.

Making a image with rounded corners CSS effect seems to be really easy in browsers that supports CSS3, but what about the Internet Explorer?

Coding this website I’ve tried to simulate the effect, covering the IE, which have lack of support on border-radius property.

With technique described in above articles I will just do the rounded corners with Mootools. So we have the initial image in our document like img src=”“....


In this case I’m using hook class=“am” or some class name, where in the next javascript code we will using it to handle the array of images with this class name.
.rounded {
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
display: block;
clear: both;
margin-bottom: 1em;
}

This is the declaration of the .rounded class name in our styles

Now using Mootools we going to grab the .am class names and inject it in a div element with class name ‘rouded’,  set the child image element of the div class to opacity:0 like so
.rounded img {
opacity: 0;
}

and set the background of the div wrapper to our actual image src. All this manipulations in mootools:

window.addEvent(‘domready’, function(){

$$('img.am').each(function(ele, index){
var spanWrap = new Element('div', {
'class': 'rounded',
'styles': {
'background-image': 'url('+ele.get('src')+')',
'height': ele.get('height').toString()+'px',
'width': ele.get('width').toString()+'px'
}
});
spanWrap.wraps(ele);
});
});

By doing this in the head of the page we will get this output for all images with class=“am”

Almost all done - we have rounded corners and ability to drag and drop (save) the actual image.

Now - what about the IE? This technique is not working in IE 6, 7 and even 8. To make it working we can do two things -
Including a behavior property for the .rounded like so:
.rouded{
....
behavior: url(border-radius.htc);
.....
}

which have some drawbacks described here and most important it does not work in IE8.

So I have to come with “old school” solution doing a image sprite with my rounded corners cuts -  and then add some extra div’s to my .rounded element wrapper:
window.addEvent(‘domready’, function(){

$$('img.am').each(function(ele, index){
var spanWrap = new Element('div', {
'class': 'rounded',
'styles': {
'background-image': 'url('+ele.get('src')+')',
'height': ele.get('height').toString()+'px',
'width': ele.get('width').toString()+'px'
}
});
if (Browser.Engine.trident) {
var c_top_left = new Element('div', {
'class' : 'corner',
'id' : "top_left"
});
var c_top_right = new Element(‘div’, {
'class' : 'corner',
'id' : "top_right"
});
var c_bottom_left = new Element(‘div’, {
'class' : 'corner',
'id' : "bottom_left"
});
var c_bottom_right = new Element(‘div’, {
'class' : 'corner',
'id' : "bottom_right"
});
spanWrap.wraps(ele);
c_top_left.inject(spanWrap, ‘bottom’);
c_top_right.inject(spanWrap, ‘bottom’);
c_bottom_left.inject(spanWrap, ‘bottom’);
c_bottom_right.inject(spanWrap, ‘bottom’);
} else {
spanWrap.wraps(ele);
}
});
});

It’s a bit long and not well optimized but this way with mootools I just use conditionals to see if the browser is IE and then creating 4 divs, holding the each corner of my sprite image. Al four div are absolutely position inside our Wrapper div.rouded - here is the css:



div.corner {
position: absolute;
width: 12px;
height: 12px;
background: url(http://vlado1.com/images/corners.png) no-repeat;
}
#top_left {
top: 0;
left: 0;
}
#top_right {
top: 0;
right: 0;
background-position: -12px 0;
}
#bottom_left {
bottom: 0;
left: 0;
background-position: 0 -14px;
}
#bottom_right {
bottom: 0;
right: 0;
background-position: -12px -14px;
}

That way we have different output for IE :

Posted by: vlado in HTML, CSS & Javascript
1 comment
Share:            

Comments

Picture of AudrieC-1

name: Audrie
e-mail: .(JavaScript must be enabled to view this email address)
URL: http://goldendolls.com/portfolio/view/203/

Oct 15 2013

You certainly have some agreeable opinions and views. vlado1.com provides a fresh look at the subject.

Leave a comment