Html - Css - Eglence - Ve Fazlası




 
AnasayfaKayıt OlGiriş yap

Paylaş | 
 

 İceBlue Tasarım Yapma

Önceki başlık Sonraki başlık Aşağa gitmek 
YazarMesaj
Rackham
Üye
Üye
avatar

Mesaj Sayısı Mesaj Sayısı : 6
Rep Gücü Rep Gücü : 0
Kayıt tarihi Kayıt tarihi : 11/12/09

MesajKonu: İceBlue Tasarım Yapma   Cuma 11 Ara. 2009 - 15:54

Hayırlı Gunler Kardeşlerim Size Bugun İce Blue Tasarım Yapmayı Gostericem..Kusurlarım Olursa Affola..İlk önce katmanları belli olan ice blue tasarımının taslağını çıkaralım.Bu epey zahmetli bir iş olduğu için önceden yaptım ben...

ALINTIDIR


Kod:
<style type="text/css">
<!--
table {margin-left: auto;margin-right: auto}

/* Tasarımın Arka Planı */
body {
background-color:#343434;
background-image:url(Arka Plan);
}

/* Font Özellikkleri Tüm Sayfalarda */
td {
color:#000000;
font-size:14px;
text-align:left;
font-family: arial,verdana; }

/* Link Özellikleri */
a:link {
color:#000080;
font-size:14px;
font-family:arial,verdana;
text-decoration:none; }

/* Ziyaret Edilen Link Özellikleri */
a:visited {
color:#800000;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;}

/*Hover Effekti Özellikleri*/
a:hover{
color:#000080;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;}

/* Başlık Resmi */
td.edit_header_full {
background-color:#c0c0c0;
background-image:url(Başlık Resmi Url);
background-repeat:no-repeat; }

/* Header Yazısı */
td.headline {visibility:hidden;}

/* Menü Baş Kısım */
td.nav_heading {
padding-left:5px;
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana;
font-weight:600;
height:27px;
background-color:#2b4f7a;
background-image:url(Sol Menü Ana Başlık Resimi);
border:1px solid #000; }

/* Menü Butonları */
td.nav {
background-color:#ccc;
background-image: url(Sol Menü Buton 1);
border:1px solid #000; }

/* Menü Buton Hover */
td.nav:hover {
background-color:#ccc;
background-image:url(Sol Menü Buton 2);
border:1px solid #000;}

/* Text Linklerin Özellikleri */
td.nav a {
color:#000000;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;
font-weight:500;
text-align:left; }

/* TextLinklerin Hover Özellikleri */
td.nav a:hover{
color:#000000;
font-weight:500;
font-size:14px;
font-family:arial,verdana;
text-decoration:none;
text-align:left; }

/* Resim Engelle */
td.edit_below_nav {display:none;}

/* Kaydırma Çubuklarını Engelle */
td.edit_main_tr {
height: 50% !important; }

/* İçerik Ana Menü */
td.edit_navi_headbg {
height: 50%;
background-color:#XXXXXX ;
background-image:url();
border:0px solid #000000; }

/* İçerik Ana Menü 2 */
td.edit_content_top {
height:27px;
background-color:#2f4b7a;
background-image:url(İçerik Menüsü Resimi);
border:1px solid #000; }

/* Bar Metin alanı */
td.headline2 {
color:#FFFFFF;
font-size:12px;
font-family:arial,verdana;
text-align:left; }

/* Metin alanı */
td.edit_content {
width:610px;
background-color:#FFFFFF;
background-image: url();
border:1px solid #000; }

/* Orta Kısım Sol Taraf */
td.edit_content_left_spacer {
background-color:#f3f3f3;
background-image:url(); }

/* Orta Kısım Sağ Taraf */
td.edit_content_right_spacer {
background-color:#f3f3f3;
background-image:url(); }

/* Alt Bar */
td.edit_content_bottom {
height:29px;
background-color:#000000;
background-image: url(Alt Bar Resimi);
border:1px solid #000000; }

/* Sayaç */
td.edit_content_bottom2 {
background-color:#XXXXXX ;
background-image: url();
border:0px solid #000000; }

/* Sayaç Özellikleri */
td.edit_content_bottom2_counter {
font-family:arial,verdana;
font-size:14px;
color:#000;
background-color:#c9c9c9;
border:1px solid #000000; }

/* Metin Alanı / Büyük Kutu */
td.edit_rechts_cbg {
background-color:#XXXXXX;
background-image: url();
border:0px solid #000000; }

/* Sağ Sütün / Sağ Şerit */
td.edit_rechts_sbg {display:none;}

/* Sağ Kutu / Başlık */
td.sidebar_heading {
padding-right:5px;
color:#FFFFFF;
font-size:14px;
font-family:arial,verdana ;
text-align:center;
font-weight:600px;
height:27px;
background-color:#000000;
background-image: url(Sağ Navbar Resimi);
border:1px solid #000000; }

/* Sağ Kutu / Orta alan */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color:#000080;
font-size:14px;
font-family.arial,verdana;
text-align:left;
background-color:#F2F2F2;
background-image: url();
border:1px solid #000000; }

/* Sağ Kutu / Son Kısım(Footer) */
td.edit_rb_footer{display:none; }

/* Sağ Kutular / Arka Plan */
td.edit_rechts_bottom {
background-color:#XXXXXX ;
background-image: url();
border:0px solid #000000; }

-->
</style>


Gördüğünüz taslak kodumuz budur.Kodumuzun bazı yerlerinde değişiklik yaparak ice bluede çok güzel işler çıkartacaz...

Baştan başlayalım kodları inceleyemeye....

Genel Özellikler


Alıntı :
/* Tasarımın Arka Planı */
body {
background-color:#343434; /* Arka plan rengini belirler. */
background-image:url(Arka Plan Resim Urlsi); /* Arka plan resmini belirler. */
}


Font Özellikleri

Alıntı :
/* Font Özellikkleri Tüm Sayfalarda */
td {
color:#000000; /* Yazıların renigini belirleyebilirsiniz.(Şuan Siyah) */
font-size:14px; /* Yazıların boyutunu pixel cinsinden belirler. */
text-align:left; /* Yazıların nereye dayalı olmasını belirler.Left=Sol */
font-family: arial,verdana; /* Yazıların türünü belirler. */
}

Link Ozellikleri
Alıntı :
/* Link Özellikleri */
a:link { /* Link Özellikleri */
color:#000080; /* Linklerin aktif olmadan önceki rengi. */
font-size:14px; /* Linklerin boyutu. */
font-family:arial,verdana; /* Linklerin yazı fontları */
text-decoration:none; /* Linklerin dekor özellikleri(altı çizili gibi). */
}

/* Ziyaret Edilen Link Özellikleri */
a:visited { /* Ziyaret Edilen Link Özellikleri (Tıklanan) */
color:#800000; /* Linklerin ziyaret edildikten sonraki renkleri */
font-size:14px; /* Linklerin ziyaret edildikten sonraki boyutu */
font-family:arial,verdana; /* Linklerin ziyaret edildikten sonraki fontu. */
text-decoration:none; /* Linklerin ziyaret edildikten dekor özellikleri(altı çizi) */
}

/*Hover Effekti Özellikleri*/
a:hover{ /* Linklerin üzerine gelinceki durumu (Effekt) */
color:#000080; /* Linklerine üzerindeyken yazı rengi */
font-size:14px; /* Linklerin üzerindeyken font boyutu. */
font-family:arial,verdana; /* Linklerin üzerindeyken font türü. */
text-decoration:none;/* Linklerin üzerindeyken dekor özellikleri(altı çizi) */
}

Header (Başlık) Özellikleri

Alıntı :
/* Başlık Resmi */
td.edit_header_full {
background-color:#c0c0c0; /* Başlık resmi arka plan rengi.*/
background-image:url(Başlık Resmi Url);/* Başlık resmi urlsi. */
background-repeat:no-repeat;/* Başlık resminin tekrar edip etmemesi. */
}

/* Header Yazısı */
td.headline {visibility:hidden;} /* Site titlesini yani başlık yazını kaldırmak.*/

Sol Menü Özellikleri

Kod:
[quote][quote]/* Menü Baş Kısım */
td.nav_heading {
padding-left:5px; /* Soldan ne kadar boşluk verileceği. */
color:#FFFFFF; /* Menü yazısının rengi */
font-size:14px; /* Menü yazının font büyüklüğü  */
font-family:arial,verdana; /* Menü yazının font türü */
height:27px; /* Menü arka planın boyutu */
background-color:#2b4f7a; /* Menü arka plan rengi */
background-image:url(Sol Menü Ana Başlık Resimi); /* Menü arka plan resmi */
border:1px solid #000; /* Menü border özellikleri. */
}

/* Menü Butonları */
td.nav {
background-color:#ccc; /* Menü butonlarının üstüne gelmeden önce arka plan rengi */
background-image: url(Sol Menü Buton 1); /* Menü butonlarının üstüne gelmeden önceki resimi */
border:1px solid #000; /* Border özellikleri */
}

/* Menü Buton Hover */
td.nav:hover {
background-color:#ccc; /* Menü butonlarının üstüne geldikten sonra arka plan rengi */
background-image:url(Sol Menü Buton 2);/* Menü butonlarının üstüne geldikten sonraki resimi */
border:1px solid #000;} /* Border özellikleri */

/* Text Linklerin Özellikleri */
td.nav a {
color:#000000; /* Menüdeki linklerin rengi */
font-size:14px; /* Menüdeki linklerin boyutu */
font-family:arial,verdana; /* Menüdeki linklerin font türü. */
text-decoration:none; /* Menüdeki linklerin dekor özelliği*/
text-align:left; /* Menüdeki nereye dayalı olduğu */
}

/* Text Linklerin Hover Özellikleri */
td.nav a:hover{
color:#000000; /* Menüdeki linklerin üstüne gelicenki rengi */
font-size:14px; /* Menüdeki linklerin  üstüne gelinceki boyutu */[/quote]
font-family:arial,verdana; /* Menüdeki linklerin üstüne gelinceki font türü*/
text-decoration:none; /* Menüdeki linklerin üstüne gelinceki dekor özelliği */
text-align:left; /* Menüdeki linklerin üstüne gelinceki nereye dayalı olduğu.*/
}[/quote]


İçerik Kısmı Özellikleri

[quote]/* İçerik Kısmı Arka Planı */
td.edit_navi_headbg {
height: 50%;
background-color:#XXXXXX ;
background-image:url();
border:0px solid #000000; }

/* İçerik Ana Menü */
td.edit_content_top {
height:27px; /* İçerik alanı menü uzunluğu */
background-color:#2f4b7a; /* İçerik alanı menü arka planı */
background-image:url(İçerik Menüsü Resimi); /* İçerik alanı menü arka plan resmi */
borde[/quote]r:1px solid #000; /* Border özellikleri */
}

[quote]/* İçerik Ana Menü Yazı */
td.headline2 {
color:#FFFFFF; /* Menü yazı rengi */
font-size:12px; /* Menü yazısı boyutu. */
font-family:arial,verdana; /* Menü yazısı font türü */
text-align:left;  /* Menü yazısının nereye dayalı olduğu. */
}
/* Metin alanı */
td.edit_content {
width:610px; /* Metin alanı uzunluğu */
background-color:#FFFFFF; /* Metin alanı arka plan rengi */
background-image: url(); /* Metin alanı arka plan resmi */
border:1px solid #000; /* Border özellikleri */
}

/* Orta Kısım Sol Taraf */
td.edit_content_left_spacer {
background-color:#f3f3f3; /* Metin alanı sol kenar rengi */
background-image:url(); /* Metin alanı sol kenar resmi */
}

/* Orta Kısım Sağ Taraf */
td.edit_content_right_spacer {
background-color:#f3f3f3; /* Metin alanı sağ kenar rengi */
background-image:url(); /* Metin alanı sağ kenar resmi */ }

/* Alt Bar */
td.edit_content_bottom {
height:29px; /* Alt bar yükseliği */
background-color:#000000; /* Alt bar arkaplan rengi */
background-image: url(Alt Bar Resimi); /* Alt bar arka plan resmi */
border:1px solid #000000; } [/quote]

Sayaç Alanı Özellikleri

[code]/* Sayaç */
td.edit_content_bottom2 {
background-color:#XXXXXX ; /* Sayaç alanı arka plan rengi */
background-image: url(); /* Sayaç alanı arka plan resmi */
border:0px solid #000000; /* Border özellikleri */
}

/* Sayaç Özellikleri */
td.edit_content_bottom2_counter {
font-family:arial,verdana; /* Sayaç font türü */
font-size:14px;  /* Sayaç font boyutu */
color:#000; /* Sayaç font rengi */
background-color:#c9c9c9;  /* Sayaç arka plan rengi */
border:1px solid #000000;  /* Border özellikleri */
}[/code]


Sağ Taraf Özellikleri

/* Sağ Sütün / Sağ Şerit */
td.edit_rechts_sbg {display:none;} /* Sağ tarafın en dış kısmı * /

/* Sağ Kutu / Başlık */
td.sidebar_heading {
padding-right:5px; /* Sağ kutunun menü yazsının sağa uazaklığı */
color:#FFFFFF; /* Sağ kutunun menü rengi */
font-size:14px; /* Sağ kutunun menü font boyutu */
font-family:arial,verdana ; /* Sağ kutunun font türü */
text-align:center; /* Sağ kutunun ont ortalaması */
height:27px; /* Sağ kutu menü yüksekliği */
background-color:#000000; /* Sağ kutu menü arka plan rengi */
background-image: url(Sağ Navbar Resimi); /* Saü kutu menü arka plan resmi */
border:1px solid #000000; /* Sağ kutu border özellikler */
}

/* Sağ Kutu / Orta alan */
td.shouty, .shouty2, .shouty3, .shouty4, .shouty5 {
color:#000080; / Sağ kutular yazı rengi */
font-size:14px; /* Sağ kutular font boyutu */
font-family.arial,verdana; /* Sağ kutular font türü */
text-align:left; /* Sağ kutular yazı ortalaması */
background-color:#F2F2F2; /* Sağ kutular arka plan rengi */
background-image: url(); /* Sağ kutular ark plan boyutu */
border:1px solid #000000; /* Sağ kutular border özellikleri */
}

/* Sağ Kutu / Son Kısım(Footer) */
td.edit_rb_footer{display:none; /* Sağ kutuların footer özelliği (gözükmüyor) */

/* Sağ Kutular / Arka Plan */
td.edit_rechts_bottom {
background-color:#XXXXXX ; /* Sağ kutular arka plan rengi */
background-image: url(); /* Sağ kutular arka plan resmi */
border:0px solid #000000;  /* Sağ kutular border özellikleri */
}

Gördüğünüz gibi nerdeyse tüm anlamları, nasıl yapıldıklaı yanlarında yazıyor...Birde resim görelim


[Resimleri görebilmek için üye olun veya giriş yapın.]

Alıntı :
Alıntıdır.. Hyperend.tr.gg sitesinden alıntıdır..!


BlueFarm.Tr.GG Tarafından Sizlere Sunulmustur.. Bir Tesekkur Yeter [Linkleri görebilmek için üye olun veya giriş yapın.]
Sayfa başına dön Aşağa gitmek
MusallaTR
Admin
Admin
avatar

Mesaj Sayısı Mesaj Sayısı : 410
Rep Gücü Rep Gücü : 33
Doğum tarihi Doğum tarihi : 10/08/94
Kayıt tarihi Kayıt tarihi : 10/09/09
Nerden Nerden : İzmir
Ruh Hali Ruh Hali :

MesajKonu: Geri: İceBlue Tasarım Yapma   Cuma 11 Ara. 2009 - 16:02

Saol

_____________________________________________________________________________

[Resimleri görebilmek için üye olun veya giriş yapın.]
Sayfa başına dön Aşağa gitmek
http://citycss.zforum.biz
Pashaa
General
General
avatar

Mesaj Sayısı Mesaj Sayısı : 603
Rep Gücü Rep Gücü : 22
Doğum tarihi Doğum tarihi : 24/02/96
Kayıt tarihi Kayıt tarihi : 10/09/09
Nerden Nerden : BuRSa
Ruh Hali Ruh Hali :

MesajKonu: Geri: İceBlue Tasarım Yapma   Cuma 2 Nis. 2010 - 20:30

Paylasım İçin saol eline sağlık
Sayfa başına dön Aşağa gitmek
http://www.ayarsizpaylasim.tr.gg
graffirap
Cavus
Cavus
avatar

Mesaj Sayısı Mesaj Sayısı : 83
Rep Gücü Rep Gücü : 3
Doğum tarihi Doğum tarihi : 23/09/95
Kayıt tarihi Kayıt tarihi : 30/06/10
Nerden Nerden : Ankara
Ruh Hali Ruh Hali :

MesajKonu: Geri: İceBlue Tasarım Yapma   Perş. 1 Tem. 2010 - 19:42

paylasim için tşekkrler
Sayfa başına dön Aşağa gitmek
http://www.08oyun.tr.gg
 
İceBlue Tasarım Yapma
Önceki başlık Sonraki başlık Sayfa başına dön 
1 sayfadaki 1 sayfası

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
Html - Css - Eglence - Ve Fazlası :: Tr.Gg Dünyası :: İceblue Tasarımlar-
Buraya geçin: