Photoshop Question posted in
The official user guide can be found here.

CSS circles with a number – Photoshop

I need to make bullets points like this:

Bulletspoints

I tried to think of anything how to do it, but the only thing I can think of is making it in photoshop, and make a img src tag. the best would be if it was ul and li tags.

Does anybody have a good idea how to do it?
I tried something like this, but it is not working properly:
JSFIDDLE

HTML

<a href="abecadlo/"><div class="galeria">1</div></a>
<a href="abecadlo/"><div class="galeria">2</div></a>
<a href="abecadlo/"><div class="galeria">3</div></a>

CSS

.galeria{
    border-style: solid;
    border-width: 1px;
    border-color: black;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    margin-right: 2%;
    display: inline;
}
Tags:

2

Answers


  1. 0

    There are a lot of approaches to realize this. Here’s one:

    • create a list (ul or ol) and remove the list style (list-style: none;)
    • initialize a counter: counter-reset: section;
    • increase counter on each list item and print it using a pseudo element (:before): content: counter(section); counter-increment: section;
    • style the pseudo element (:before) like you want it
    ul {
  counter-reset: section;
  list-style: none;
}

li {
  margin: 0 0 10px 0;
  line-height: 40px;
}

li:before {
  content: counter(section);
  counter-increment: section;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0 20px 0 0;
  border: 1px solid #ccc;
  border-radius: 100%;
  text-align: center;
}
    <ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

    Further reading

    Demo

    Try before buy

    Login or Signup to reply.
  2. 0

    You can do somethings as follow:

    HTML

    <a href="abecadlo/"><div class="galeria">1</div></a>
<a href="abecadlo/"><div class="galeria">2</div></a>
<a href="abecadlo/"><div class="galeria">3</div></a>

    CSS

    .galeria{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    padding: 8px;
    background: #fff;
    border: 1px solid #000;
    color: #000;
    text-align: center;
    font-size: 20px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search