Rounding images with NiftyDotNet

It's is known that NiftyDotNet can round block elements like div's, but, did you know that you can also use it to round images in an easy way?



Well, in fact, with Nifty you won't be rounding the images itself, but you'll be able to create the same effect just using some tricks. Let's see how to achieve it.

First of all, we need to include the image in our page using an <img> tag inserted into a <div> container:

 <div class="niftyimage"
style="background: url(images/landscape.jpg) no-repeat top left;" >
<img src="images/landscape.jpg" alt="Wonderful landscape" />
</div>
[...]

/* Page style */
<style type="text/css">
.niftyimage
{
width: 150px;
height: 150px;
margin: 10px;
}

.niftyimage img
{
display: none;
}
</style>

As you can see, the image shown with this code is the background of the <div> container, because the <img> tag is hidden from the stylesheet. In fact, this tag is included only for using semantic XHTML, telling a special user-agent that there is an image in that position with the description provided by the alt attribute.

Note that I have also specified the fixed width and height of the <div> container, that is, the size of the image. It is really important to make the block (and its background image) visible.

Finally, we can use this code to make the magic (assuming you have already referenced NiftyDotNet in your page):

 <cc1:Nifty ID="Nifty1" runat="server" 
Selectors="div.niftyimage" 
CornerSize="Big"
FixedHeight="true" />

 
The property Selectors contains the CSS selector which identifies the blocks to be rounded, and CornerSize the size of the rounding effect. Finally, FixedHeight is mandatory, and tells the nifty library not to modify the height of the element defined at the stylesheet.

Imho, an interesting trick, specially when we want to round images provided by final users at runtime, and not being part of the base design of the web site.