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;}

Gerelateerde Snippets

2 Reacties op "Pure CSS ronde hoeken"

francky

August 17th, 2009 at 15:19

1

Ja, die werkt mooi, als de background van de pagina geen verlooptinten hebben, en de ronde-hoekjes-box er niet overheen hoeft te kunnen scrollen (of van afmetingen moet veranderen wegens andere window-breedte e.d.).
Vergt alleen een paar zweetdruppeltjes als je de css moet aanpassen aan een veranderde background-color van de pagina of van de ronde hoekjes-box.

Als er één klein img bij mag, kan transparantie wel ondersteund worden.
Voorbeeldjes
Artikel

Succes voor alle hoekjesmakers!

Jiochem

February 4th, 2010 at 11:16

2

Ik gebruik niftycube. Ook css only en erg compatible. Doet het perfect.

Reactie formulier


Demo: Pure CSS ronde hoeken:

Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.