6

//Not a rant; Just asking for opinions

I'm trying to replicate this on a website. Should I go via the CSS route by making rounded squares or just place a bunch of images of each individual circle? Is there any pros or cons of doing either or? Or is it really all the same at the end? Thanks! 😅

Comments
  • 9
    CSS would avoid weird loading times I would imagine mate! Dead easy to do and a little JavaScript to convert a numerical value into those Dom elements (likely spans).
  • 3
    I would possibly go svg.
  • 11
    don't do images, each is another html request which will slow your site down. use rounded corners in css or look at svg
  • 2
    You can embed svg in html.
  • 2
    I'd go with svg, no doubt. But I never saw the point in these, what does it mean that someone knows four pips of PHP?
  • 0
    🤔 Good point. I was going to add some indication of proficiency like the first circle being "poor", the middle being "average", and the last circle "proficient". @oroys
  • 1
    I have never liked this on portfolios as you can't assign a percentage to your coding ability, you should always be learning. Instead it would be better to define your years of experience.
  • 0
    border-radius: 50%;
  • 0
    •••••
  • 0
    that is to say. I'd be hard pressed not to go for bullet point.
  • 1
    There is also a Unicode character for a bullet point you could use as well to avoid browser incompatibilities
  • 2
  • 2
    You don't need anything other than CSS to achieve this.
  • 1
    Circles in css are super easy. would take less time to build this than to discuss it.
    the fact that this thread exists makes me think your html+css skill rating should be lower than 4/10.
    (sorry if Im grumpy, hadn't had coffee yet)
  • 0
    @4screendev pro tip: use border-radius: 50%; and you don't need to update it if you change the width
Add Comment