newbie question

[nosignal]

Hi everyone, I'm a web design newbie and I was wondering about something.
I see a bunch of sites in the review section that users have created, and a bunch of them use what look to me to be container div tags that have rounded edges, I was wondering if there is a css style to achieve this or if you have to make the images yourself? It would seem to me that making all those images, especially the bigger ones, would start to make the site weight too much.
here are a few sites that use the technique.
http://www.le-savoir-web.com/
http://nfm.solasit.com/


any help is appreciated, im sorry if this is an unbearably ridiculous question.

 

[constanthosting]

those are all images. If you right click on them in most browsers and click on "view image" or "view background image" it will show you. There are plenty of GIMP and PhotoShop tutorials online for making these

I hope this helps.

 

[adamblan]

Rounded corners are a pain in the a$$. The best way i've found to apply them is to create a css class for each corner + background + content. For your corners & background images, slice them to a specific size (5-15px is good) in the image editor of your choice. Or even better, create one round-rect gif/png & set the size with css.

<div class="module">

<div class="mod_content">
<p>stuff goes here</p>
</div>

<div class="cornerTR"></div>
<div class="cornerBR"></div>
<div class="cornerTL"></div>
<div class="cornerBR"></div>

</div>

.module {
position:relative;
}

.mod_content {
position:relative;
}

.cornerTR {
position:absolute;
top:0px;
right:0px;
background: url(corners.jpeg) top right no-repeat;
width:10px;
height:10px;
}
.cornerTL {
position:absolute;
top:0px;
left:0px;
background: url(corners.jpeg) top left no-repeat;
width:10px;
height:10px;
}
.cornerBR {
position:absolute;
bottom:0px;
right:0px;
background: url(corners.jpeg) bottom right no-repeat;
width:10px;
height:10px;
}
.cornerBL {
position:absolute;
bottom:0px;
left:0px;
background: url(corners.jpeg) bottom left no-repeat;
width:10px;
height:10px;
}

 

[conor]

rounded tables are available in CSS3 but it isn't supported by any browsers at the moment... If you download the nightly firefox it might work... But then nobody else will be able to see it!

Text shadow will also be available... I can't wait!

 

[kangomedia]

I came across this website to create rounded corners without having to create images.

http://www.roundedcornr.com/

Hope that helps.

Freddy Rodriguez

 

[Amber24]

I came across this website to create rounded corners without having to create images.

http://www.roundedcornr.com/

Hope that helps.

Freddy Rodriguez

I'm a newbie too I use gimp for all my images and thats how I create all my rounded corners. I fiddled with http://www.roundedcornr.com/ it has great ways of making the rounded corners. If you dont want to create each image in gimp or photoshop I would use http://www.roundedcornr.com/ to create them.