KOMPOOS.NL

tekst - round corners

home » css » text-effects » round-corners-text.html

sitemap


rounded corner

ronde hoeken

cross browser

uitleg rounded corners procedure

Plaats de style-sheet in de head-sectie van jouw pagina, en plaats de html-code in de body-sectie van jouw pagina. Als je de kleuren (en de vormgeving) wilt veranderen, kan je dit eenvoudig in de stylesheet aanpassen. De procedure is geheel valide voor wat betreft de css en de html, en werkt in alle browsers (dus: cross browser).

de css code van de rounded corners procedure


<style type="text/css">
	.round_corner{line-height:80%;text-align:center;
		font-weight:bold;margin:0;padding:0 1em 0 1em;color:inherit;
		background:#600;border:solid 1px #0ff}
	.round_corner a{background:#600;color:#fff}
	.round_corner a:hover{background:#600;color:#afa;letter-spacing:1px}
	.round_corner a:active,.round_corner a:focus{background:#A0001A;color:#ff5}
	.rond{width:12em;margin:10px 0 0 100px}
	.corner_bottom{border-bottom:1px solid #00ffff}		
	.corner_top{border-top:1px solid #00ffff}
	.rond .hoek_4,.rond .hoek_3,.rond .hoek_2,.rond .hoek_1{font-size:1px;
		display:block;/* \*/ overflow:hidden;/* */}
	.rond .hoek_4,.rond .hoek_3,.rond .hoek_2{height:1px}
	.rond .hoek_3,.rond .hoek_2,.rond .hoek_1{color:inherit;background:#A0001A;
		border-left:2px solid #00ffff;border-right:2px solid #00ffff}
	.rond .hoek_4{margin:0 4px}
	.rond .hoek_3{margin:0 2px;border-width:0 2px}
	.rond .hoek_2{margin:0 1px}
	.rond .hoek_1{height:2px;margin:0}
	.rond .corner_4 .corner_top{margin:0 5px;background:#85A024;color:inherit}
	.rond .corner_3{margin:0 3px;border-width:0 2px}
	.rond .corner_2{margin:0 2px}
	.rond .corner_1{height:2px;margin:0 1px}
	.rond .ronde_hoekjes{z-index:3;display:block;color:inherit;
		background:transparent;border-left:2px solid #00ffff;
		border-right:2px solid #00ffff}
</style>

de html code voor de ronde hoeken


<div class="rond"><em class="hoek_4 corner_bottom"></em><em class="hoek_3 corner_3"></em><em class="hoek_2 corner_2"></em><em class="hoek_1 corner_1"></em><div class="ronde_hoekjes">
    <p class="round_corner"><a href="http://kompoos.nl/css/text-effects/round-corners-text.html">rounded corner</a></p>
</div><em class="hoek_1 corner_1"></em><em class="hoek_2 corner_2"></em><em class="hoek_3 corner_3"></em><em class="hoek_4 corner_top"></em></div>
<div class="rond"><em class="hoek_4 corner_bottom"></em><em class="hoek_3 corner_3"></em><em class="hoek_2 corner_2"></em><em class="hoek_1 corner_1"></em><div class="ronde_hoekjes">
    <p class="round_corner"><a href="http://kompoos.nl/css/text-effects/round-corners-text.html">ronde hoeken</a></p>
</div><em class="hoek_1 corner_1"></em><em class="hoek_2 corner_2"></em><em class="hoek_3 corner_3"></em><em class="hoek_4 corner_top"></em></div>
<div class="rond"><em class="hoek_4 corner_bottom"></em><em class="hoek_3 corner_3"></em><em class="hoek_2 corner_2"></em><em class="hoek_1 corner_1"></em><div class="ronde_hoekjes">
    <p class="round_corner"><a href="http://kompoos.nl/css/text-effects/round-corners-text.html">cross browser</a></p>
</div><em class="hoek_1 corner_1"></em><em class="hoek_2 corner_2"></em><em class="hoek_3 corner_3"></em><em class="hoek_4 corner_top"></em></div>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.