Fun with css: Make a RSS icon with pure css

Well, it’s easy enough to get a good looking rss icon with pure css and html. So let’s get started.

Pre thought

1) Simply just look at the icon of rss. It have several divisions such as one for background and in the internal part it has circle and curves. So we will make one div for circle and four div for curves as we have to style that curves with orange and white alternately for two times.

2) css for backgrounds and circles.

3) We will make use of odd-even css snippet and some necessary css fun coding to get our curves in shape and at right position.

Here’s the snippet:


<a href="#">
  <span class="icon"></span>
  <span class="circle"></span>
  <span class="curves">
    <span class="curve"></span>
    <span class="curve"></span>
    <span class="curve"></span>
    <span class="curve"></span>
  </span>
</a>

body{
  background:#fff;
  border:10px solid #FA9B39;
}
a{
  display:block;
  width:150px;
  height:150px;
  margin: 40px auto;
  position:relative;
  -webkit-backface-visibility: hidden;
  transition: all 300ms ease;
}
.icon {
  width:150px;
  height:150px;
  position:absolute;
  background:#FA9B39;
  z-index:1;
}
.circle{
  width:30px;
  height:30px;
  position:absolute;
  bottom:25px;
  left:25px;
  background:#fff;
  border-radius:15px;
  z-index:3;
}
.curves{
  width:105px;
  height:105px;
  overflow:hidden;
  position:absolute;
  bottom:25px;
  left:25px;
  z-index:2;
}
.curve{
  border-radius:50%;
  position:absolute;
}
.curve:nth-child(odd){
  background:#FA9B39;
}
.curve:nth-child(even){
  background:#fff;
}
.curve:nth-child(1){
  width:105px;
  height:105px;
  bottom:-53px;
  left:-53px;
  z-index:4
}
.curve:nth-child(2){
  width:140px;
  height:140px;
  bottom:-70px;
  left:-70px;
  z-index:3
}
.curve:nth-child(3){
  width:174px;
  height:174px;
  bottom:-87px;
  left:-87px;
  z-index:2
}
.curve:nth-child(4){
  width:206px;
  height:206px;
  bottom:-103px;
  left:-103px;
  z-index:1
}

You can also check the Demo at CODEPEN

Another way it could be much easy using :after and :before. checkout at CODEPEN. Thanks to ogurson for this suggestion.

3 Replies to “Fun with css: Make a RSS icon with pure css”

Leave a Reply

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