CSS Menu Cercle

CSS Menu Cercle

Une astuce intéressante CSS est la création de «cercles», en utilisant CSS3 de border-radius propriété qui est fixé à une valeur très importante: Lorsque vous faites cela, la frontière de chacun des quatre coins de l'élément de fusionner en une arête continue rondes, créer l'apparence d'un cercle. En utilisant cette astuce chouette petit, le suivant crée une série de liens du menu cercle:

La clé tel que mentionné est juste pour définir la propriété border-radius à une valeur très importante, au moins 50% de la largeur et la hauteur de l'élément:

width: 100px; height: 100px; border-radius:
400px;
/ * rayon frontière très importante pour créer
des frontières rondes * /-moz-border-radius: 
400px;-webkit-border-radius: 400px;

le code CSS

<style type="text/css">

.circlemenu{

width: 100%;

overflow:hidden;

}

.circlemenu ul{

margin: 0;

padding: 0;

font: bold 14px Verdana;

list-style-type: none;

text-align: center; /* "left", "center", or "right" align menu */

}

.circlemenu li{

display: inline;

margin: 0;

}

.circlemenu li a{

display:inline-block;

text-align:center;

text-decoration: none;

color: white;

background:#b72d23;

margin: 0;

margin-right:5px; /*right spacing between each link */

width:100px;

height:100px;

border-radius: 400px; /*really large border radius to create round borders*/

-moz-border-radius: 400px;

-webkit-border-radius: 400px;

}

.circlemenu a span{

position:relative;

top:40%;

}

.circlemenu li a:visited{

color: white;

}

.circlemenu a:hover{

background: #a71b15;

}

</style>

le code html

<div class="circlemenu">

<ul>

<li><a href="VOTRE LIEN"><span>Home</span></a></li>

<li><a href="VOTRE LIEN"><span>DHTML</span></a></li>

<li><a href="VOTRE LIEN"><span>CSS</span></a></li>

<li><a href="VOTRE LIEN"><span>Forums</span></a></li>

<li><a href="VOTRE LIEN"><span>JavaScript</span></a></li>

</ul>

</div>

Posted in: blogger html css menu horizontale