Ergebnis 1 bis 5 von 5

Thema: Runde Ecken mit CSS2

  1. #1
    Macrosdesign
    Gast

    Daumen hoch Runde Ecken mit CSS2

    Abgerundete Ecken mit CSS 2.1 erstellen

    1.Einleitung
    2.Erstellung der Infobox
    2.1.HTML Code
    2.2.CSS Code
    3.Erstellung der abgerundeten Ecken
    3.1.HTML Code
    3.2.CSS Code
    4.Schlusswort und Beispiel

    1. Einleitung
    Die meisten User empfinden Boxen mit abgerundeten Ecken als angenehmer. Ein sehr guter Grund um sich vielleicht zu überlegen, seine Boxen im Content mit runden Ecken auszustatten ohne dabei auch nur eine Grafik zu verwenden.

    2. Erstellung der Infobox

    2.1 HTML-Code:
    Beginnen wir als erstes damit unseren Text (in diesem Fall der bekannte Blindtext „Lorem ipsum“) in einen Absatz zu stecken und diesem die Klasse „infobox“ zuzuweisen.

    HTML-Code:
    <p class="infobox">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo   ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
    </p>
    2.2 CSS-Code:
    Nun überlegen wir uns wie unsere Infobox (p.infobox) denn eigentlich aussehen soll (Hintergrundfarbe, Textfarbe, usw. ). Ich habe für meine Infobox einen dunklen Hintergrund mit dem Hex-Wert #333 (background:#333 gewählt und eine helle Textfarbe, in diesem Fall ein helles Grau mit dem Hex-Wert #ddd (color:#ddd.
    Des weiteren wähle ich eine Schriftgröße von 11 Pixeln (font-size:11px, einen inneren Abstand von 10px in alle Richtungen (padding:10px und einen äußeren Abstand nach links und rechts von ebenfalls 10px (margin:0 10px.

    HTML-Code:
    /* Hiermit werden die Standartvorgaben des Browsers überschrieben. */
    * {
      padding:0;
      margin:0;
      border:0;
      font-family:Verdana;
    }
    
    /* Infobox */
    p.infobox {
       /* Dunkler Hintergrund */
            background:#333;
    
      /* Schriftgröße: 11px und eine helle Schriftfarbe */
            font-size:11px;
    	color:#ddd;
      /*äußerer Abstand , innerer Abstand = 10px */
    	padding:10px;
    	margin:0 10px;
    }	
    So damit haben wir den ersten Teil schon einmal geschafft und wollen auch nicht lange warten und gleich mit dem Erstellen der runden Ecken fortfahren.

    3. Erstellung der abgerundeten Ecken
    Hierzu behelfen verwenden wir einfach der Methode mit der SVG Grafiken erstellt werden.

    3.1 HTML Code
    Und zwar werden wir einfach vier <span>-Elemente übereinander anordnen die nach links und rechts einen gewissen Abstand haben, am Ende entsteht dadurch eine Rundung.
    Diese vier <span>-Elemente werden einmal in einen Absatz gesteckt, der oberhalb unterere Infobox angeordnet wird und die Klasse „top“ bekommt und einmal in einen Absatz der unterhalb unserer Infobox angeordnet wird und die Klasse „bottom“ hat.
    Die vier <span>-Elemente bekommen nun die Klassen „bar1“, „bar2“, „bar3“ und „bar4“.
    Die Reihenfolge der <span>-Elemente sollte wie folgt aussehen:
    bar1
    bar2
    bar3
    bar4
    Infobox
    bar4
    bar3
    bar2
    bar1


    Das ganze sollte in HTML dann wie folgt aussehen:

    HTML-Code:
    <p class="top">
    	<span class="bar1">&nbsp;</span>
    	<span class="bar2">&nbsp;</span>
    	<span class="bar3">&nbsp;</span>
    	<span class="bar4">&nbsp;</span>
    </p>
    <p class="infobox">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo   ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.
    </p>
    <p class="bottom">
    	<span class="bar4">&nbsp;</span>
    	<span class="bar3">&nbsp;</span>
    	<span class="bar2">&nbsp;</span>
    	<span class="bar1">&nbsp;</span>
    </p>
    3.2 CSS Code
    So nun geht es an den CSS-Code der die <span>-Elemente so anordnet das sie nachher eine schöne Rundung ergeben.

    HTML-Code:
    p.top {
    	padding:0px;
    	margin:10px 10px 0 10px;
    	background: none;
    }
    
    p.bottom {
    	padding:0px;
    	margin:0 10px;
    	background: none;
    }
    
    p.top .bar1,
    p.top .bar2, 
    p.top .bar3, 
    p.top .bar4,
    p.bottom .bar1,
    p.bottom .bar2, 
    p.bottom .bar3, 
    p.bottom .bar4  {
    	display:block;
    	overflow: hidden;
    	background: #333;  /* Gleiche Hintergrundfarbe wie die Infobox */
    }
     /* Außenabstände nach links und rechts der <span>-Elemente */
    p span.bar1{margin: 0 5px;height:1px;}
    p span.bar2{margin: 0 3px;height:1px;}
    p span.bar3{margin: 0 2px;height:2px;}
    p span.bar4{margin:0 1px; height:2px;}
    4. Schlusswort und Beispiel
    Und schon hat mal eine schöne Box mit abgerundeten Ecken ganz ohne Grafiken. Dieses funktioniert in allen gängigen Browsern (IE ab Version 6, Firefox, Safari)

    Ein Beispiel könnt ihr euch hier ansehen:
    http://f-h.kaninchenrettung.de/macro...page/test.html


    // EDIT: Rechtschreibfehler ausgebessert und Beschreibung verbessert
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Macrosdesign (02.03.2010 um 22:59 Uhr)

  2. #2
    Administrator Avatar von admin
    Registriert seit
    16.01.2003
    Ort
    Karlsruhe
    Beiträge
    12.779
    Danke
    1
    Bekam 4 mal "Danke" in 2 Postings
    Blog-Einträge
    42

    Standard AW: Runde Ecken mit CSS2

    Nicht schlecht, aber die runden Ecken sehen bei mir etwas verfranzt aus
    Die Forenregeln und Nutzungsbedingungen sind auch zum lesen da !!!


  3. #3
    Macrosdesign
    Gast

    Standard AW: Runde Ecken mit CSS2

    Könnte man mit mehr "<span>" verfeinern das ganze und somit andere Radien darstellen. Das beste Ergebnis bekommt man natürlich nur mit einer Grafik oder Javascript + SVG


    //EDIT: Tutorial geupdated!
    Geändert von Macrosdesign (02.03.2010 um 22:48 Uhr)

  4. #4
    Forum Guru
    Registriert seit
    04.04.2005
    Beiträge
    4.139
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Runde Ecken mit CSS2

    Gute Variante

    Ich verwende meist eine Grafik die die abgerundeten Ecken die ich über das element absolut positioniere, dies funktioniert auch bei Grafiken.

    Eine einfachere Variante die direkt mit Grafiken funktioniert wäre border-radius funktioniert in ziemlich allen Browsern ausser IE
    Facebook Gruppe: Böses Encoding

  5. #5
    Samurai Avatar von #matthias
    Registriert seit
    24.02.2009
    Ort
    Sömmerda
    Beiträge
    200
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Runde Ecken mit CSS2

    Schones Tut!
    Nur leider ist der link zum Beispiel tot.

    MFG Matthias

Ähnliche Themen

  1. runde ecken erstellen
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 26.07.2009, 13:47
  2. runde ecken / skalierbarer Container
    Von driver im Forum Tutorials, Workshops und Anleitungen
    Antworten: 1
    Letzter Beitrag: 04.08.2007, 13:11
  3. runde ecken
    Von carina1 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 05.12.2006, 17:16
  4. runde Ecken mit PSp9
    Von TanjaM im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 0
    Letzter Beitrag: 25.03.2006, 12:09
  5. runde ecken
    Von Lion im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 15
    Letzter Beitrag: 13.04.2005, 23:09

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •