April 14, 2015

Skype logo using CSS3

Skype logo using CSS3

Just wanted to create logos using CSS3 with no images. It's just simple. This is done using CSS3.

HTML

<div id="skype"><span>S</span></div>

CSS

* {
    margin: 0 auto;
    padding: 0; 
}
body {
 background: #dfdfdf;
}
#skype {
   margin-top: 2.5em;
 background: #00aff0;
    background: -moz-linear-gradient(#88d9f8, #00aff0);                  
 background: -webkit-linear-gradient(#88d9f8, #00aff0);          
 background: -o-linear-gradient(#88d9f8, #00aff0);                
    background: -ms-linear-gradient(#88d9f8, #00aff0);                   
   background: linear-gradient(#88d9f8, #00aff0);          
    width: 8em;
   height: 8em;
   border-radius: 5em;
   text-align: center;
   position: relative;
   color: #ffffff;
}
#skype span {
 font: 7em bold, Arial;
   position: relative;
}
#skype::before, #skype::after {
 content: "";
   position: absolute;
   background: #00aff0;
 width: 4.5em;
   height: 4.5em;
   border-radius: 4em;
   z-index: -1;
}
#skype::before {
   content: "";
   left: 0;
   top: -5px;
   background: #00aff0;
    background: -moz-linear-gradient(#66ddff, #88bbff);                  
 background: -webkit-linear-gradient(#66ddff, #88bbee);
 background: -o-linear-gradient(#66ddff, #88bbff);               
    background: -ms-linear-gradient(#66ddff, #88bbff);                   
   background: linear-gradient(#66ddff, #88bbff);
}
#skype::after {
   content: "";
   bottom: -5px;
   right: 0;
   background:  #00aff0;
    background: -moz-linear-gradient(#99bbff, #00aff0);                  
 background: -webkit-linear-gradient(#88bbff, #11aff0);          
 background: -o-linear-gradient(#99bbff, #00aaff);                
    background: -ms-linear-gradient(#99bbff, #00aff0);                   
   background: linear-gradient(#99bbff, #00aff0);
}
demo

No comments:

Post a Comment

Popular Posts

Views