Startseite  |  Kontakt  |  Seitenverzeichnis  |  Kürzlich aktualisierte Seiten  |  Datenschutz  |  AGB  |  Suchen  |  Impressum  |  TYPO3-Index

Telefon: 07022 / 60 2005  |  E-Mail:
TYPO3-Beratung - CMS-Webseitenerstellung, Webdesign
  • Startseite
  • Referenzen
  • Blog
  • TYPO3 Stuttgart
  • Optimierung
  • TYPO3-Tipps
  • Kurse und Seminare
  •  

    Abgerundete bzw. "runde" Ecken per CSS

    Der philosophischen Frage, ob Ecken rund sein können, möchten wir an dieser Stelle nicht nachgehen. Wir unterstellen einfach, es war zuvor eine Ecke und eckig. Was wir daraus machen, ist uns überlassen.

    Das W3C wird mit CSS Version 3 einige lang ersehnte Verbesserungen einführen, so auch runde Ecken. Drei Browser können dies schon heute, Firefox, GoogleChrome und Safari (in den aktuellen Versionen). Opera kann es inzwischen auch und reagiert auf den endgültigen Befehl: border-radius. Die Internet Explorer Versionen 7 und 8 glänzen sowieso nicht mit der Umsetzung moderner CSS-Spezifikationen.

    Dazu müssen Sie folgende Zeilen in Ihr CSS einbinden. Wenn Ihr Browser Ecken abgerundet darstellen kann, erhalten Sie die folgende Box abgerundet dargestellt.

    
    <div style="background-color: khaki;
       -moz-border-radius: 10px;
       -webkit-border-radius: 10px;
       border-radius: 10px;
       border: 1px outset red;
       padding: 10px;">

    Es können auch einzelne Ecken beschrieben werden. Dazu verwenden Sie z.B. folgende Anweisungen:

    -webkit-border-top-right-radius: 1px;
    -moz-border-radius-topright: 1px;
    border-top-right-radius: 1px;
    

    Befindet sich eine Grafik in einem Element mit runden Ecken, unterscheiden sich die Browsern noch in der Umsetzung.


    Verweise


    Themen: TYPO3-Web-Design, TYPO3-Optimierung, CMS-Homepages gestalten, TYPO3-Internetseiten erstellen, Website-Programmierung, Runde Ecken.

    [ • Startseite ]   [ ⇐ Zurück ]   [ Π Drucken ]   [ ⇑ Nach oben ]  

     

    Startseite  |  Kontakt  |  Seitenverzeichnis  |  Kürzlich aktualisierte Seiten  |  Datenschutz  |  AGB  |  Suchen  |  Impressum  |  TYPO3-Index
    Letzte Änderung: Donnerstag, 05.05.2011
    Flag Counter