In this tutorial, we will create the Skype logo using pure CSS3. Learn how to make a Skype icon using just CSS and try to apply the techniques on your logo.

You might want to take a look at the following related articles:

Dont forget to subscribe to our RSS-feed and follow us on Twitter – for recent updates.

Creating Skype Logo using Pure CSS3

How To Create Skype Logo With Pure CSS3We’ll start the tutorial by creating a simple HTML file with basic HTML markup. You can use text editor like Notepad if you don’t have the advance commercial programs like Adobe Dreamweaver. We will also use internal CSS (write and save CSS within the HTML file) since the CSS style that we need is not so long.

<html>
<head>
<title>Skype Logo CSS3</title>
<style type="text/css">
<!--Insert Style Here-->
</style>
</head>
<body>
<div id="skype">
<span>S</span>
</div>
</body>
</html>

Before we start creating our Skype icon using CSS3, let’s add a quick simple style first on our HTML document including the background and default margin and padding.

* {
margin: 0 auto;
padding: 0;
}

body {
background: #dfdfdf;
}

The following CSS codes give us the Skype logo’s light-blue to blue gradient background and a rounded shape. Add the following CSS styles before </style>.
How To Create Skype Logo With Pure CSS3

#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;
}

The letter “S” inside the circular base is somewhat loss. We must increase the size of the letter “S” and a white color on it.
How To Create Skype Logo With Pure CSS3

#skype span {
font: 7em bold, Arial;
position: relative;
color: #ffffff;
}

Using the CSS code below, you’ll be able to add two more circular blue shapes which we will use in the top left and bottom right part of the logo.

#skype::before, #skype::after {
content: "";
position: absolute;
background: #00aff0;
width: 4.5em;
height: 4.5em;
border-radius: 4em;
z-index: -1;
}

It’s time to arrange those two circles. Let’s start on the bottom right portion. Add the code below to add the style on the bottom right circle.
How To Create Skype Logo With Pure CSS3
For the bottom right portion, add the CSS style below.

#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);
}

For the top left portion, add the CSS style below.

#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);
}

The set of two CSS above is basically a code for adding a gradient color that will normally blend on our base. It also aligns the two circle – one at the bottom right and one at the top left.

CSS Code Summary

Here’s the complete CSS code for the Skype logo which will be added on your HTML document. You could also use the external CSS or simply add it on another stylesheet document.


* {
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);
}
View Demo
Microsoft PowerPoint Presentation Templates