Recreate Facebook Logo Using CSS

Facebook is one of the top social networks. Facebook possesses great success in the social networking services and has grown immensely in a short period of time. The website has expanded itself to many countries of the world.

Facebook, originally known as “The Facebook”, was created in 2003 by Mark Zuckerberg, along with his Harvard roommate and classmates Eduardo Saverin, Dustin Moskovitz and Chris Hughes. In 2005, “The” was eliminated, and has since then been called only “Facebook”.

Since its inception, Facebook has not made drastic modifications to its logo, except for changing the shade and resolution of the logo. Facebook has successfully held the same brand image and nonpareil recognition for providing people with the ability to share and connect with the world.
The Facebook logo comprises of a blue background and white font. The color of the logo signifies zeal and passion of the youth that formed this network.
I was inspired by the idea that you can make a wide range of shapes using CSS. I created the Facebook’s [ f ] Icon.


<div id="f"></div>


#f {
width: 100px;
height: 80px;
background-color: #3B5998;
border-bottom: 20px solid #6d84b4;
position: relative;
#f:before {
position: absolute;
top: 15px;
right: 15px;
border: 15px solid #fff;
border-bottom: none;
border-right: none;
border-top-left-radius: 15px;
width: 15px;
height: 65px;
content: "";
#f:after {
position: absolute;
top: 44px;
left: 43px;
height: 15px;
width: 42px;
background-color: #fff;
content: "";

It works in Firefox 5, Chrome 13, and Safari 5.1. It works in IE8, but the [ f ] is not rounded. See the JS Fiddle version.

{ 0 comments... read them below or add one }

Post a Comment