PHP (OOP, MVC), HTML, MySQL, Javascript, AJAX und vieles mehr!

Heute beschäftige ich mich mal mit einem beliebten Thema, was vor allem seit CSS3 in aller Munde ist. Das Thema runde Ecken. Wir sehen sie überall, in allen Designs. Auch hier im neuen Design von net-developers, schaut mal oberhalb vom Content! Runde Ecken 🙂

Aber entgegen der üblichen Methoden habe ich hier mal was neues angewandt, was auch noch browserkompartibel ist.

Handelsübliche Methoden, um solch einen Effekt umzusetzen, sind z.B. Hintergrundbilder in png oder gif, wo die Ecken einfach transparent sind, die -moz-border-radius-Methode (Mozilla) und die -khtml-border-radius-Methode (für Konqueror und Safari). Heute beschäftige ich mich mit einer Alternative, die sogar der IE6 versteht!

Und so einfach gehts:

<div class="runde-ecken">
    <div class="b1">&nbsp;</div>
    <div class="b2">&nbsp;</div>
    <div class="b3">&nbsp;</div>
</div>

Zuerst bauen wir uns unsere HTML-Vorlage, dies wird nachher unser Rahmen mit den runden Ecken sein. Die Leerzeichen sind da drin, damit das Ganze auch im IE(6) funktioniert. Nun, der Trick ist ganz einfach, diese drei div-Boxen werden gleich die Illusion erzeugen, dass die Ecken Rund seien. und zwar mit diesem CSS-Schnipsel:

.runde-ecken {
	margin:auto;
	width:400px; /* Die Breite des ganzen */
	height:3px; /* Die Höhe des ganzen */
	font-size: 0px; /* für IE */
	line-height: 1px; /* für IE */
	min-height: 1px; /* für IE */
}
.runde-ecken .b1 {
	background:#000;
	height:1px;
	margin:0 2px;
}
.runde-ecken .b2 {
	background:#000;
	height:1px;
	margin:0 1px;
}
.runde-ecken .b3 {
	background:#000;
	height:1px;
	margin:0px;
}

Das Beispiel von oben sieht so aus:

Wie wir erkennen können, hat jede dieser div-Boxen eine Höhe von 1px bekommen und eine Länge von 400px vererbt bekommen. Wenn die gesamte Seite eine andere Breite als 400px hat, muss dieser Wert natürlich angepasst werden. Die unterste hat die volle Breite, die zweite hat einen Außenabstand von 1px nach links und nach rechts, und die dritte 2px. Die Hintergrundfarbe dieser 1px-Linie entspricht dann noch der Rahmenfarbe. So entsteht eine kleine Pyramide. das Ganze könnten wir jetzt noch beliebig oft wiederholen, sooft eben, wie die Illusion erweckt werden soll, dass der Rahmen dick ist und die runden Ecken „runder“. Dabei solltet ihr am besten danach schauen, wie dick der Rahmen schlussendlich ist, und da das Live-Beispiel hier unsere Webseite ist habe ich nur 3 genommen (da der Rahmen an den Sieten auch 3px breit ist).

So das war schon der ganze Trick! Man könnte das Ganze auch noch spiegelverkehrt für den unteren Rand seiner Webseite machen z.B. so, hier mal ein etwas „aufwändigeres“ Beispiel, wo ich mich nicht an der Rahmendicke aufgehalten habe, da der Hintergrund des Contents auch Schwarz ist:

#content {
    color:#fff;
    width:398px;
    background-color:#000;
    margin:auto;
    border-left:solid 1px #000;
    border-right:solid 1px #000;
}
.runde-ecken {
	margin:auto;
	width:400px; /* Die Breite des ganzen */
	height:5px; /* Die Höhe des ganzen */
	font-size: 0px; /* für IE */
	line-height: 1px; /* für IE */
	min-height: 1px; /* für IE */
}
.runde-ecken .b1 {
	background:#000;
	height:1px;
	margin:0 5px;
}
.runde-ecken .b2 {
	background:#000;
	height:1px;
	margin:0 3px;
}
.runde-ecken .b3 {
	background:#000;
	height:1px;
	margin:0 2px;
}
.runde-ecken .b4 {
	background:#000;
	height:2px;
	margin:0 1px;
}

<div class="runde-ecken">
    <div class="b1">&nbsp;</div>
    <div class="b2">&nbsp;</div>
    <div class="b3">&nbsp;</div>
    <div class="b4">&nbsp;</div>
</div>
<div id="content">
Einfach mal was rumprobieren, sieht doch toll aus!
</div>
<div class="runde-ecken">
    <div class="b4">&nbsp;</div>
    <div class="b3">&nbsp;</div>
    <div class="b2">&nbsp;</div>
    <div class="b1">&nbsp;</div>
</div>

Und dieses Beispiel sieht so aus:

Sieht doch klasse aus! Und wirklich einfach, man muss nur wissen, wies geht!

Ich hoffe, euch hat der Artikel gefallen und wird euch in Zukunft helfen, tolle „runde Ecken“ zu basteln, die auch noch browserkompartibel sind! (Getestet in IE6,7 | FF | Opera | Safari | Chrome | Iron)

Euer Hydra

(9 Stimme, durchschnittlich 2,78 / 5)

Loading...