Как я могу оформить маркер так, чтобы он имел размытый фон и центр solid?

Question

Я пытаюсь стилизовать маркерную панель навигации для ползунка и хочу, чтобы она выглядела так:

#scroll-bullets {
   width: 100px;  
   background-color: blue; 
   padding:  20px; 
}

.sbn ul {
    list-style: none;
    text-align: center;
}
.sbn ul li {
    display: block;
    margin-bottom: 20px;
}
.sbn ul li a {
    display: block;
    width: 10px;
    height: 10px;
    font-size: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    outline: none;
    box-sizing: border-box;
    transition: .2s ease-in-out;

}

.sbn05 ul li a {
    background-color: rgba(255,255,255,.5);
    border-radius: 50%;
}
 
.sbn05 ul li a.is-active, .sbn05 ul li a:hover  {
    background-image: radial-gradient(circle, white, transparent, transparent); 
    transform: scale(2);
}

<div id="scroll-bullets" class="sbn sbn05">
  <ul>
      <li><a data-scroll id="bullet1" class="is-active" href="#sec-1"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet2" href="#who"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet3" href="#why"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet4" href="#"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet5" href="#"><span class="inner-bullet"></span></a></li>
  </ul>
              
</div>

Заранее спасибо!

Answer 1

Просто добавьте точки цвета к вашему градиенту

background-image: radial-gradient(circle, white 20%, transparent 20%, transparent); 

#scroll-bullets {
  width: 100px;
  background-color: blue;
  padding: 20px;
}

.sbn ul {
  list-style: none;
  text-align: center;
}

.sbn ul li {
  display: block;
  margin-bottom: 20px;
}

.sbn ul li a {
  display: block;
  width: 10px;
  height: 10px;
  font-size: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  outline: none;
  box-sizing: border-box;
  transition: .2s ease-in-out;
}

.sbn05 ul li a {
  background-color: rgba(255, 255, 255, .5);
  border-radius: 50%;
}

.sbn05 ul li a.is-active,
.sbn05 ul li a:hover {
  background-image: radial-gradient(circle, white 20%, transparent 20%, transparent);
  transform: scale(2);
}

<div id="scroll-bullets" class="sbn sbn05">
  <ul>
    <li><a data-scroll id="bullet1" class="is-active" href="#sec-1"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet2" href="#who"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet3" href="#why"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet4" href="#"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet5" href="#"><span class="inner-bullet"></span></a></li>
  </ul>

</div>

Answer 2

Вы также можете использовать псевдоэлемент ::after для создания внешнего круга с непрозрачностью. Код объяснен в комментариях.

#scroll-bullets {
  width: 100px;
  background-color: #89ba16;
  padding: 20px;
}

.sbn ul {
  list-style: none;
  text-align: center;
}

.sbn ul li {
  display: block;
  margin-bottom: 20px;
}

.sbn ul li a {
  display: block;
  width: 10px;
  height: 10px;
  font-size: 0;
  text-indent: 100%;
  white-space: nowrap;
  outline: none;
  /* overflow: hidden; Removed so that you can see the ::after element */ 
  box-sizing: border-box;
  transition: .2s ease-in-out;
}

.sbn05 ul li a {
  background-color: rgba(255, 255, 255, .5);
  border-radius: 50%;
}

.sbn05 ul li a.is-active::after, /* Creates a pseudo version of existing element, can also use ::before */
.sbn05 ul li a:hover::after { 
  width: 30px;
  height: 30px;
  background: white;
  opacity: 0.5; /* Change according to your liking */
  display: block;
  position: relative;
  top: -10px;
  left: -10px;
  border-radius: 50%;
  content: " ";
}

<div id="scroll-bullets" class="sbn sbn05">
  <ul>
    <li><a data-scroll id="bullet1" class="is-active" href="#sec-1"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet2" href="#who"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet3" href="#why"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet4" href="#"><span class="inner-bullet"></span></a></li>
    <li><a data-scroll id="bullet5" href="#"><span class="inner-bullet"></span></a></li>
  </ul>

</div>

Answer 3

Попробуйте это ...

#scroll-bullets {
   width: 100px;  
   background-color: #89b3a5; 
   padding:  20px; 
}

.sbn ul {
    list-style: none;
    text-align: center;
}
.sbn ul li {
    display: block;
    margin-bottom: 20px;
}
.sbn ul li a {
    display: block;
    width: 10px;
    height: 10px;
    font-size: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    outline: none;
    box-sizing: border-box;
    transition: .2s ease-in-out;
}

.sbn05 ul li a {
    background-color: #fff;
    border-radius: 50%;
}
 
.sbn05 ul li a.is-active, .sbn05 ul li a:hover  {
    background-image: radial-gradient(circle, #feffff,#bbd6d1,#bbd6d1,#bbd6d1); 
    transform: scale(2);
}

<div id="scroll-bullets" class="sbn sbn05">
  <ul>
      <li><a data-scroll id="bullet1" class="is-active" href="#sec-1"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet2" href="#who"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet3" href="#why"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet4" href="#"><span class="inner-bullet"></span></a></li>
      <li><a data-scroll id="bullet5" href="#"><span class="inner-bullet"></span></a></li>
  </ul>
              
</div>