 |
|
Infos zum Artikel
| Autor: |
use-media GbR |
| Datum: |
18.06.2012 |
| Views: |
2350 |
Bewertung
 |
 |
|
Bewertung des Artikels
Durchschnittlich 2 von 5
bei 11 Bewertung(en) |
|
 |
|
 |
Modernes Webdesign mit Border Radius und CSS3 |
 |
 |
Seit den Browsern Safari 4, Mozilla 10 und Internet Explorer 9 besteht die Möglichkeit die neuen, besseren Möglichkeiten von CSS3 zu implementieren, um ein modernes Webdesign und eine einfache Programmierung zu gewährleisten.
Eine solche CSS3 Eigenschaft ist Border Radius. Damit können Sie einem Container wie beispielsweise ein div, gerundete Ecken vergeben. Die Ecken können nur leicht gerundet sein, oder sehr deutliche Kreise aufweisen. Solche Abrundungen hat man HTML-technisch bisher nur mit festen Bilder hinbekommen und durch die Programmierung von kachelnden Bildern. Diese sind jedoch nicht immer so einfach zu implementieren, zumal dass man Containern über transparente Flächen haben könnte.
Der Syntax von Border-Radius ist ganz einfach – „border-radius: 5px;“. Diese CSS Eigenschaft können Sie in Ihrer CSS Datei unterbringen oder direkt inline setzen mittels style. Statt 5px, können Sie einen anderen Wert nehmen, von 1px bis hin zu 50px oder mehr – das ist Ihre Entscheidung. Mit CSS3 können Sie viele anderen Eigenschaften setzen, wie beispielsweise Schatten, Scheineffekte und viel mehr. Es ist einfach wichtig, dass relativ neue Browser diese Technologie unterstützen.
Was dabei ganz wichtig ist, ist dass es Nachteile gibt –nicht jeder wird Ihre gerundeten Ecken aufgrund der Browserkompatibilität sehen können. Stattdessen werden die Ecken ohne Abrundung weiter angezeigt – wenn das kein großes Problem darstellt, so können Sie sich eine enorme Zeit sparen und CSS3 als Standard übernehmen. Es gibt eine andere große Barriere – Sie können border-radius nicht für HTML Tabellen nutzen, denn Tabellen unterstützen CSS3 nicht. Dies bedeutet, dass wenn Sie Ihre Seite nicht von Tabellen zu Div Ebenen umprogrammiert haben, so können Sie nicht von den Vorteilen der CSS3 Technologie nicht profitieren.
|
 |
|
Top 5 Meistgelesen
|
|
Top 5 Bestbewertet
|
|
|
|
