Web Technology: CSS, Web Design and More...

Thursday, September 4, 2008

Creating Flexible Rounded boxes: Using no images!

In this article I show you how to create Rounded boxes using only pure CSS! It is tested on the following browsers successfully:

Internet Explorer 6, 7 and 8
Mozilla Firefox 2 and 3
Opera 9

The final result would be like this:

The principle behind this type of Rounded corner technique is to use gradually expanding tag’s border as:

______________________________________

_________________________________________

__________________________________________

Let’s get started:

First of all we will need to create our .css file, wherein we will do all the stylings. Create a style_round.css file and open it in Notepad or any of your text editor.
Now add the following lines in the CSS file.

.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh

{font-size:1px; overflow:hidden; display:block}

.b1h{height:1px; background:#aaa; margin:0 5px}

.b2h, .b2bh{height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px}

.b3h, .b3bh{height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px}

.b4h, .b4bh{height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px}

.b2bh, .b3bh, .b4bh{background:#ddd}

.headh{background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa}

.headh h3{margin:0px 10px 0px 10px; padding-bottom:3px}

.contentf{background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa}

.contentf div{margin-left:12px; padding-top:5px}

You could change the border and background colors to your choice.

Now create a .html file and place the following code in it:

Flexible Rounded boxes

<html>

<head>

<title>Flexible Rounded boxes</title>

</head>

<body>

<h3>Here is the Heading</h3>

</div>

<div>Without any image</div>

</div>

</body>

</html>

Flexible Rounded boxes

Wednesday, August 27, 2008

What's the DOCTYPE! tag all about?

Hello all!

From the last "Rounded corner" article we now move upon the one of the most confusing section of web design. This tag is "DOCTYPE".

Many year back since today, when internet became famous, there was no CSS as we have today. The pages were meant to only provide information to users without much interactivity.

Later on CSS1 was born, which made pages look systematic and to some extent beautiful. Many websites were written using it.

Similarly, CSS2 came into the picture. New browsers were launched with removing previous bugs. Now, a problem arised that how to display the old sites correctly in the new browsers.

The solution the browser vendors came with was that the browsers operated in two modes:

Standard mode
Quirks mode (for old sites)

The standard mode was the new sites.

The browsers gets to know in which mode to run through the DOCTYPE tag's presence. If the tag is present, the browser works in the standard mode, else it works in the Quirks mode.

It is strongly recommended to use, and so do I, that you use DOCTYPE in your pages. It should be generally the first statement in your page or it won't work.

That's all folks.
NEXT ON I promise the advanced rounded box article.

Saturday, August 23, 2008

Quickly create rounded corners!

Hello all!

Fixed-width rounded-corner boxes are the easiest to create. They require only two images:
one for the top of the box and one for the bottom. For example, say you want to create a
box style like the one in the Figure.

The markup for the box looks something like this:

<div class="box">
<h2>Headline</h2>
<p>Content</p>
</div>

In your favorite graphics package you need to create two images like those in Figure below
one for the top of the box and one for the bottom.

You then apply the top image to the heading element and the bottom image to the bottom
of the box div. Because this box style just has a solid fill, you can create the body of
the box by adding a background color to the box div.

.box {
width: 418px;
background: #effce7 url(images/bottom.gif) no-repeat left bottom;
}
.box h2 {
background: url(images/top.gif) no-repeat left top;
}
You will not want your content to butt up against the sides of the box, so you also need to
add some padding to the elements inside the div:
.box h2 {
padding: 10px 20px 0 20px;
}
.box p {
padding: 0 20px 10px 20px;
}

This is great for a simple box with a solid color and no borders.

Thanks all. Please leave your comments.

Next I will publish more advanced round corner methods.

Thursday, August 21, 2008

My First Blog

Hello all! I will be posting on by blog on the topic Web Technology! as it's name suggests. I am a student in Baroda, studying Computer Engg. I am interested in web designing specially. This is my first post.

I always welcome your posts and suggestions on new technologies buzzing on the web.

Web Technology: CSS, Web Design and More...

Thursday, September 4, 2008

Creating Flexible Rounded boxes: Using no images!