Prime Blogger

Thanks to advanced CSS properties, such as gradients and shadows, it's now quite easy to turn a dull web form into something beautiful - with minimal effort. I'll show you how in today's tutorial!

Great example on how-to create stylish forms with using a lot of images, just CSS-3, html and one background image

After viewing some recent rather interest experiments in CSS3, I decided to do some experimenting of my own. CSS3 brings a lot more variety to the table regarding what you can do with it when compared to CSS2.1. Rounded corners, scaling and rotations are all possible with just a basic knowledge of mathematics! It got me thinking, what could I create, using only CSS, that would normally require images? So, I decided to try and create some of the flags of the world.

Nice example on how-to use CSS to create stunning images

This post is about 5 useful CSS properties that you should be very familiar with, but will most likely rarely use. I’m not talking about the new fancy CSS3 properties. I’m referring to the old CSS2 properties such as: clip, min-height, white-space, cursor, and display that are widely supported by all browsers. So, don’t miss this post because you might be surprised how useful they are.

Never used the "clip" property before. This works much easier than showing images via the elements background and using some transparent gif image.

The rule below is read by IE 5 and 6, but the use of the escape character ("\") sandboxes the dynamic property for IE 6.
This CSS expression checks if the image is a PNG file, and if it is, it applies the filter and does the padding/height/overflow trick explained in my PNG overlay article.

Note that for this technique to work, you need to make sure that at least the width of the image is set, either via the markup or CSS.

* html img {
  behavior: expres\sion(
  (this.runtimeStyle.behavior="none") && (this.src.toLowerCase().indexOf('.png')>-1) && (
  this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='scale')",
  this.runtimeStyle.paddingTop = this.height,
  this.runtimeStyle.height = 0
  )
  );
  overflow:hidden;
}

Transparency and png are hard to handle if your website need to function in older browsers like IE6. This CSS example will help.