Générer un ruban / ribbon 3D en CSS pour son site web

Très tendance sur les Web Design du moment, les rubans ou ribbons peuvent être créés à l'aide de CSS. Voici comment générer le code en quelques clics!

CSS3D met à notre disposition un outil gratuit pour générer notre propre ruban personnalisable.

Dans un premier temps, vous êtes invités à choisir les couleurs et les ID des éléments HTML.

Ensuite vous pourrez définir les tailles de chaque partie du ruban, détaillées dans un schéma clair et bien pratique.

Une fois configuré, vous cliquez sur le bouton "Generate", et vous obtiendrez une preview de votre ruban ainsi que son code HTML et CSS:

    <div class="ribbon-wrapper">
        <div class="ribbon-front">
            <!-- ribbon text goes here -->
        </div>
        <div class="ribbon-edge-topleft"></div>
        <div class="ribbon-edge-topright"></div>
        <div class="ribbon-edge-bottomleft"></div>
        <div class="ribbon-edge-bottomright"></div>
        <div class="ribbon-back-left"></div>
        <div class="ribbon-back-right"></div>
    </div>

et le CSS:

/* ribbon style */

 .ribbon-wrapper {
    position: relative;
}
  .ribbon-front {
    background-color: #512112;    height: 40px;
    width: 140px;
    position: relative;
    left:-20px;
    z-index: 2;
}

  .ribbon-front,
  .ribbon-back-left,
  .ribbon-back-right
{
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    -o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright,
  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
    position: absolute;
    z-index: 1;
    border-style:solid;
    height:0px;
    width:0px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright {
}

  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
    top: 40px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-bottomleft {
    left: -20px;
    border-color: transparent #1A0C07 transparent transparent;
}

  .ribbon-edge-topleft {
    top: -10px;
    border-width: 10px 20px 0 0;
}
  .ribbon-edge-bottomleft {
    border-width: 0 20px 0px 0;
}

  .ribbon-edge-topright,
  .ribbon-edge-bottomright {
    left: 100px;
    border-color: transparent transparent transparent #1A0C07;
}

  .ribbon-edge-topright {
    top: -10px;
    border-width: 10px 0 0 20px;
}
  .ribbon-edge-bottomright {
    border-width: 0 0 0px 20px;
}

  .ribbon-back-left {
    position: absolute;
    top: -10px;
    left: 0px;
    width: 0px;
    height: 40px;
    background-color: #61392D;    z-index: 0;
}

  .ribbon-back-right {
    position: absolute;
    top: -10px;
    right: 0px;
    width: 0px;
    height: 40px;
    background-color: #61392D;    z-index: 0;
}

Sympa non ? Le ruban est compatible tous navigateurs (IE7+).

Site Officiel