foto html - css     . Cliparts - Band

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  

CB info

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 bodytags

<div id="fond">
<div class="band">
<h2>CB info</h2>
</div>
<div class="band_gauche"></div>
<div class="band_droit"></div>
</div>

end
terug
home