3 Adet Professional CSS Calismasi - Kesinlikle Kacirmayin

HTML, CSS, JavaScript ile ilgili genel konular.

3 Adet Professional CSS Calismasi - Kesinlikle Kacirmayin

İleti Emexci 27.04.2006, 12:49

Resim[hr]
:proje: Demo: http://themes.te.funpic.de/css_tutorial ... s-two.html
:proje: Orjinal Sitesi: http://cssplay.co.uk/menus/doors-two.html
:proje: Aciklama: Emexci Tasarim Tamamen CSSPLAY

BU MENÜDE hic bir sekilde imaj yani resim yoktur tamamen css nin eseridir
burda css nin ne kadar önemli oldugunu hepimiz anlamis oluyoruz.


iyi css calismalari :)

[hr]
Kullanimi:
a href="#"> olan yerdeki # yerine kendinize ait link adresini verin
Paul, Henri gibi bölümlere ise istediginiz ismi yani menü adini verin (örn, Ana Sayfa)
style css bölümünü </head> tag'inin üstüne ekleyin
HTML li vedigim div ile baslayan dosyalari ise <body> altina ekleyin
CSS
[syntax="css"]
<style type="text/css">

.menu {clear:both; margin-bottom:4em;}
.menu dt {display:none;}
.menu dd {margin:0; padding:0;}
.menu .aa {width:5px; float:left; border-bottom:1px solid #000; background:#bcd;}
.menu .bb {float:left; padding:2px 0 2px 0; border-bottom:1px solid #000; border-top:1px solid #000; background:#bcd; text-align:center;}

.menu .sela {width:5px; float:left; background:#fff; font-size:1em;}
.menu .selb {float:left; padding:2px 0 2px 0; border-top:1px solid #000; background:#fff; color:#f00; font-size:1em; text-align:center;}

.menu .va {width:1px; float:left; border-top:5px solid #fff; background:#000; overflow:hidden;}
.menu .vb {width:1px; float:left; height:1px; background:#ccc; border-top:2px solid #fff; border-bottom:2px solid #000; overflow:hidden;}
.menu .vc {width:1px; float:left; height:1px; background:#ccc; border-top:1px solid #fff; border-bottom:1px solid #000; overflow:hidden;}
.menu .vd {width:2px; float:left; height:1px; background:#000; border-top:1px solid #ccc; overflow:hidden;}

* html .menu .vb {height:5px; he\ight:1px;}
* html .menu .vc {height:3px; he\ight:1px;}
* html .menu .vd {height:2px; he\ight:1px;}



.menu a, .menu a:visited {color:#444; text-decoration:none; font-size:1em; cursor:pointer; background:#c88;}
.menu a:hover {color:#c00; background:#def;}
.menu a:hover .aa, .menu a:hover .bb {background:#def;}

.pad {float:left; color:#fff;}
.padtop {float:left; display:block; padding:0 5px;}


.Stil1 {
font-family: Verdana;
font-weight: bold;
font-size: 14px;
}
[/syntax]

Ince menu - sekildeki 1. menü
[syntax="html"]
<div class="menu">
<dl>
<dt>Artist menu</dt>
<dd><a href="#"><span class="aa"><span class="va">&nbsp;</span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">Paul Cezanne</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va">&nbsp;</span></span></a></dd>
<dd><a href="#"><span class="aa"><span class="va">&nbsp;</span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">Henri Matisse</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va">&nbsp;</span></span></a></dd>

<dd><span class="sela"><span class="va">&nbsp;</span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="selb">William Turner</span><span class="sela"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va">&nbsp;</span></span></dd>
<dd><a href="#"><span class="aa"><span class="va">&nbsp;</span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">John Constable</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va">&nbsp;</span></span></a></dd>
</dl>
</div>
[/syntax]
yüksek menü . sekildeki 2. menü
[syntax="html"]
<div class="menu">
<dl>
<dt>Artist menu</dt>
<dd><a href="#"><span class="aa"><span class="va">&nbsp;<br />&nbsp;</span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">Paul<br />Cezanne</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va">&nbsp;<br />&nbsp;</span></span></a></dd>
<dd><a href="#"><span class="aa"><span class="va">&nbsp;<br />&nbsp;</span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">Henri<br />Matisse</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va">&nbsp;<br />&nbsp;</span></span></a></dd>

<dd><span class="sela"><span class="va">&nbsp;<br />&nbsp;</span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="selb">William<br />&nbsp;Turner&nbsp;</span><span class="sela"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va">&nbsp;<br />&nbsp;</span></span></dd>
<dd><a href="#"><span class="aa"><span class="va">&nbsp;<br />&nbsp;</span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">John<br />Constable</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va">&nbsp;<br />&nbsp;</span></span></a></dd>
</dl>
</div>
[/syntax]
Karma Menü -- sekildeki 3. menü
[syntax="html"]
<div class="menu">
<dl>
<dt>Artist menu</dt>
<dd><a href="#"><span class="aa"><span class="va">&nbsp;<br />&nbsp;</span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">Paul<br />Cezanne</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va">&nbsp;<br />&nbsp;</span></span></a></dd>

<dd><span class="pad"><span class="padtop">Henri Matisse</span><br />
<a href="#"><span class="aa"><span class="va">&nbsp;</span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">Henri Matisse</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va">&nbsp;</span></span></a>
</span></dd>

<dd><span class="sela"><span class="va">&nbsp;<br />&nbsp;</span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="selb">William<br />&nbsp;Turner&nbsp;</span><span class="sela"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va">&nbsp;<br />&nbsp;</span></span></dd>
<dd><a href="#"><span class="aa"><span class="va">&nbsp;<br />&nbsp;</span><span class="vb"></span><span class="vc"></span><span class="vd"></span></span><span class="bb">John<br />Constable</span><span class="aa"><span class="vd"></span><span class="vc"></span><span class="vb"></span><span class="va">&nbsp;<br />&nbsp;</span></span></a></dd>
</dl>
</div>


[/syntax]
Kullanıcı avatarı
Emexci
Üye
Üye
 
İleti: 833
Kayıt: 28.11.2005, 01:07

İleti Cold Fusion 27.02.2007, 21:31

nereye ekliyoruz bunu overall-header.tpl ye mi?
Kullanıcı avatarı
Cold Fusion
Yetkili
Yetkili
 
İleti: 46
Kayıt: 02.02.2007, 16:44
Konum: İstanbul


HTML, CSS, JS



Kimler çevrimiçi

Bu forumu görüntüleyenler: Kayıtlı kullanıcı yok ve 0 misafir