Thursday, July 16, 2009

Curved edges without Images

Hi All,

I was browsing in the internet just to check is it possible just to have a block with curved images without using images.

Many of the links are as usual only, but there was one link which said doing without images, i got excited and opened the link, as they mentioned it was like that.

So i just thought of sharing with you all.

Many of you might think it is just copying and pasting the code, but believe me i tried it out and then only i am posting it here :) :)

I will explain the logic at the last.

HTML:

< class=" b1 ">< / b >< class=" b2 ">< / b >< class=" b3 "> < / b > < class=" b4 ">< / b >
< class="content">
<>
<> <>You can see me with curved edges.< / td >< / tr >
< / table >
< / div >
< class=" b4 ">< / b >< class=" b3 ">< / b >< class= " b2 "> < / b > < class=" b1 "> < / b >

CSS:

<>
.b1 { DISPLAY: block; FONT-SIZE: 1px; OVERFLOW: hidden }
.b2 { DISPLAY: block; FONT-SIZE: 1px; OVERFLOW: hidden }
.b3 { DISPLAY: block; FONT-SIZE: 1px; OVERFLOW: hidden }
.b4 { DISPLAY: block; FONT-SIZE: 1px; OVERFLOW: hidden }
.b1 { BACKGROUND: #888; MARGIN: 0px 5px; HEIGHT: 1px }
.b2 { BORDER-RIGHT: #888 2px solid; BACKGROUND: #ddd; MARGIN: 0px 3px; BORDER-LEFT: #888 2px solid; HEIGHT: 1px }
.b3 { BORDER-RIGHT: #888 1px solid; BACKGROUND: #ddd; MARGIN: 0px 2px; BORDER-LEFT: #888 1px solid; HEIGHT: 1px }
.b4 { BORDER-RIGHT: #888 1px solid; BACKGROUND: #ddd; MARGIN: 0px 1px; BORDER-LEFT: #888 1px solid; HEIGHT: 2px }
.contentb { BORDER-RIGHT: #888 1px solid; BACKGROUND: #ddd; BORDER-LEFT: #888 1px solid }
.contentb DIV { MARGIN-LEFT: 5px }
.contentb TABLE { MARGIN-LEFT: 5px }
< / style >

save the code as html file and TADA you can see the curved edges without images.

As i promised the logic is just simple, setting the margin for the bold tag would actually make a curved apperance to the edges

Reference : http://www.html.it/articoli/nifty/index.html

Have a happy coding


Venkat :)

No comments: