logo
  Band
 

CB info

  Hier komt echt geen ene clipart aan te pas, want dit is 100% css! Met de komst van css3 en html5 kunnen we nu veel meer dan voorheen en dit is een goed voorbeeld van. Natuurlijk is er van alles aan te passen. Ik zou zeggen experimenteer er maar eens mee

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

.band {
background: #C2864A;
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;
}

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

.band_gauche {
border-color: transparent #875D33 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 */
}

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


 
TUSSEN DE BODY TAGS
<div id="fond">
<div class="band">
<h2>CB info</h2>
</div>
<div class="band_gauche"></div>
<div class="band_droit"></div>
</div>

eind