Pure CSS iTunes logo…

while I was roaming around the http://www.. I found a cool.. I mean very cool stuff.. I made some changes on it and deliver it to u guys.. .

This is a pure CSS and a single line HTML code to bring the iTunes logo.. any hackers can try other logos also.. 

lets go foe the code.. 

//css code below

*, ::before, ::after {

  box-sizing: border-box;

}

html {

  height: 100%;

}

body {

  background: radial-gradient(center center, circle farthest-side, #E6E6E6, #CCC);

}

.itunes {

  position: relative;

  z-index: 2;

  margin: 20px auto;

  width: 240px;

  height: 240px;

  border-radius: 50%;

  background: linear-gradient(top, #FFF, #d4d6d6);

  background: linear-gradient(to bottom, #FFF, #d4d6d6);

  border: 1px solid #FFF;

  box-shadow: inset 0 0 2px rgba(0, 0, 0, .8),

    0 0 10px -1px rgba(0, 0, 0, .5);

  overflow: hidden;

  font-size: 160px;

  color: #3c3f4d;

  text-align: center;

  line-height: 1.5;

  text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);

}

.itunes::before {

  content: '';

  position: absolute;

  z-index: -1;

  top: 3%;

  left: 3%;

  width: 94%;

  height: 94%;

  border-radius: 50%;

  background: radial-gradient(circle cover, transparent 60%, #033280),

    linear-gradient(left, #033280 10%, #56cffd 45%, #56cffd 55%, #033280 90%);

  box-shadow: inset 0 0 8px rgba(0, 0, 0, .75);

  border: 5px solid black;

  border-left-width: 3px;

  border-right-width: 3px;

  border-bottom-width: 0;

}

.itunes::after {

  content: '';

  position: absolute;

  z-index: 1;

  top: 3%;

  left: 3%;

  width: 94%;

  height: 94%;

  border-radius: 50%;

  background: radial-gradient(110px -340px, circle farthest-corner, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0) 80%);

}

and a single line HTML to call the object
<div class="itunes">♫</div>
Thats all.. just try folks.. 🙂
hay try this as the HTML code then,

<div class=”itunes”>a</div>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s