SoftDesign


Bun venit Vizitator pe SoftDesign, speram ca-ti place acest forum care iti pune la dispozitie o gama larga de tutoriale si resurse pentru WebDesign si ForumGratuit , si speram ca vei binevoi sa-ti faci cont pe forum pentru a avea aces la toate subiectele forumui.

[Tutorial]Clay Bricks Menu

In jos

[Tutorial]Clay Bricks Menu

Mesaj Scris de Shaggy la data de Mier Mar 14, 2012 1:29 am

Buna dimineata!
Astazi va voi arata un meniu foarte frumos.
1.Structura Html
Cod:
<div class="topbar"></div>
<ul class="claybricks">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
2.Foia stil Css
Cod:
<style type="text/css">

div.topbar{ /* bar that runs across the top of the menu */
height: 16px;
background: #e16031;
}

ul.claybricks{ /* main menu UL */
font-weight: bold;
width: 100%;
background: #e3e490;
padding: 6px 0 6px 0; /* padding of the 4 sides of the menu */
margin: 0;
text-align: left; /* set value to "left", "center", or "right" to align menu accordingly */
}

ul.claybricks li{
display: inline;
}

ul.claybricks li a{
color:black;
padding: 6px 8px 4px 8px; /* padding of the 4 sides of each menu link */
margin-right: 20px; /* spacing between each menu link */
text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected{
color: white;
background: #5d4137;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%); /* moz syntax for CSS3 gradient */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); /* webkit syntax for CSS3 gradient */
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); /* opera syntax for CSS3 gradient */
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* moz syntax for CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px; /* large padding to get menu item to protrude upwards */
padding-bottom: 6px;
}

</style>
Sursa:dynamicdrive
avatar
Shaggy
Moderator

Sex : masculin
Mesaje : 364
Credite : 2800
Data de inscriere : 06/09/2011
Localizare : Pascani

Vezi profilul utilizatorului http://staraim.forumz.ro/forum

Sus In jos

Re: [Tutorial]Clay Bricks Menu

Mesaj Scris de FastCode la data de Mier Mar 14, 2012 5:33 am

Esti paralel cu codingul. Vrei sa punem aia in "foia de stil css" ? Cu tot cu tagurile html? Smile)
Si nu te-ai chinuit sa pui un preview.
avatar
FastCode
Nou venit

Sex : masculin
Mesaje : 32
Credite : 2281
Data de inscriere : 31/12/2011

Vezi profilul utilizatorului http://help.forumgratuit.ro

Sus In jos

Re: [Tutorial]Clay Bricks Menu

Mesaj Scris de PlayOn la data de Mier Mar 14, 2012 8:45 am

FastCode in css pui :
Cod:
div.topbar{ /* bar that runs across the top of the menu */
height: 16px;
background: #e16031;
}

ul.claybricks{ /* main menu UL */
font-weight: bold;
width: 100%;
background: #e3e490;
padding: 6px 0 6px 0; /* padding of the 4 sides of the menu */
margin: 0;
text-align: left; /* set value to "left", "center", or "right" to align menu accordingly */
}

ul.claybricks li{
display: inline;
}

ul.claybricks li a{
color:black;
padding: 6px 8px 4px 8px; /* padding of the 4 sides of each menu link */
margin-right: 20px; /* spacing between each menu link */
text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected{
color: white;
background: #5d4137;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%); /* moz syntax for CSS3 gradient */
background:
 -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137),
 color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); /* webkit syntax for CSS3 gradient */
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); /* opera syntax for CSS3 gradient */
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* moz syntax for CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px; /* large padding to get menu item to protrude upwards */
padding-bottom: 6px;
}


si in templateuri pui :
Cod:
<div class="topbar"></div>
<ul class="claybricks">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>

si oricum Shaggy , bravo pentru munca depusa !
avatar
PlayOn
Administrator

Sex : masculin
Mesaje : 254
Credite : 2657
Data de inscriere : 06/09/2011
Localizare : ROMANIA

Vezi profilul utilizatorului http://widegfx.forumer.ro

Sus In jos

Re: [Tutorial]Clay Bricks Menu

Mesaj Scris de FastCode la data de Mier Mar 14, 2012 9:22 am

Studio, postezi doar asa ca esti administrator?
Stiam unde trebuie puse, si nu stiu ce munca a depus. A muncit la copierea lor de pe dynamicdrive?
avatar
FastCode
Nou venit

Sex : masculin
Mesaje : 32
Credite : 2281
Data de inscriere : 31/12/2011

Vezi profilul utilizatorului http://help.forumgratuit.ro

Sus In jos

Re: [Tutorial]Clay Bricks Menu

Mesaj Scris de gab1Tzu la data de Sam Mar 24, 2012 8:09 am

Frumos tutorial, felicitari pentru munca depusa Smile
avatar
gab1Tzu
Gold Member

Sex : masculin
Mesaje : 248
Credite : 2612
Data de inscriere : 24/09/2011
Localizare : Craiova

Vezi profilul utilizatorului http://widegfx.forumer.ro

Sus In jos

Re: [Tutorial]Clay Bricks Menu

Mesaj Scris de Continut sponsorizat


Continut sponsorizat


Sus In jos

Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum