Css Footer örneğim
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Css Footer örneğim

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2988)
RAPOR ET
Bir sitede gördüğüm footer tasarımını kendim kodlamak istedim.Sonuçta hemen hemen aynı bir tasarım yaptım.Boş durmaması için paylaşmak istedim.

indir : http://ustaderslik.com/dosya/footer.rar

Görüntüsü :
http://ustaderslik.com/resim/ders/u29q2.png

Kodlar :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<title>UstaDerslik</title>
<script type="text/javascript">

</script>
<style type="text/css">
body{margin:0px;padding:0px;}
.f_ana{width:980px;height:275px;margin:auto;overflow:hidden;position:relative;}
.f_kisim1{width:580px;height:275px;transform:skew(20deg);-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg);position:absolute;top:0px;left:-200px;z-index:5;
background-image: linear-gradient(bottom, rgb(54,94,114) 0%, rgb(112,175,205) 81%);
background-image: -o-linear-gradient(bottom, rgb(54,94,114) 0%, rgb(112,175,205) 81%);
background-image: -moz-linear-gradient(bottom, rgb(54,94,114) 0%, rgb(112,175,205) 81%);
background-image: -webkit-linear-gradient(bottom, rgb(54,94,114) 0%, rgb(112,175,205) 81%);
background-image: -ms-linear-gradient(bottom, rgb(54,94,114) 0%, rgb(112,175,205) 81%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(54,94,114)),color-stop(0.81, rgb(112,175,205)));
}
.f_kisim2{width:65px;height:225px;background:#d8f9fe;float:left;position:absolute;top:50px;left:390px;z-index:6;transform:skew(20deg);-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg);}
.f_kisim3{width:630px;height:250px;border:1px solid #365e72;background:#70afcd;opacity:.6;position:absolute;top:25px;left:335px;}
.f_kisim4{width:470px;height:225px;float:left;transform:skew(20deg);-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg);list-style-type:none;margin:0px;padding:0px;margin-top:25px;margin-left:100px;}
.f_liste li{display:block;width:85px;height:20px;float:left;font-family:Arial;font-size:12px;color:#333;margin-bottom:5px;cursor:pointer;}
.f_liste li .f_yazi:hover {text-decoration:underline;}
.f_ok{color:#d8f9fe;}
.f_kisim2 img{transform:skew(-20deg);-webkit-transform:skew(-20deg);-moz-transform:skew(-20deg);-o-transform:skew(-20deg);margin-left:10px;margin-top:10px;}

.fb_ana{width:100%;height:75px;background:#365e72;padding:10px;}
.fb_ana2{width:980px;height:75px;margin:auto;}
.fb_yazi{width:780px;height:75px;font-family:Arial;font-size:12px;color:#78a2b6;}


.temiz{clear:both;}
</style>
</head>
<body>

<div class="f_ana">
<div class="f_kisim1"></div>
<div class="f_kisim2">
<img src="f.png" />
<img src="g.png" />
<img src="r.png" />
<img src="t.png" />
</div>
<div class="f_kisim3">
<div class="f_kisim4">
<ul class="f_liste">
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<li><span class="f_ok">> &nbsp;</span><span class="f_yazi">buton</span></li>
<div class="temiz"></div>
</ul>
</div>
<div class="temiz"></div>
</div>
</div>

<div class="fb_ana">
<div class="fb_ana2">
<div class="fb_yazi">
Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz. Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan 2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları) eserinin
</div>
</div>
</div>

</body>
</html>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol