Coins arrondis CSS

tb_roundcornersVoici une exemple parmi tant d’autres de coins arrondis en CSS. Celui-ci s’utilise avec un pixel et a pour avantage de ne pas utiliser d’images donc d’être très léger.

Cet effet un pixel donne l’impression de coin arrondis mais ce n’est pas vraiment une courbe très arrondis, l’on retrouve cet effet dans Google Analytics.
round_corners

Donc pas d’images d’arrière-plan mais plutôt un jeu de tags <b> choisit pour sa longueur égale à une lettre

<ul>
  <li>
    <a href="/">
      <b>
        <b>
            Visitors
        </b>
      </b>
    </a>
  </li>
</ul>

CSS

li a {
  display:block; /* a must */
  border: solid #666;
  border-width: 0 1px; /* left and right borders only */
  text-decoration: none;
  outline:none; /* so as not to distract from the effect */
  color: #000;
  background: #e4e4e4;
}
li a b {
  display: block; /* another must */
  position:relative; /* because the child elements are positioned */
  top: -1px; /* drag it up a little, creates the top notches */
  left: 0;
  border:solid #666;
  border-width:1px 0 0; /* top border only */
  font-weight:normal;
}
li a b b {
  border-width:0 0 1px; /* bottom border only */
  top: 2px; /* pushed down a little to create the bottom notches */
}
li a b b b { /* i don't think three-deep tag is even necessary */
  top:-1px;
  padding: 1px 6px;
  border-width: 0;
}

Cela est donc assez intéressant pour le noter si vous avez besoin d’arrondir légèrement les angles de vos menus
ou divs.
Un exemple sur cette page

1 commentaire

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

3 − deux =

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?