Menü kódja
<div align="center">
<div class="ribbon">
<a href="/"><span>Home</span></a> <a href="/"><span>Leírások</span></a> <a href="/"><span>Kódok</span></a> <a href="/"><span>Grafika</span></a> <a href="http://users2.smartgb.com/g/g.php?a=s&i=g24-02933-45"><span>Vendégkönyv</span></a>
</div>
</div>
CSS kód
<style type="text/css">
.ribbon {
display:inline-block;
font-family: georgia;
font-size: 14px;
}
.ribbon:after, .ribbon:before {
margin-top:0.5em;
float:left;
content: "";
border:1.5em solid #52a8c8;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
color:#ffffff;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
font-family: georgia;
}
.ribbon span {
background:#52a8c8;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition:
background-color 0.2s,
margin-top 0.2s;
-moz-transition:
background-color 0.2s,
margin-top 0.2s;
-ms-transition:
background-color 0.2s,
margin-top 0.2s;
-o-transition:
background-color 0.2s,
margin-top 0.2s;
transition:
background-color 0.2s,
margin-top 0.2s;
}
.ribbon a:hover span {
background:#FFD204;
margin-top:0;
font-family: georgia;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #000000;
border-bottom:0.5em solid #fff;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #000000;
border-bottom:0.5em solid #fff;
}</style>
2 881 megtekintés