Rounded Corner Boxes the CSS3 Way

If you’ve been doing CSS for a while you’ll know that there are approximately 3,762 ways to create a rounded corner box. The simplest techniques rely on the addition of extra mark-up directly to your page, while the more complicated ones add the mark-up though DOM manipulation. While these techniques are all very interesting, they do seem somewhat of a kludge. The goal of CSS is to separate structure from presentation, yet here we are adding superfluous mark-up to our code in order to create a visual effect. The reason we are doing this is simple. CSS2.1 only allows a single background image per element.

Thankfully this looks set to change with the addition of multiple background images into the CSS3 specification. With CSS3 you’ll be able to add not one, not four, but eight background images to a single element. This means you’ll be able to create all kinds of interesting effects without the need of those additional elements.

While the CSS working group still seem to be arguing over the exact syntax, Dave Hyatt went ahead and implemented the currently suggested mechanism into Safari. The technique is fiendishly simple, and I think we’ll all be a lot better off once the W3C stop arguing over the details and allow browser vendors to get on and provide the tools we need to build better websites.

To create a CSS3 rounded corner box, simply start with your box element and apply your 4 corner images, separated by commas.

.box {
background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
}

We don’t want these background images to repeat, which is the normal behaviour, so lets set all their background-repeat properties to no-repeat.

.box {
background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

Lastly, we need to define the positioning of each corner image.

.box {
background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top left, top right, bottom left, bottom right;
}

And there we have it, a simple rounded corner box with no additional mark-up.As well as using multiple background images, CSS3 also has the ability to create rounded corners without the need of any images at all. You can do this by setting the border-radius property to your desired value as seen in the next example.



.box {
border-radius: 1.6em;
}

About RSS Feed

Even though I am a web designer I hadn't know about RSS Feed.
I ge t some information about it is below

RSS is a family of web feed formats used to publish frequently updated digital content, such as blogs, news feeds or podcasts.

Users of RSS content use software programs called "feed readers" or "feed aggregators". The user subscribes to a feed by entering a link of the feed into the reader program. The reader can then check the user's subscribed feeds to see if any of those feeds have new content since the last time it was checked, and, if so, retrieve that content and present it to the user.

The initials "RSS" are variously used to refer to the following standards:

• Really Simple Syndication (RSS 2.0)
• Rich Site Summary (RSS 0.91, RSS 1.0)
• RDF Site Summary (RSS 0.9 and 1.0)

RSS formats are specified in XML (a generic specification for data formats). RSS delivers its information as an XML file called an "RSS feed," "webfeed," "RSS stream," or "RSS channel".

My First Post . . .

I wanted to strat my own blog (as I love to write) for last few weeks but couldn't. Today prakash helped me in creating my first ever blog.

I decided that today onwards i will regularly update it.