NiftyDotNet

Rounding images with NiftyDotNet

noreply@blogger.com (José M. Aguilar) — Tue, 03 Mar 2009 13:53:00 +0000

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.

NiftyDotNet 1.0 released!

noreply@blogger.com (José M. Aguilar) — Sat, 15 Nov 2008 18:58:00 +0000

I have just released NiftyDotNet 1.0!

It's been almost one year since the last update (0.9.5 beta). Along this time, NiftyDotNet has been widely downloaded (~1000 file downloads) and I've received tens of messages asking questions and suggestions to improve the component, and notifying some bugs I've fixed in this new package:

When using fixed-height attribute and the specified selector didn't match any element in the page, a Javascript error was thrown and the borders didn't get rounded.
If you used a Nifty control in a page without runat="server" in the head section, strange characters were shown, and the component didn't work.

As always, the component is distributed in three different packages:

NiftyDotNet's binaries, an assembly ready to be included in your project
NiftyDotNet demo binaries, a copy of the live demo
Source code and examples, the full project.

Let me know if you find any problem in the new version.

Updated: the demo has moved! The new URL is http://www.sodefesa.es/jmaguilar/niftydotnet.

Thank you for using NiftyDotNet.

NiftyDotNet & .NET 3.5

noreply@blogger.com (José M. Aguilar) — Fri, 07 Dec 2007 20:16:00 +0000

NiftyDotNet has been tested with .NET framework 3.5 and works fine! Therefore, you can use this component from the new version of Visual Studio as always.

See you soon.

NiftyDotNet live demo

noreply@blogger.com (José M. Aguilar) — Thu, 06 Dec 2007 11:37:00 +0000

Mergia has hosted a live demo of NiftyDotNet where we can see this component in action.

See NiftyDotNet in action

Updated: the demo has moved! The new URL is http://www.sodefesa.es/jmaguilar/niftydotnet.

Enjoy!

NiftyDotNet 0.9.5 available

noreply@blogger.com (José M. Aguilar) — Thu, 01 Nov 2007 10:52:00 +0000

NiftyDotNet continues its way to the final release. I have just uploaded a new revision, named 0.9.5, which includes some enhacements and fixes, such as:

auto-antialiasing has been fixed, so it works fine.
example 8's css attributes has been fixed, so it can be viewed properly.
example 10 has been modified, allowing to return to main menu.

In this release I have included a new download package, NiftyDotNetDemo, which contains the demo web site ready to run under IIS or xsp2 (Mono). I thought it would be interesting for people that only want to see NiftyDotNet running.

As always, feel free to send comments and suggestions about NiftyDotNet.

Enjoy!

NiftyDotNet works under Mono!

noreply@blogger.com (José M. Aguilar) — Wed, 31 Oct 2007 20:34:00 +0000

Although I supposed it, I hadn't tested until now... and yes, of course, NiftyDotNet works fine under the Mono platform!

I have tested with xsp2 (v1.2.4.0) and I didn't found any problems, so I think it will also work with Apache and mod_mono.

Undoubtedly, these are good news for open source fans and NiftyDotNet users.

New demo project update

noreply@blogger.com (José M. Aguilar) — Sun, 28 Oct 2007 19:38:00 +0000

A few minutes ago, I've updated the demo site because it was detected that the Example 4 (Nifty tabs) was not rendering as it should.

So, there is a new src and demo package (v0.9.2) which can be downloaded here. This package is considerably lighter that the previous versions, because I have cleaned the solution and deleted some old files.

The component itself and its binary package, are still the same (0.9), they have not been changed since the first release... seems to be very stable. Anyway, I wait for your comments, suggestions or bugs reports.

Enjoy!

Demo project updated

noreply@blogger.com (José M. Aguilar) — Sat, 20 Oct 2007 11:12:00 +0000

I have just updated the demo project, because I detected a bug in the example number 10, which was not rendered properly. However, the component itself has not changed and, consequently, the binary package has not been modified.

The new demo and sources package has been changed to version 0.9.1.beta, and you can download it here.

Please, let me know if you find bugs or you have ideas to improve NiftyDotNet.

Welcome to NiftyDotNet

noreply@blogger.com (José M. Aguilar) — Thu, 18 Oct 2007 18:28:00 +0000

Hi, all!

I'll use this blog to talk about NiftyDotNet, the component I've just released and published.

NiftyDotNet is an ASP.NET 2.0 component that allows you to round the corners of your web block elements (i.e. divs or h1) easier than ever before. It wraps the excellent javascript library Nifty Corners Cube, developed by Alessandro Fulciniti, in order to simplify its use for .NET developers.

So, instead of including javascript references and code, you'll just drag & drop the component on your webform in VS2005, set some parameters, and your borders will get rounded. Another important thing is that NiftyDotNet includes all the external files as embedded resources, so it is not necessary to add extra files to your project, the component will be enough.

NiftyDotNet is distributed in two different packages. In the first one, you'll find only the binaries (the assembly), ready to be included in your project. The second one, includes the component's source code and a demo project showing its main features. I do recommend this option if you want to know what is NiftyDotNet and how to use it.

You can find the project page at http://code.google.com/p/niftydotnet/.

Finally, I'd like to say that NiftyDotNet is published as GPL, so you can use or modify it according to this license, as it is described in http://www.gnu.org/licenses/old-licenses/gpl-2.0.html.

See you soon.