Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile rounded edge content backgrounds

    Probably the worst thread title, I cant explain it. How can you create round edge graphics, to explain what im talking about, go to www.ebay.com and look where it says (above the search form thing) "you can get it on ebay", see what its in? on the side how its rounded..eh ill just show

    Its like the background, is it a picture? It top left corner has a rounded corner. How do you do this? How do websites such as www.pctools.com make that layout? What i mean by layout os just not to have anything on the sides, and have rounded edges on all 4 corners, and the website is all inside that? Ive always wandered how this was done. Please explain briefly!

    Mark

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    They are all just background images. http://pics.ebaystatic.com/aw/pics/n...Left_12x12.gif
    They make the rounded rectangle using a graphics program and then slice up just the corners or the whole top side. Nifty corners uses JS but JS isn't really needed. http://www.html.it/articoli/nifty/index.html
    I'll make an example without using JS. Okay here it is, it uses CSS, to me absolute positioning for the corners in a relatively positioned element is easiest.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Rounded Corners with CSS and images</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    html, body {
    margin:0;
    padding:0;
    background:#FFF;
    color:#000;
    }
    #container {
    width:400px;
    margin:40px auto;
    position:relative;
    background:#00F;
    color:#000;
    }
    .tl {
    position:absolute;
    top:0;
    left:0;
    z-index:0;
    }
    .tr {
    position:absolute;
    top:0;
    right:0;
    z-index:0;
    }
    .bl {
    position:absolute;
    bottom:0;
    left:0;
    z-index:0;
    }
    .br {
    position:absolute;
    bottom:0;
    right:0;
    z-index:0;
    }
    .text {
    margin:0;
    padding:10px;
    position:relative;
    z-index:1;
    text-align:justify;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<img class="tl" src="tl.gif" width="12" height="12" alt="" />
    	<img class="tr" src="tr.gif" width="12" height="12" alt="" />
    	<img class="bl" src="bl.gif" width="12" height="12" alt="" />
    	<img class="br" src="br.gif" width="12" height="12" alt="" />
    	<p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>
    </body>
    </html>
    Attached are the images and the psd file.
    Attached Files Attached Files
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    WellRounded DreamWeaver extension

    I wrote an extension for DreamWeaver for doing these (see my sig). It creates the graphics, writes the HTML and CSS, everything is XHTML 1.1 valid, and the rects can be used as containers, and they work in liquid layouts, etc. It supports bordered round cornered rects as well as outer and inner shadows.

    Chris Perkins
    Media Lab, Inc.
    http://www.medialab.com/wellrounded


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •