Css3 ile Sosyal Ağların İkonlarını Yapalım.

bulutuzer-sosyal-eklentiMerhaba arkadaşlar ayda bir konu girdiğimi belirtmiştim ama bu sefer iş güç derken gerçekten de ara bir ay açıldı o yüzden ocak ayının konusunu iki farklı konu gireceğimi belirtmiştim ilk olarak ne yapsam ne yapsam diye düşünürken bir yerde bir eklenti karşıma çıktı ve bende yapıcam dedim öncelikle tabiki tasarımından başladık tabi bu tasarımı yapıp bitireli 2.5 hafta oldu 🙂 bugünde php yazılımını yapıp wordpress eklentisi haline çevirmeye çalışıyorum.Umarım biran önce bitirebilirim saat 23:15 çünkü.Neyse zaman kaybetmeyelim ve tasarımımıza bakalım.

Demo Adres : Sosyal-Eklenti Demo Adresi

Aslında gerçekten çok basit bir yapıda bu arada eklentiyi sidebar alanı için yapıyorum.Basit tasarımımızda tek farklı olan şey ikonların bir çoğunu css3 kullanarak yapmaya çalıştım ki güzel olduklarını düşünmekteyim pinterest harici benzer fontunu bulmak sıkıntılı oldu nedense bir font 83$ ve ücretsizini bulmak çok zor.Gerekli html ve css kodları aşşağıda belirttim yazılımını yaptığımda ayrı bir konu altında ince ince nasıl yaptığımı anlatacağım.

Html dosyamızın içeriği
Burada iki şeye dikkat etmemiz gerekecek, birincisi content classlı divlerimizin arasına, sebebi ise bu divlerimizin arasına sosyal ağlarımızın kodları gelecektir diğer konuda göreceksiniz zaten, diğer dikkat etmemiz gereken wrap classlı divlerimiz burada ise istenilen sosyal ağların gözüküp gözükmemesi için ilerleyen zamanlarda bir id atayıp örnek olarak id 1 ise facebooku göster 0 ise gösterme gibi bir kontrol yapısından geçirip daha iyi bir seçenek sunucaz kullanıcılara.


www.bulutuzer.com
		<link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="jquery-1.7.1.min.js"></script><script type="text/javascript" src="sosyal-eklenti.js"></script></pre>
<section>
<div class="wrap"><header id="face">
<div class="face-logo">
<h1>f</h1>
</div>
<h2>facebook</h2>
<div class="clear"></div>
</header>
<div class="content"></div>
</div>
<div class="wrap"><header id="twit">
<div class="twit-logo"></div>
<h2>twitter</h2>
<div class="clear"></div>
</header></div>
<div class="wrap"><header id="linkedin">
<div class="linkedin-logo">
<h1>in</h1>
</div>
<h2>linkedin</h2>
<div class="clear"></div>
</header>
<div class="content"></div>
</div>
<div class="wrap"><header id="gPlus">
<div class="gPlus-logo">
<h1>g+</h1>
</div>
<h2>google plus</h2>
<div class="clear"></div>
</header>
<div class="content"></div>
</div>
<div class="wrap"><header id="pint">
<div class="pint-logo">
<h1>P</h1>
</div>
<h2>pinterest</h2>
<div class="clear"></div>
</header></div>
<div class="wrap"><header id="flickr">
<div class="flickr-logo"></div>
<h2>flickr</h2>
<div class="clear"></div>
</header></div>
<div class="wrap"><header id="yTube">
<div class="yTube-logo"></div>
<h2>youtube</h2>
<div class="clear"></div>
</header></div>
<div class="wrap"><header id="vimeo">
<div class="vimeo-logo">
<h1>v</h1>
</div>
<h2>vimeo</h2>
<div class="clear"></div>
</header></div>
<div class="wrap"><header id="dribble">
<div class="dribble-logo"></div>
<h2>dribble</h2>
<div class="clear"></div>
</header></div>
<div class="wrap"><header id="inst">
<div class="inst-logo"></div>
<h2>instagram</h2>
<div class="clear"></div>
</header></div>
<div class="wrap"><header id="rss">
<div class="rss-logo"></div>
<h2>rss</h2>
<div class="clear"></div>
</header></div>
<div class="clear"></div>
</section>
<pre>

