Un ruban CSS 3 !

Il est possible de créer des titres façon bandeau joliment ornementé uniquement en CSS3.
Ci dessus aucune image n'est nécessaire pour créer ce magnifique ruban.
Par contre, comme vous pourriez le deviner, prévoyez un patch pour IE 7 !

Code HTML :

3 div pour afficher le ruban

<div id="fond"> 
      <div class="ruban">     
        <h2>Un ruban CSS 3 !</h2>     
      </div>     
      <div class="ruban_gauche"></div>
      <div class="ruban_droit"></div>
</div>

Code CSS :

#fond {
position: relative;
margin: 0px auto;
width: 350px;
background: #fff;
border-radius: 5px;
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
z-index: 10;
height:110px;
}

.ruban {
background: #b1c70d;
height: 50px;
width: 380px;
position: relative;
left:-15px;
top: 30px;
float: left;
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100;
}

.ruban h2 {
font-size: 25px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
margin:10px;
}

.ruban_gauche {
border-color: transparent #7e9202 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: -30px;
top: 65px;
z-index: -1;  /*s'affichera sous le rectangle  */
}

.ruban_droit {
border-color: transparent transparent transparent #7e9202;
border-style:solid;
border-width:15px;
height:0px;
width:0px;
position: relative;
left: 350px;
top: 35px;
z-index: -1;
}

 

0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.