Html5 sosyal medya ikon tasarımı

 Marco  Biedermann  tarafından hazırlanmış sosyal ağ  ikonları örneği.  Sadece Css3   kullanılan bu örnekte kullanılan ikonlar Font Awesome  ile  import  edildiş. Örneğin geri kalan kısmı  tamamen Css3  ile tasarlanmış.  Bir tooltip benzeri  hazırlanmış  bu örnekle  sitenizin  herhangi bir köşesinde sosyal ağ adreslerinizi  yayınlayabilirsiniz.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

@charset "utf-8";
/* CSS Document */

/* ---------- FONTAWESOME ---------- */
/* ---------- https://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- https://weloveiconfonts.com/ ---------- */

@import url(https://weloveiconfonts.com/api/?family=fontawesome);

/* ---------- ERIC MEYER'S RESET CSS ---------- */
/* ---------- https://meyerweb.com/eric/tools/css/reset/ ---------- */

@import url(https://meyerweb.com/eric/tools/css/reset/reset.css);

/* ---------- FONTAWESOME ---------- */

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

/* ---------- GENERAL ---------- */

body {
	background-color: #6e6056;
}

a { text-decoration: none; }

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
	display: table;
	content: "";
}
.clearfix:after { clear: both; }

/* ---------- NAVIGATION ---------- */

nav {
	margin: 50px auto;
	width: 218px;
}

nav ul li {
	margin-bottom: 50px;
	position: relative;
}

nav > ul > li > a {
	background-color: #ded0bb;
	border: 4px solid #5a504a;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	color: #645650;
	display: block;
	height: 32px;
	line-height: 32px;
	text-align: center;
	width: 32px;
}

nav ul li ul {
	background: #f6eddb; /* Old browsers */
	background: -moz-linear-gradient(top,  #f6eddb 0%, #ccbba4 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6eddb), color-stop(100%,#ccbba4)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f6eddb 0%,#ccbba4 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f6eddb 0%,#ccbba4 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f6eddb 0%,#ccbba4 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f6eddb 0%,#ccbba4 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6eddb', endColorstr='#ccbba4',GradientType=0 ); /* IE6-9 */
	border-radius: 16px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	box-shadow: 0px 1px 2px #352f2c;
	display: block;
	height: 40px;
	left: 52px;
	padding: 0 8px;
	position: absolute;
	top: 0;
}

nav ul li ul:before {
	background: #e7dbc7; /* Old browsers */
	background: -moz-linear-gradient(top,  #e7dbc7 0%, #dbcdb8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7dbc7), color-stop(100%,#dbcdb8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #e7dbc7 0%,#dbcdb8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #e7dbc7 0%,#dbcdb8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #e7dbc7 0%,#dbcdb8 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #e7dbc7 0%,#dbcdb8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7dbc7', endColorstr='#dbcdb8',GradientType=0 ); /* IE6-9 */
	content: "";
	display: block;
	height: 8px;
	left: -4px;
	position: absolute;
	top: 16px;
	transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	width: 8px;
}

nav ul li ul li {
	float: left;
}

nav ul li ul li a {
	border: none;
	color: #645650;
	display: block;
	height: 40px;
	line-height: 40px;
	text-align: center;
	width: 30px;
}

.facebook:hover { color: #3B5998; }
.twitter:hover { color: #00aced; }
.google-plus:hover { color: #C63D2D; }
.linkedin:hover { color: #4875B4; }
.github:hover { color: #000; }

•  Body etiketleri arasına eklemeniz  gereken bölüm.

Html : 

<nav>
	<ul class="clearfix">
		<li><a href="#"><span class="fontawesome-user"></span></a>
			<ul>
				<li><a href="#" class="facebook"><span class="fontawesome-facebook"></span></a></li>
				<li><a href="#" class="twitter"><span class="fontawesome-twitter"></span></a></li>
				<li><a href="#" class="google-plus"><span class="fontawesome-google-plus"></span></a></li>
				<li><a href="#" class="linkedin"><span class="fontawesome-linkedin"></span></a></li>
				<li><a href="#" class="github"><span class="fontawesome-github"></span></a></li>
			</ul>
		</li>
	</ul>
</nav>