FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Css 3 ve HTML 5 in güzellikleri ile bir menü





qlPonqa
Bu tamamen benim yapımımdır, gayet basit bir çalışma ve benim bu forumdaki ilk konum.

Başlarken önce menümüzün şeklini şemalini belirtmek için css bölümünü </head> ve <body> tag larının arasına şu kodu yazarak tanıtıyoruz;

Code:
<style>

#menu{

cursor:pointer;

background:;

width:250px; height:210px;

margin:0px;

color:#fff;

}

.link{

-moz-user-select:none;

-webkit-user-select:none;

float:right;

background:#333333;

font-family:sans-serif;

width:200px; height:35px;

color:#fff;

padding-left:50px;

margin-left:15px;

font-size:20px;

margin:0px;

text-decoration:none;

-moz-transform:scale(1.1);

-webkit-transform:scale(1.1;)

-moz-box-shadow:0px 0px 10px #000;

-webkit-box-shadow:0px 0px 10px #000;

}

.link:hover{

background:#292929;

text-decoration:none;

font-size:20px;

text-shadow:0px 0px 15px #fff;

-webkit-transform:rotate(-7deg) scale(1.2);

 -moz-transform:rotate(-7deg) scale(1.2);

}

.link:active{

background:#363636;

color:#222222;

text-decoration:none;

font-size:20px;

-webkit-transform:rotate(-6deg) scale(1.1);

 -moz-transform:rotate(-6deg) scale(1.1);

}

.link2{

-moz-user-select:none;

-webkit-user-select:none;

float:right;

background:#333333;

font-family:sans-serif;

width:200px; height:35px;

color:#fff;

padding-left:50px;

margin-left:15px;

font-size:20px;

margin:0px;

text-decoration:none;

-moz-transform:scale(1.1);

-webkit-transform:scale(1.1;)

-moz-box-shadow:0px 0px 10px #000;

-webkit-box-shadow:0px 0px 10px #000;

}

.link2:hover{

background:#292929;

text-decoration:none;

font-size:20px;

text-shadow:0px 0px 15px #fff;

-webkit-transform:rotate(3deg) scale(1.2);

 -moz-transform:rotate(3deg) scale(1.2);

}

.link2:active{

background:#363636;

color:#222222;

text-decoration:none;

font-size:20px;

-webkit-transform:rotate(2deg) scale(1.1);

 -moz-transform:rotate(2deg) scale(1.1);



}

</style>



Daha sonra, <body> ile </body> tag ları arasına menümüzü yerleştiriyoruz;

Code:
<div id="menu">

       

        <h1 onclick="document.location='http://www.frihost.org';" class="link">link1</h1>

        <h1 onclick="document.location='http://www.frihost.org';" class="link2">link2</h1>

        <h1 onclick="document.location='http://www.frihost.org';" class="link2">link3</h1>

        <h1 onclick="document.location='http://www.frihost.org';" class="link">link4</h1>

        <h1 onclick="document.location='http://www.frihost.org';" class="link2">link5</h1>

        <h1 onclick="document.location='http://www.frihost.org';" class="link">link6</h1>



    </div>



Yardımım dokunduysa ne mutlu bana..

Başarılar.

qlPonqa x)
meseloz
Aramıza hoş geldin öncelikle...
İlk mesajında böyle kendi çalışmanın ürünü olan bir şeyi paylaşman çok güzel.

Teşekkür ederiz.
qlPonqa
Hoşbulduk.)
kemal44
hoş geldin kanka:D
sayemde sende frihostlu oldun:D

inşallah iyi vakit geçirir ve hostunu alırsınVery Happy
ve o kodu senmi yazdın Very Happy nasıl yazıyon:D
ibrahim43
hoş geldin aramıza.özgün bir paylaşım olmuş, elinize sağlık.devamını bekliyoruz...
ultimatermof
Hoşgeldin öncelikle. Mesaj da güzel gerçekten. Teşekkürler. de... Html 5e ne zaman geçtik yahu? Very Happy
xxrapp3rxx
hoşgeldin kardeş.güzel çalışma eline sağlık
gerimter
Bu tarz şeyylerin paylaşımını ve devamını bekleriz.hoş geldin
darkeagle
Bir ekran görüntüsü eklenmiş olsa çok daha iyi olabileceğini düşünüyorum.
ultimatermof
Bence de ekran görüntüsü lazım.

Hiç denemedim; acaba, bu html5 kodlarını direk html olarak kaydetsek çalışacak mı bilgisayarda? Birşey güncellemek gerekiyor mu?
Related topics
Premade CSS templates--Only 5 frih$!
CSS 3
trillian 3.1.5
[tecn]Como sera el HTML 5
[Aporte] Como pasar de templates PSD a CSS y HTML
HTML 5
HTML 5 será o sucessor do flash?
IMG in CSS and HTML
HTML 5
HTML NOTLARI
HTML 5 and CSS 3
Wordpress HTML 5 Players Review
Whats New in HTML 5
Questions about HTML 5
Reply to topic    Frihost Forum Index -> Language Forums -> Turkish

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.