• # December 29, 2012 at 12:08 pm

    Hello, recently i have started open-source project of portfolio page. It based on html5, css3 and jQuery. I am beginner in programming and planning to learn by the way..

    So, here it is the idea, how it will looks like:

    And project is here –

    For now i have some problems with code
    1) How to make responsive circle, which size will be depend of screen resolution (proportions must me like on attached image)
    2) How to make changing of content? I need that, when one tab is open – another three is hide..

    Thank you

    # December 29, 2012 at 3:49 pm

    [Check out this example I made]( Try playing with the size of the window, notice the circle is fluid, and does not become an oval.

    Looking at your code, it looks like you’re trying the same approch I took. You’re setting border radius to half the size of the square div. Perfect! Now for fluid width, you’ll want the div to be a percentage of the window. So let’s say you set

    .circle {width: 70%;}

    This would be fine, but the height isn’t the same, so it becomes an oval.
    (I had to do a little research for this part) If you give the circle a container, and set

    .circle {padding-bottom: 100%;}

    This will set the total height to the same as the width. This is essentially creating a fluid-width square, and with it’s border-radius set to 50%, you’ll have a circle with fluid width.

    You might want to play with media queries to get it looking nice at different sizes.

    # December 30, 2012 at 1:08 am

    Wow, thank you very much! In fact it is really what i searched for!!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.