27 Feb, 2009
Pure CSS ronde hoeken
Categoriën: box |centreren |FireFox |IE6 |IE7 |IE8 |opera |Round corners |safari |solution |template |valid |Xhtml Strict
Geen afbeeldingen, geen Javascript enkel pure CSS. Maar wel veel CSS en HTML elementen. Ja het is meestal kiezen of delen, je kan niet alles hebben natuurlijk.
HTML
<div id="v3"> <div class="b1"> <strong></strong> </div> <div class="b2"> <strong> <em> <span></span> </em> </strong> </div> <div class="b3"> <strong> <em></em> </strong> </div> <div class="b4"> <strong></strong> </div> <div class="b5"> <strong></strong> </div> <div class="text"> <h1>Lorem ipsum</h1> <p>tekst komt hierin te staan</p> </div> <div class="b5"> <strong></strong> </div> <div class="b4"> <strong></strong> </div> <div class="b3"> <strong><em></em></strong> </div> <div class="b2"> <strong> <em> <span></span> </em> </strong> </div> <div class="b1"> <strong></strong> </div> </div>
CSS
* {margin: 0; padding: 0}
body {
font: 14px/17px "Trebuchet MS", tahoma, arial;
text-align: justify;
}
a {color: #0094D6}
p {
text-align: center;
margin-top: 30px;
font-weight: bold;
font-size: 13px;
}
#v3 {
width: 500px;
margin: 30px auto 15px;
}
h1 {
font-size: 20px;
font-weight: normal;
text-align: center;
padding: 9px 0 14px;
}
#v3 h1 {color: #00AA00;}
.text {
border: 1px solid #B0BCC2;
border-width: 0 1px;
padding: 5px 10px;
}
.b1, .b2, .b3, .b4, .b5,
.b1 em, .b2 em, .b3 em, .b4 em, .b5 em,
.b1 strong, .b2 strong, .b3 strong, .b4 strong, .b5 strong,
.b1 span, .b2 span, .b3 span, .b4 span, .b5 span {
height: 1px;
font-size: 1px;
overflow: hidden;
border-style: solid;
border-width: 0 1px;
display: block;
}
.b1 {
margin: 0 2px;
background: #EBEEF0;
border: none;
}
.b1 strong {
margin: 0 1px;
background: #B8C3C8;
border-color: #CBD3D7;
}
.b2 {margin: 0 1px; border-color: #D6DCDF;}
.b2 strong {border-color: #B8C3C8;}
.b2 em {border-color: #E4E8EA;}
.b2 span {border-color: #F7F8F9;}
.b3 {border-color: #EBEEEF;}
.b3 strong {border-color: #BCC6CB;}
.b3 em {border-color: #F9FAFB;}
.b4 {border-color: #CAD2D6;}
.b4 strong {border-color: #E5E9EB;}
.b5 {border-color: #B5C0C6;}
.b5 strong {border-color: #FAFBFB;}
