Grow your CSS skills. Land your dream job.

Size and different content in circle

  • # 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:
    http://cl.ly/image/433n0Z1O2y02

    And project is here – https://github.com/tanotify/Portfolio-circle

    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 1:28 pm

    Here is how to make the tabs http://www.visibilityinherit.com/code/jquery-fading-tabs.php

    Here is how you can make the circle an anchor if you wish to http://www.visibilityinherit.com/code/irregular-shaped-anchor.php

    I have no real good ideas on how to make the circle responsive. I know you can make circles with css. But you’d probably have to AP the content over it. I would prob just make the circle an image. Maybe use media queries to feed different size images depending on screen size. How to go about making the circle grow with content I’d have no idea. If you made it an oval then you sort of could.

    # December 29, 2012 at 3:49 pm

    [Check out this example I made](http://codepen.io/DustinWoods/full/hsfqw). 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 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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