Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Size and different content in circle

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #41649
    tanotify
    Member

    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

    #119341
    DustinWoods
    Member

    [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.

    #119367
    tanotify
    Member

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.