CSS Unleashed

Rounded corners are integral part of modern web design. It is very easy to write rounded corner in table structure. But what about the div structure?

This article elaborates the commonly used techniques available in the internet by which rounded corner structure can be achieved easily -

1. Nifty Corners

This is a rounded corner tutorial using CSS and DIV.

2. The ThrashBox


A very good css based rounded corner tutorial with minimum usage of code.

List is a widely used code in today's web designing. Most of us know how a <li> works.

But sometimes we needs to customize li according to our needs to match it with our design. This tutorial will describe how to customize the <li> bullets and use a picture.

Let's write the CSS code for it first.

Now we can write the HTML -
The buttons can be found at -

Link

Please leave comments and clarification.

Shadow is a very important part of web design. Generally a shadow is created in Photo editing software and the image is used to denote the text.

CSS 2.0 shadow is only supported in Safari. But if there is any need to create shadowed text using only CSS, there is a way in which we can create cross browser compatible shadowed text.

The idea is simple. We can use two layered divs to be used as text effect. The top and the bottom layer are positioned absolute so that they come one under another. The top and left positions are coded such as both classes for the top and the bottom element has 1px gap between them.

First write the CSS -

We then place the divs in a central div.

Then we write the HTML -


The only shortcoming of this technique is the left and top positions are fixed thus the page should be fixed width and not fluid width. Please give your comments.

Search box is a very common component for all web sites now a days. From Commercial sites such as merchandise or product based to simple blog sites, search plays a very crucial role.

In HTML, the Search is generally denoted by a form, textbox and a button.

But as the design of web pages changed from boring html color only designs to a rich image based design, search box also needs to be customized. The following tutorial will tell us how to create a custom searchbox using CSS.

First let us write the code for HTML -

Now let us write the CSS code for this. To make a modern searchbox, we will need a gradient image and a search icon.

Some free search icon can be downloaded from -
Link

Select a search icon of 16 X 16 pixels.

Now it is time to write the css code.


An Image can be used to represent the search button instead of the input.

It is very easy to make columns in tables with tr td etc. But as today web sites are more dependent on CSS. And to reduce the load, divs are being popular and standardized for web design.

Now we can all write "div"s in vertical manner. But how to make a div based structure where divs will act as columns rather than Rows?

In this tutorial, we will see how to make such divs.

We will make a three column structure. So first declare three divs -

Today with this post, a new dimension is being added to the world of CSS writing. As we all know, web is an integral part of our life today. Anything and everything from banking to entertainment is driven by html.

But the change hasn't happen only in usability perspective. With the introduction of web 2.0, a new dimension has been added to the web i.e. "Creativity". It is no more that single colored boring and repulsive html files but soothing, glossy eye catching css based image collections which is a "user's delight".

CSS thus today controls the entire web design UI architecture. This web Blog is a little trial of how many things can be done using CSS. Stay tuned. You'll be amazed to see the things coming.

Happy Coding!!!!