Recreate Facebook Logo Using CSS:Digital Tech Inspiration

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”.

DESIGN ELEMENTS OF FACEBOOK LOGO

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.

COLOR OF FACEBOOK LOGO

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.

HTML

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

CSS

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