Responsive circles with CSS

Wednesday, April 16, 2014

We recently released a dashboard for the Hire Space venues’ CMS and the layout involves lots of circular badges with numbers in.

Analytics Screenshot

I’m no CSS whizz, but I did have fun styling this and it turns out that creating fully responsive circular badges with nothing but CSS is easy. Here are the classes to create the circles:

.circle {
margin-left: auto;
margin-right: auto;
border-radius: 50%;
width: 100%;
position: relative;
}

.circle-border {
border: 1px solid black;
}

.circle-solid{
background-color: whitesmoke;
}

.circle:before {
content: "";
display: block;
padding-top: 100%;
}

.circle-inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}

And a class for the text inside the circle:

.score-text {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 1em;
line-height: 1em;
font-size: 1em;
}

To ensure that the text is vertically aligned in the centre of the circle, the line-height, font-size and height of the containing div need to be the same.

Markup for a circle with a border and some text inside:

<div class="circle circle-border">
     <div class="circle-inner">
         <div class="score-text">
            SOME TEXT
          </div>
     </div>
</div>

Wrapping the circle div in a responsively sized div (like one of the Bootstrap col-* classes) gives a responsively sized circle. The final touch is for the inner text to be responsive as well. Happily, this too is possible with CSS, using the ‘viewport width (vw)’ unit of measurement. 1vw is 1 percent of the viewport width.

.score-text {
height: 3vw;
line-height: 3vw;
font-size: 3vw;
}

The result: responsively sized, vertically centred text for your badge.

Of course browser support for the viewport width units doesn’t extend back as far as you might need, so make sure to include a fallback. Also, a quirk in Chrome is that the text won’t be re-painted when the browser is re-sized, so the text is only responsive to the initial browser size. To get around this, I did break from the pure CSS approach and use a little JQuery fix:

var causeRepaintsOn = $('.score-text');

$(window).resize(function () {
    causeRepaintsOn.css("z-index", 1);
});

And that’s it!

NB: of course, in IE < 9 these will be responsive squares – not quite as pretty!


21 comments on “Responsive circles with CSS”

  • Vladimir says:

    Thank you so much, this article is very helpful

  • This is awesome! Saved my tail today with this solution. I was just needing to center images though – found that I didn’t need any attributes on the .circle-inner div, just needed a div in place for this to work for me. Thank you Alex.

  • Richard says:

    Not sure about back in 2014 but certainly Chrome has no problems with ‘repainting’ vw fonts now a days. Also you say that the line-height for the div containing the text needs to be the same as the line-height of the text itself. That’s not quite what is going on here, it’s more to do with the top, right, bottom left positioning than the line-height, which has been left undeclared in your code other than in the ‘score-text’ class.

    Another way of doing the text would have been to do something like .circle-inner>p{}.

    Good article wot

  • Rafael says:

    Show!
    As you did to make stylized equal in the image?

  • Nate says:

    Thanks for the tutorial. Please how can I make it responsive with images as well.

  • Somto says:

    nice it was helpful

  • Pablo says:

    Thank you so much for this solution!

  • Thank you so much great article

  • teleinspnop says:

    Основываясь на долгий опыт в этом деле и квалифицированную команду мастеров своего дела, по обустройство скважины, оборудование скважины, замена глубинных насосов, промывка дренажной канализации, монтаж водоподъёмной трубы в скважине, промывка трубопроводов высоким давлением, замена водоподъёмной трубы в скважине, восстановление эксплуатационных характеристик скважины и другие. Все эти услуги обширно используются во всевозможных секторах, таких как коммерческий, а также жилой сектор, сельхозхозяйство и ирригация. Вся наша бригада профессионалов имеет в распоряжении 10 летний опыт во многих направлениях, это помогает нам совершать эти услуги такие услуги как ремонт скважины, обслуживание канализации, диагностика скважин, обследование водозабора, очистка дождевой канализации, восстановление производительности скважин, замена СУЗ на скважине, поставка скважинных трублегко и с полной отдачей. Имеющиеся услуги ценятся нашими клиентами за их своевременное осуществление и более лучшую ценовую программу.

  • Thomasalgox says:

    I thought this was a great show.
    Tiene otra miniserie antecedente de The wire que aun no he visto.
    He rarely gives interviews, but I managed to bribe him with a rare Mazzy Star bootleg.
    http://progressive.kelediballadomeenasnowforge.info The Funeral Rule prohibits funeral providers from telling you that it can be done.
    The neck is straight and has little arch, even in mules from Arab or Warmblood mares.
    May Sarton, in Invocation to Kali, channels her rage over the concentration camps.

  • Briankange says:

    I just want to say I am beginner to weblog and in fact enjoyed you’re website . Highly likely I’m want to bookmark your website. You absolutely include good posts. Thanks a lot for revealing your blog website.
    0c28e7c

  • Davidmow says:

    Сервис по обмену, продаже, покупке скинов TRADE NETWORK

    https://vk.com/id295067473

    Купить скины, GH TRADE, Купил себе скины, Лучшие трейдеры, Обмен скинов Дмитрий, Лучшие трейдеры, Trade Network

  • EmilySari says:

    Правильный уход – это основа хорошего настроения и здоровья домашнего питомца. Наши домашние питомцы нуждаются также как и люди в специализированных процедурах – стрижке, тримминге и прочих

    Основа в заботе за домашними животными – это комфорт. Домашний питомец должен радоваться жизни, а задача владельцев – сделать все для этого. По данной причине гигиена и стрижка являются обязательными для сохранения активности и здоровья четвероногого друга.

    Сегодня, стрижка – это не стандартный способ подравнять шерстяной покров. Это настоящий комплекс процедур, куда относится: чистка ушей, глаз, зубов. И, конечно-же, парикмахерские процедуры с использованием профессиональных ухаживающих средств.

    В перечень услуг зоосалона входит:
    1) Стрижка собак – йорков, орхидей, спаниелей и собачек других пород.
    2) Стрижка кошек – персидских, британских, сибирских и других пород.
    3) Разнообразные гигиенические процедуры – стрижка подушечек лам, подстригание когтей.
    стрижка йоркширских терьеров
    Увидеть весь список цен и стоимости услуг вы можете в группе социальной сети. Если вдруг этот топик отправлен не в ту категорию объявлений, просим перенести куда следует, где помещаются такие сообщения.

  • Olgatus says:

    Активные Ютуб репосты 99р

  • AprilBiord says:

    It is the duty of a doctor to prolong life and it is not his duty to prolong the act of dying.

  • Edwardfar says:

    большой веб сайт http://4xcasino.ru

Leave a Reply

Your email address will not be published. Required fields are marked *