Gradient drop bullets

      No Comments on Gradient drop bullets

Gradient drop bullets : Ordered list with gradient drop numbered bullets using css

Gradient drop bullets

Gradient drop bullets

CSS:

body
{
  padding:2% 10%;
}
.list {
    list-style: none;
    width: 600px;
    max-width: 90%;
}

.item {
    display: block;
    clear: both;
    counter-increment: list;
    padding-bottom: 4rem;
    font-size: 1.1rem;
    line-height: 1.375;
    position: relative;
}

.item:before {
    font: bold 2.25rem/1 Montserrat, Roboto, Helvetica, Arial, sans-serif;
    content: counter(list);
    width: 5rem;
    height: 5rem;
    float: left;
    margin: 0 1.5rem 0.75rem 0;
    color: #fdfdfd;
    background: #4d4dff linear-gradient(to bottom right, #4d4dff 15%, #ff3399);
    text-shadow: 0 0 2px #4d4dff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    shape-outside: ellipse();
    z-index: 1;
}

.item:after {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: #4d4dff;
    z-index: -1;
    border-top-left-radius: 3px;
}

Markup:

<ol class="list">
  <li class="item">Number 1</li>
  <li class="item">Number 2</li>
  <li class="item">Number 3</li>
</ol>

Demo:

See the Pen Ordered list with gradient drop numbered bullets by scanfcode (@scanfcode) on CodePen.

Summary
Gradient drop bullets
Article Name
Gradient drop bullets
Description
Gradient drop bullets : Ordered list with gradient drop numbered bullets using css
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

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