Grow your CSS skills. Land your dream job.

Help with Rounded Corner box

  • # August 30, 2009 at 10:25 am

    So i had been looking for a css-based rounded corner technique that i could use to make a transparent-glass-box-thingie, but none of the things i found worked. Because i was using transparent images, and the techniques all made the images overlap each other, so the transparent images were darker on some places. So i made a technique myself but i need someone to change it to css, because it is table-based :( , or maybe point out some cool techniques i could use?
    http://bjarki.info/misc/rounded/

    Thanks, Bjarki.

    # August 30, 2009 at 6:36 pm

    to be honest, nobody wants to download a .rar

    # August 31, 2009 at 2:57 pm

    put a webpage link, I for one wont download a rar

    # September 1, 2009 at 9:40 am

    Sorry about that :P

    http://bjarki.info/misc/rounded/

    # September 1, 2009 at 9:45 am

    make divs.

    div for top, and make that the same size as your top image
    div for middle, height to auto: but have your image 2px in height and repeat it vertically
    div for bottom and make same as height as bottom image.

    I have done what you are asking for in my site, check link below

    # September 2, 2009 at 9:57 am

    Thanks, ikthius. ;)

    I used to do that when i was playing around with rounded corners some months ago, but now i was thinking about resizeable boxes (both width and height). Any other ideas?

    # September 2, 2009 at 10:07 am
    "BjarkiMTB" wrote:
    Thanks, ikthius. ;)

    I used to do that when i was playing around with rounded corners some months ago, but now i was thinking about resizeable boxes (both width and height). Any other ideas?

    assuning wou want a sort of fade/differing colour as a border I am assuming black as inside and white as outside but transparent.

    well make:
    a div for top left corner
    a div for top expandable: image 1px wide
    a div for top right corner

    a div for left side 1px high same width as top left image
    a div for middle: inage 1px square only backgroung colour e.g. black only
    a div for right side 1px high same width as top right image

    a div for bottom left corner
    a div for bottom expandable: image 1px wide
    a div for bottom right corner

    the main thing is to let the main centre div take the size and the rest should follow

    # September 3, 2009 at 6:53 am

    Thanks!

    # September 3, 2009 at 7:05 am

    did it work out?

    # September 5, 2009 at 3:36 pm

    I once found a rounded corner technique on the web which used rounded bullets to achieve the rounded corners, which means no images needed… But unfortunately that site is down at the moment. Anyway, here is the link

    http://labs.parkerfox.co.uk/cornerz/

    May be the site comes up some time and you guys can check it out…

    # September 8, 2009 at 9:58 am

    This is what i have managed to get build so far:
    http://bjarki.info/misc/mm/round.php

    There is some problem with the center div.. It doesnt want to be height: 100%. I need to specify the height myself, as in height: 500px;, for it to work…
    Anyone knows what the problem is?

    And Sumeet, the link is a 404 :?

    # September 8, 2009 at 10:01 am

    what about height:auto; ?

    # September 8, 2009 at 10:05 am

    Nope :cry:

    # September 8, 2009 at 10:12 am

    Just realised that i had a mistype in my code :P
    http://validator.w3.org always works ;)
    But still there is a little proplem with it but i think i can find it out myself now :D

    # September 8, 2009 at 10:19 am

    Never mind, I need help with this… :oops:
    Cant get the center to be 100% height…

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".