DE PL
Homepage->Script->CSS->Runde Ecken
3 User online am 23.07.2016, 11:06:31


Jede Dummheit findet einen, der sie macht. Tennessee Williams

Newsletter




Anzeigen

Umfrage

Welchen Webserver setzen Sie ein?

 Login

Runde Ecken

Runde Ecken ohne Bilder? Geht denn das überhaupt?

Das ist durchaus machbar, wie das unterstehende Beispiel zeigt:

Runde Ecken

Runde Ecken ohne Bilder.

Wie kommt man also zu den runden Ecken? Das Prinzip ist sehr einfach:

Runde Ecken

Runde Ecken ohne Bilder.

Auf den eigentlichen Kasten kommen oben und unten mehrere Balken in der gleichen Hintergrundfarbe wie der Kasten. Hier nur zur Verdeutlichung wurde auch der Rahmen angezeigt. Außerdem muß der Bereich in dem die Balken untergebracht sind die gleiche Hintergrundfarbe haben wie der Bereich in dem sich der Kasten befindet.

Jetzt müssen nur noch die Balken in der Höhe verkleinert und der Rahmen abgeschaltet werden.

So sieht der Code dazu aus:

<div class="box">
  <b class="top">
    <b class="r1"></b><b class="r2"></b>
    <b class="r3"></b><b class="r4"></b>
  </b>
  <h1>Runde Ecken</h1>
  <p>Runde Ecken ohne Bilder.</p>
  <b class="bottom">
    <b class="r4"></b><b class="r3"></b>
    <b class="r2"></b><b class="r1"></b>
  </b>
</div>

Und das dazugehörige CSS-Script:

.box { width: 15em; background: #9BD1FA;}
.box h1, .box p {margin: 0 10px;}
.box h1 {font-size:150%; color:#ffffff; }
.box .top, .box .bottom{display:block;background: #dddddd;}
.box .top b, .box .bottom b
{
  display:block;height: 1px; overflow: hidden; background: #9BD1FA;
}
.box .r1{margin: 0 5px;}
.box .r2{margin: 0 3px;}
.box .r3{margin: 0 2px;}
.box .top .r4, .box .bottom .r4{margin: 0 1px;height: 2px;}

Hier nun noch ein Paar weitere Beispiele (von Stu Nicholls):

3D Angehoben

Runde Ecken mit angehobenen Rändern

3D Eingelassen

Runde Ecken mit eingelassenen Rändern

Schräge Ecken

45 Grad Ecken

Quadratische Ecken

Kasten mit ausgeschnittenen Ecken



Weiterführende Links:


$Datei: /index.shtml?CONTENT=script_css_corner
$Letzte Änderung: 01.01.1970 01:00:00