Css dosyamızın içeriği

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

		ul,li,a {
			list-style: none;
		}

		.clear { clear: both; }

		h2 {
			color: rgb(181,181,181);
			float: left;
			font-family: arial;
			font-size: 15px;
			padding: 4px 10px;
		}

		section {
			width: 65%;
		}

		header {
			width: 228px;
			border: 1px solid rgb(59,89,152);
			padding: 5px;
			margin-bottom: 10px;
		}

		header#twit {
			border: 1px solid rgb(0,160,209);
		}

		header#linkedin {
			border: 1px solid rgb(0,102,153);
		}

		header#gPlus {
			border: 1px solid rgb(196,48,40);
		}

		header#pint {
			border: 1px solid rgb(203,32,39);
		}

		header#flickr {
			border: 1px solid rgb(255,0,132);
		}

		header#yTube {
			border: 1px solid rgb(205,50,44);
		}

		header#vimeo {
			border: 1px solid rgb(68,187,255);
		}

		header#dribble {
			border: 1px solid rgb(237,83,146);
		}

		header#inst {
			border: 1px solid rgb(54,27,18);
		}

		header#rss {
			border: 1px solid rgb(255,148,0);
		}

		.wrap {
			float: left;
			height: 0px;
			width: 240px;
			border: 2px solid rgb(255,255,255);
			padding: 0px;
			margin: 10px 10px 40px 10px;
			transition:border 0.5s, width 0.5s, height 0.5s, padding 0.5s, margin 0.5s;
			-moz-transition:border 0.5s, width 0.5s, height 0.5s, padding 0.5s, margin 0.5s; /* Firefox 4 */
			-webkit-transition:border 0.5s, width 0.5s, height 0.5s, padding 0.5s, margin 0.5s; /* Safari and Chrome */
			-o-transition:border 0.5s, width 0.5s, height 0.5s, padding 0.5s, margin 0.5s; /* Opera */
		}

		.wraps {
			margin: 10px 10px 10px 12px;
			height: 10%;
			width: 240px;
			border: 2px solid rgb(150,150,150);
			padding: 10px;
		}

		.content {
			display: none;
			transition: display 0.1;
		}

		.contents {
			display: block;
		}

		/* face */
		.face-logo {
			background: rgb(59,89,152);
			padding: 2px 8px 3px;
			font-size: 15px;
			height: 20px;
			width: 8px;
			border-radius: 3px ;
			-webkit-border-radius: 3px;
			-o-border-radius: 3px;
			float: left;
		}

		.face-logo h1 {
			font-family: Lucida Sans Unicode;
			font-weight: bold;
			color: rgb(255,255,255);
		}

		/* twitter */
		.twit-logo {
			background: url(image/twit.png) rgb(0,160,209) center center no-repeat;
			padding: 2px 8px 3px;
			height: 20px;
			width: 8px;
			border-radius: 3px ;
			-webkit-border-radius: 3px;
			-o-border-radius: 3px;
			float: left;
		}

		/* linkedin */
		.linkedin-logo {
			background: rgb(0,102,153) center center no-repeat;
			font-size: 13px;
			height: 25px;
			width: 24px;
			border-radius: 3px ;
			-webkit-border-radius: 3px;
			-o-border-radius: 3px;
			float: left;
		}

		.linkedin-logo h1 {
			font-family: Myriad Pro;
			font-weight: bold;
			text-align: center;
			color: rgb(255,255,255);
		}

		/* google plus */
		.gPlus-logo {
			background: rgb(213,63,53) center center no-repeat;
			font-size: 12px;
			height: 25px;
			width: 24px;
			border-radius: 3px ;
			-webkit-border-radius: 3px;
			-o-border-radius: 3px;
			float: left;
		}

		.gPlus-logo h1 {
			font-family: seoge ui;
			font-weight: bold;
			text-align: center;
			color: rgb(255,255,255);
		}

		/* pinterest */

		@font-face {
			font-family:pint-erest;
			src: url('uFont/pint-erest.eot');
			src: local('pint erest'),
			local('pinterest'),
			url('uFont/pint-erest.woff') format('woff'),
			url('uFont/pint-erest.ttf') format('truetype'),
			url('uFont/pint-erest.svg#pinterest') format('svg');
		}

		.pint-logo {
			background: rgb(203,32,39) center center no-repeat;
			font-size: 11px;
			height: 25px;
			width: 24px;
			border-radius: 12px 12px 13px 13px ;
			-webkit-border-radius: 12px 12px 13px 13px;
			-o-border-radius: 12px 12px 13px 13px;
			float: left;
		}

		.pint-logo h1 {
			font-family: 'pint-erest',Arial, sans serif;
			font-weight: bold;
			text-align: center;
			color: rgb(255,255,255);
		}

		/* flickr */

		.flickr-logo {
			height: 10px;
			width: 24px;
			padding: 8px 0px 0px 0px;
			border-radius: 8px 12px 13px 13px ;
			-webkit-border-radius: 12px 12px 13px 13px;
			-o-border-radius: 12px 12px 13px 13px;
			float: left;
		}

		.flickr-pink {
			background: rgb(255,0,132);
			height: 10px;
			width: 10px;
			border-radius: 12px 12px 13px 13px ;
			-webkit-border-radius: 12px 12px 13px 13px;
			-o-border-radius: 12px 12px 13px 13px;
			float: left;
		}

		.flickr-blue {
			background: rgb(0,99,220) center center no-repeat;
			height: 10px;
			width: 10px;
			border-radius: 12px 12px 13px 13px ;
			-webkit-border-radius: 12px 12px 13px 13px;
			-o-border-radius: 12px 12px 13px 13px;
			float: left;
		}

		.flickr-logo h1 {
			font-family: myriad;
			font-weight: bold;
			text-align: center;
			color: rgb(255,255,255);
		}

		/* youtube */

		.yTube-logo{
			background: rgb(205,50,44);
			float: left;
			height: 21px;
			width: 28px;
			padding: 5px 0px 0px 20px;
			border-radius: 4px;
			-webkit-border-radius: 4px;
			-o-border-radius: 4px;

		}

		.yTube-logo h1 {
			border-bottom: 8px solid transparent;
			border-left: 13px solid rgb(255,255,255);
			border-top: 8px solid transparent;
		}

		/* vimeo */

		@font-face {
			font-family:vimeo-font;
			src: url('vFont/vimeo-font.eot');
			src: local('vimeo font'),
			local('vimeofont'),
			url('vFont/vimeo-font.woff') format('woff'),
			url('vFont/vimeo-font.ttf') format('truetype'),
			url('vFont/vimeo-font.svg#vimeofont') format('svg');
		}

		.vimeo-logo {
			background: rgb(68,187,255);
			font-size: 13px;
			height: 25px;
			width: 25px;
			border-radius: 3px ;
			-webkit-border-radius: 3px;
			-o-border-radius: 3px;
			float: left;
		}

		.vimeo-logo h1 {
			font-family: 'vimeo-font',arial,sans serif;
			font-weight: bold;
			text-align: center;
			color: rgb(255,255,255);
		}

		/* dribble */

		.dribble-logo {
			background: url('image/dribble.png') center center no-repeat;
			width: 25px;
			height: 24px;
			padding: 2px 0px 0px 0px;
			float: left;
		}

		/* instgram */

		.inst-logo {
			background: url('image/instagram.png') center center no-repeat;
			width: 25px;
			height: 24px;
			float: left;
		}

		/* rss */

		.rss-logo {
			background: url('image/rss.png') center center no-repeat;
			width: 25px;
			height: 24px;
			padding: 2px 0px 0px 0px;
			float: left;
		}

