16.05.2016: Es gibt ein paar Aktualisierungen auf unserem Blog! Die Underground Suchmaschine mit welcher ihr Seiten wie die Boerse oder Mygully durchsuchen könnt, wurde komplett überarbeitet. Die XXX Stream Liste wurde aktualisiert, tote Links mit neuen ersetzt, das gleiche gilt für die MP3 Suchmaschinen und die Liste mit den Android Apps wurde ebenfalls erweitert.

CSS: Runde Ecken (Browserunabhängig)

Ich zeige euch hier wie man mit CSS ein Div Element darstellen kann, welches Runde Ecken hat. Für Firefox gibt es eine spezielle CSS Zeile, welche dies ohne weiteres ermöglicht:

-moz-border-radius:10px;

Das funktioniert natürlich nur im Firefox. Opera, IE und andere Browser ignorieren das komplett.

Mit 4 Grafiken und ein wenig CSS lässt sich das ganze aber auch für alle anderen Browser darstellen.

Der CSS Code dazu sieht folgendermaßen aus:
#round {
width:300px; /* Div Breite */
background: #FF9900 url(left_top.gif) top left no-repeat;
}
#round div {
background: url(right_top.gif) top right no-repeat;
}
#round div div {
background: url(left_bottom.gif) bottom left no-repeat;
}
#round div div div {
padding:20px; /* Innenabstand vom Text zum Div */
text-align:center; /* Text Ausrichtung */
font-family:Verdana; /* Schriftart */
font-size:12px; /* Schriftgröße */
background: url(right_bottom.gif) bottom right no-repeat;
}

Der HTML Code dazu sieht dann wie folgt aus:
<div id="round">
 <div>
  <div>
   <div>
Ein Div mit abgerundeten Ecken
</div>
 </div>
  </div>
   </div>

Wobei hier die Div Tags, welche sich innerhalb vom Haupt-Div befinden, nur dazu da sind um die Grafiken darzustellen, welche jetzt ins Spiel kommen.

Error: Image Not Found!Error: Image Not Found!Error: Image Not Found!Error: Image Not Found!

Um die Grafiken zu speichern, einfach Rechte Maustaste -> Grafik speichern untern... Größe, Farbe, Radius ect. muss natürlich individuell angepasst werden. Dafür sollte man halt auch über ein paar Grafik-Kenntnisse verfügen (keine große Sache).

Das fertige Element sieht dann so aus:

Error: Image Not Found!

Wie bereits erwähnt ist diese Technik vollkommen Browserunabhängig, was bedeutet, dass es in jedem Browser funktioniert und nicht nur auf einen ganz bestimmten Browser beschränkt ist.

Tags: div runde ecken, div abgerundete ecken, css runde ecken, css abgerundete ecken

Kommentare:

  1. Wäre super wenn ihr noch mehr Sachen über HTML/CSS posten würdet :D (sind super hilfreich für mich ;))

    AntwortenLöschen
  2. #round {

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    ...
    usw

    AntwortenLöschen
  3. Mit CSS3 gehts natürlich auch. Allerdings ist hier nicht garantiert dass es in jedem Browser funktioniert. Naja mittlerweile wahrscheinlich schon, bis auf den Internet Explorer 7 und 8.

    AntwortenLöschen

ACHTUNG: Anonyme Kommentare werden nicht freigeschaltet! Bitte wählt aus der Dropdown-Liste "Name/URL" anstatt "Anonym". Mit "Name/URL" bleibt ihr ebenfalls anonym, jedoch kann so zwischen User A und User B unterschieden werden.

Gültige HTML-Tags: <a href="LINK">LINK TITEL</a> | <b>BOLD</b> | <i>KURSIV</i>