Runde Ecken mit CSS in jedem Browser

[Jasko]

Die meisten von uns haben eine eigene Internetseite, selber gemacht oder mit einem Bauckasten. In jedem Fall wollen wir alle das unsere Seiten gut aussehen und neue Besucher anlocken. Darum dachte ich mir stelle ich euch eine einfache Art vor um seine Seite freundlicher zu machen und damit automatisch die Besucher zum bleiben anzuregen. Und wer lenger auf unserer Seite bleibt hat auch nacher mehr Sachen ueber uns zu erzaelen, seinem Nachbarn, Freunden und anderen interesierten ueber das Thema unserer Webseite. Ein Vorbild fuer diese Technick ist sicherlich auch eine gewisse Firma mit angebisenem Apfel im Logo.

Nun ich dachte mir ich zeige euch heute wie man mit einfachem CSS Code seine Ecken abrunden kann ohne dafuer gleich Grafikprograme anstrengen zu muessen und nicht jeder kann so etwas gut, aber mit zwei, drei erklaerten Zeilen CSS Code kann jeder was anfangen. Zunaechst der Code:

Code: Alles auswählen

.runden {
  -moz-border-radius: 15px; /* Runde Ecken im Firefox fuer unser Element */
  -webkit-border-radius: 15px; /* Runde Ecken im Safari und Chrome */
  border-radius: 15px; /* Runde Ecken imOpera 10.5+,  neuere Browser, und nun auch Internet Explorer 6+ mit verwendung von IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Schatten im Firefox fuer unser Element*/
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari und Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, neuere Browser und IE6+ mit verwendung von IE-CSS3 */

  behavior: url(ie-css3.htc); /*Das laesst den IE unsere oben gennanten Befehle fuer jede "runden" Klasse ausfueren */
}

Also zur Erleuterung. Der allgemeine CSS3 Befehl fuer runde Ecken heisst "border-radius" danach gibt man den Wert der Abrundung in Pixel an. Die Prefixe -moz- oder -webkit- diehnen dabei als Hilfe fuer Browser die die Funktion unterstuetzen, aber eine art Hinweiss brauchen um die Funktion richtig deuten zu koennen. Aber wie viele von euch wissen macht der IE nicht gerne mit was die anderen so treiben, darum muss man diesen manchmal zwingen mitzumachen

Darum kommt am Ende des CSS Befehls die Zeile behavior: url(ie-ccs3.htc); zum einsatz. Damit wird dem IE gesagt: "Da hast du CSS3 Befehle die musst du ausfueren und da du nicht weisst wie, zeige ich es dir in der Datei ie-css3.htc."

Als kleiner Bonus Tipp ist hierbei auch der Code fuer den Effekt von Schatten an unserem Element eingebunden. Der Befehl lautet "box-shadow" und wird aenlich interpretiert wie unser vorheriger Befehl.

Mehr dazu und zum download der ie-css3.htc Datei geht es HIER

MFG

PS: Fragen zum Thema hier posten

[moni]

Danke Jasko das du das Thema hier angesprochen hat....habe mich auch schon mal gefragt wie es gehen kann mit dem runden ecken und kanten..
http://www.npage-hilfe.de/f99t1599-css-3.html#p11838
hatte mal auch einen anderen Beitrag über img border hier gemacht ...das geht auch in CSS3 ... habe kein Plan wo ich den erstellt habe aber es ist ja auch egal... bin eh nicht weiter gekommen weil mir zu kompliziert war ...
aber interessant ist das schon...und denke irgendwann wenn man weiter HP basteln will und auf dem laufenden bleiben soll da ist schon angebracht mit diesen Thema auseinander zu setzten ....