MrPark
Lost in the web

Categories

Accueil > Turlutaine > ♥HTML♥ > CSS : coins arrondis

22 octobre 2008
Matthieu

CSS : coins arrondis

Solution 100% full css : http://www.spiffycorners.com

Exemple :

CSS :

<style type="text/css">
.spiffy{display:block}
.spiffy *{
 display:block;
 height:1px;
 overflow:hidden;
 font-size:.01em;
 background:#74A28A}
.spiffy1{
 margin-left:3px;
 margin-right:3px;
 padding-left:1px;
 padding-right:1px;
 border-left:1px solid #c3d7cc;
 border-right:1px solid #c3d7cc;
 background:#96b9a7}
.spiffy2{
 margin-left:1px;
 margin-right:1px;
 padding-right:1px;
 padding-left:1px;
 border-left:1px solid #f1f5f3;
 border-right:1px solid #f1f5f3;
 background:#8eb3a0}
.spiffy3{
 margin-left:1px;
 margin-right:1px;
 border-left:1px solid #8eb3a0;
 border-right:1px solid #8eb3a0;}
.spiffy4{
 border-left:1px solid #c3d7cc;
 border-right:1px solid #c3d7cc}
.spiffy5{
 border-left:1px solid #96b9a7;
 border-right:1px solid #96b9a7}
.spiffyfg{
 background:#74A28A}
</style>

HTML

<div>
 <b class="spiffy">
 <b class="spiffy1"><b></b></b>
 <b class="spiffy2"><b></b></b>
 <b class="spiffy3"></b>
 <b class="spiffy4"></b>
 <b class="spiffy5"></b></b>

 <div class="spiffyfg">
   <!-- Contenu -->
 </div>

 <b class="spiffy">
 <b class="spiffy5"></b>
 <b class="spiffy4"></b>
 <b class="spiffy3"></b>
 <b class="spiffy2"><b></b></b>
 <b class="spiffy1"><b></b></b></b>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis orci odio, in gravida dui. Etiam faucibus purus in nibh porta a semper ligula consectetur. Aenean eros dui, blandit et convallis quis, vehicula nec leo. Curabitur sed felis felis. Aenean dapibus luctus pulvinar. Nunc viverra nunc at metus vulputate consequat. Vestibulum pulvinar, dolor a laoreet posuere, magna augue condimentum mi, nec auctor nulla lorem ac purus. Pellentesque sapien sem, dapibus fringilla viverra sed, ultrices quis purus. Fusce at orci ut risus rutrum ullamcorper. In condimentum condimentum tristique.

En savoir plus :

Partager

Commentaires

2 Messages

Répondre à cet article