Tagged Under:

CSSHTML

Google Plus Icon in CSS Using a Single Empty Div

Aug 2011
18

I was inspired by the idea that you can make a wide range of shapes using only CSS on a single div after reading this css-trics.com page. A few days ago I created a Facebook Icon using a single empty div. Today I created the Google Plus Icon using a single empty div:

<div id="gplus"></div> 
#gplus:before {
	content: "g";
	position: absolue;
	font: 58px/29px "Palatino Linotype", Georgia, "Book Antiqua", serif;
	color: #fff;
	padding-left: 27px;
	top: 0;
	left: 0;
}
#gplus {
	position: relative;
	border-top: 12px solid #D64335; /* red */
	height: 60px;
	width: 100px;
	background-color: #393838; /* dark gray */
}
#gplus:after {
	content: "+";
	border-left: 25px solid #426AAD; /* blue */
	background-color: #32A45E; /* green */
	border-right: 25px solid #F8CA32; /* yellow */
	height: 12px;
	width: 15px;
	padding-left: 10px;
	font: 44px/55px "Palatino Linotype", Georgia, "Book Antiqua", serif;
	position: absolute;
	color: #fff;
	top: -12px;
	left: 25px;
}

The font is not exact but it is close. It works in Firefox 5, Chrome 13, and Safari 5.1. See the JS Fiddle version.

0 comments