Sosyal-eklenti.js dosyamızın içeriği
Javascript dosyamızın içeriği çok basit burda wrap classlı divlerimizi üstüne tıkladığımız zaman yeni bir class atıyarak açılıp yada kapanmasını sağlıyoruz class ne diye atadın derseniz farkındaysanız demo adreste tablar açılırken bir efekt ile açılıyor ve tekrar javascript kodlarımıza bakarsak burda bir efekt uygulamadığımız göze çarpıyor yani css3 ün transform özelliğini kullanmaya çalıştım.

		$(document).ready(function (){
			$(".wrap").toggle(
				function() {
					$(this).addClass("wraps");
					$(this).find(".content").show("fast");
				},function(){
					$(this).removeClass("wraps");
					$(this).find(".content").hide("fast");
			});
});

Dediğim gibi tasarım basit sade ama hoş :).Diğer konuda da wordpress eklentisi haline getirip buraya nasıl yaptığımı anlatacağım.Fontları uploadladım ve aynı şekilde resimleride zip dosyası içinde mevcut olacak bir sıkıntı veyahutta takıldığınız bir nokta olursa yorum olarak belirtirseniz sevinirim kolay gelsin.

Demo Adres : Sosyal-eklenti tasarımı demo adresi
Kaynak Dosyalar : Kaynak Dosya İndir

Yayınlayan

Bulut Üzer

Web ortamında gelişmesine yardımcı olan Yusuf Doru sayesinde şuan web developer olarak ilerlemekte.Web ve mobil ortamlarda uygulama geliştirmeye çalışmak da.Ayrı yeten de kişisel blogunda web ve php ile ilgili çalışmalarını ve deneyimlerini paylaşmayı hedeflemekte.

“Css3 ile Sosyal Ağların İkonlarını Yapalım.” üzerine 2 yorum

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir