How to do an RSS icon in CSS
I have been adapting an RSS icon made with CSS.
The RSS icon came from:
'codepen.io/dazulu/pen/nwppvr'
There are 4 circles layered on top of each other, using 'z-index' values. The circles are made with 'div's and 'border-radius: 50%'. The circles are of increasing size.
The circles are centered by setting a 'left' and 'bottom' to minus half the div's width and height. The circles have 'positon:absolute' within the overall icon container's 'position:relative'.
The second and fourth circles have a white background, whereas the first and third have the orange color.
Only the top-right corner of the circles is shown by putting the 4 circles in a container 'div' and giving the 'div' an 'overflow: hidden'.
Finally a small white circle is placed on top at the center of the above 4 circles.
My RSS icon is at:
'codepen.io/Bert-Beckwith/pen/YzobrmX'
This also shows the icon without 'overflow: hidden' to show how it is made up
There are more tips at: bbingo.xyz/t
Comments
Post a Comment