Posts Tagged 'CSS'

Impressed with Jquery UI image manipulation

We are using JQuery UI for our current project. I am particularly impressed with their image manipulation using CSS. I am talking about the Framework Icons which is one image ( 5  Kb) but it can be manipulated in such a way that the coordinates are changed to just bring a particular image portion up front. They are using a pretty effective technique using the background-position. I have heard of this technique before but was really excited to see that in action. Let me give you an example:  If you want to use the delete image (trash can) then you can use the following class:

“ui-icon ui-icon-trash” (CSS : .ui-icon-trash { background-position: -176px -96px; }).

so just mouseover the framework icon in the link above, get the class name and use it. The required image would appear. Pretty sweet.

Hope this helps.

Happy Programming!!!

Cheers,

Raja