Sonstiges

runde Ecken mit CSS?

anlässlich des Vorschlags von Ehsan, für die Artikelüberschriften eine graue, abgerundete Box (mit weißer Schrift) zu nehmen, will ich es mal probieren. Doch, wie kann man mit einfachsten Mitteln ohne ewige DIV-Verschachtelungen abgerundete Boxen für die Artikelüberschriften erstellen? Bedenkt, dass auf der Startseite rund 20 Artikel angezeigt werden, also 20x das DIV-Gedöns losgetreten wird. Wen der Code dazu kleinstmöglich wär, dann wärs ok. Die bisherigen Lösungen, die ich via Google-Suche gefunden habe, sind imho Codemonster.

Damit Ihr wisst, was ich meine:
vorschlag grey

Über den Autor

Robert Basic

Robert Basic ist Namensgeber und Gründer von BASIC thinking und hat die Seite 2009 abgegeben. Von 2004 bis 2009 hat er über 12.000 Artikel hier veröffentlicht.

37 Kommentare

  • Versuchs mal mit folgendem CSS-Code in einem h2-Block:

    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding: 5px;
    background-color: #CCC;
    color: #fff;

    ungetestet, mit den Werten musst etwas rumexperimentieren. Und funktioniert nur im FF und Webkit-Browsern. IE-User sehen einen rechteckigen Kasten.

    btw.: kann es sein dass in deinen Postings nirgends die Post-Uhrzeit angezeigt wird?

  • @Datum kommt rein, Time halte ich für sinnlos.
    @Ist das eine spezielle Anweisung für FF oder kann damit auch der IE6, IE7 und Opera 8+9 damit umgehen, wie auch Safari? Sorry, aber es ist nun mal so doof…

  • Datum ist bereits drin („Thema: zu Basic Thinking, 12.09.2007 „), die FF-Info hab ich eben reineditiert, Zeit halte ich teilweise durchaus für interessant – hab eben verzweifelt danach gesucht – dein Post kann ja noch nicht alt sein, wenn sonst noch niemand kommentiert hat 😉

    Wie es mit Opera/Safari aussieht: kA. Hab ich nix zu testen. Opera basiert auf Webkit, glaub ich. IE-User schauen in die Röhre, dann musst mit Bilder arbeiten oder auf CSS3 warten.

  • ah, ok, thx. Da IE rausfällt, fällt damit auch die Lösung flach. Kann schlecht weiße Schrift auf weißem Hintergrund anzeigen, wenn die graue Umrandung/Box nicht sichtbar ist.

  • -moz-border-radius: Geht nur mit FF und ggf, auch mit IE7 – aber soweit ich weiß nicht mit Opera! Also wehe– 😉 Sonst mahn ich dich wegen Diskriminierung ab… 😉

  • Hallo Robert,
    so könnte es ohne zusätzliche Divs klappen.
    Du schneidest die Hintergrund-Box in Links und Rechts. Beide sollten die Hälfte plus 5px breit sein.
    Dein h2 bekommt folgende style Anweisung:
    h2{background:url(linkeseite.jpg) no-repeat top left;}
    Und nun den Link mit der rechten Seite bestücken:
    h2 a{background:url(rechteseite.jpg) no-repeat top right;}

    Einen Nachteil hat das ganze allerdings. Klappt nur bei Einzeiler.
    Wenn es bei Mehrzeiler auch klappen soll musst du auf Hilfselemente (div, span, strong,…) zurückgreifen.

  • Hmm aus’m hohlen Bauch: ein kleines Hintergrundbild (linke obere und untere Ecke mit Rundung) im <h2> left-aligned und eines (die beiden rechten Ecken) im <a> right-aligned. Dazu müssen dann beide (a und h2) entweder block oder inline sein damit sie gleich breit sein können.

    Ist vielleicht etwas kompliziert und ich hab grad keine Zeit das auszuformulieren, aber vielleicht erbarmt sich ja anderswer und spielt mit den Werten bis es passt. Sollte dann aber in jedem Browser funktionieren.

    EDIT: Mein Vorredner hats ja schon 😉

  • die Version für zwei Zeiler würde in etwa so aussehen:

    dafür erstmal die linkstruktur ändern:

    Hier kommt der Linktitel

    Jedes der Html Elemente bekommt eine Ecke als Background. Also
    h2 {background:#farbwert url(linkeeckeoben.jpg) top left no-repeat;}
    a {background:url(linkeeckeunten.jpg) bottom left no-repeat;}
    strong{background:url(rechteeckeoben.jpg) top right no-repeat;}
    span {background:url(rechteeckeunten.jpg) bottom right no-repeat;}

    Hier müsste man ein bisschen mit display inline und block ein bisschen rumspielen, aber es würde klappen.

  • Eigentlich ist eine Lösung über „div“ nicht so schrecklich verschachtelt, da du eigentlich nur ein „div“ vor die Überschrift setzen musst und eines danach, da hinein ein Bild links mit einer Rundung und die andere Rundung kann mit dem Hintergrund gesetzt werden (oder eben noch ein Bild einfügen rechts). Habe ich bei meinem Blog auch so realisiert, da in allen Browsern richtig angezeigt (bis auf IE6, der aber Probleme mit margin hat, ein anderes Thema ;D ). Es gibt soweit ich mich recht erinnere noch eine andere Lösung über CSS, die aber ebenfalls nicht mit allen Browsern kompatibel ist…
    Ne doch nicht, wird zwar bei CSS3 „border-radius“ heißen, heißt aber derzeit so, wie es Benno schon schrieb – außer, dass wenn ich mich recht entsinne, dies für Opera so genannt wird: -o-border-radius.
    Kann mich aber irren, da ich diese Funktion nicht nutze… es ist nunmal nicht für den IE gut und den nutzen immer noch zu viele Leute. Besonders, da man eben eigentlich die Rundung durchaus sehr einfach gestalten kann. Denn zwei „<div><img>etc…</div>“ nicht SO viel ist (und man ja ein img durch die CSS-background-Angabe ersetzen kann (aber dann so irgendwo auch aufs gleich rauskommt 😉 ).

    EDIT: Da waren schon ein paar schneller… auch wenn mit anderen Lösungen. Im Grunde gibt’s schon einige Möglichkeiten, die auch überall gehen, nur eben bisher leider nicht „einfach so“. Leider…

  • @#3 Opera benutzt seine eigene Presto Engine
    @Robert
    Der phpBB3 Standard-Style setzt über jede einfach ein halbtransparentes rundes Bild, wäre das nicht noch ne Möglichkeit?

  • Mach doch ein 4eckiges Div mit Hintergrundbild. Das Hintergrundbild ist ein Gif oder PNG und wird imho dann Skaliert. Das sollte imho so funktionieren *denk*

  • ok ok ok, muss das erstmal scannen alles. DANKE!!!

    die Lösung von Alin hat was.
    @Matthias, das runde ins eckige kriegen, hehehe, das würde zwar gehen, is aber nicht rund;)

  • da die beiträge ja eine fixe breite haben, geht es sogar noch ein wenig einfacher, dazu habe ich bereits ein tutorial geschrieben. funktioniert wie gesagt nur wenn das div eine fixe breite hat, es werden im einfachsten fall auch nur 2 bilder benötigt. eines für oben und eines für unten. wenn der hintergrund „komplizierter“ ist (rand, schatten, verlauf) drei. und zwei zusätzlich divs. außerdem ist die lösung mit allen browsern kompatibel. und das sogar ohne irgendwelche hacks. und garantiert ohne javascript 😉

  • ach ja, wie „gefährlich“ ist die weiße Schrift für die Artikelüberschrift? Wirkt sich das irgendwo aus, wenn der Browser keine Grafiken anzeigt oder dergleichen?

  • Spätestens beim Drucken kann es zum Problem werden. Hintergrundgrafiken werden grundsätzlich nicht mitgedruckt. Problem umgehen indem du eine print css erstellst und die Schriftfarbe auf dunkel stellst.

  • Hi!

    Ich denke, mittlerweile haben wir ja ne ausreichende Anzahl von Vorschlägen. Deswegen sag ich jetzt einfach mal: Wozu die Ecken abrunden? Der Rest vom Layout ist doch auch eckig.

    Um die Überschriften hervorzuheben würde ich eher zB die Farbe ändern. Beispielsweise auf den Farbwert der h3-Überschrift über den Comments. Und vielleicht noch ne Spur größer.

  • @22: Aber es IST JavaScript und das ist definitiv ein Nachteil. Vor allem wenn die Seite grundsätzlich auch ohne funktioniert. Wenn ohne JS sowieso nichts geht, ok, aber sonst…
    Der Unterschied an Zeilen ist (wenn man meine Variante einsetzt) auch nicht gravierend, Nifty braucht eine, meine Variante 2.

  • Also, wenn Du moz-border-radius noch mit einem border-radius ergänzt, dann kann das theoretisch jeder Browser. Die korrekte css3 Eigenschaft heisst nämlich einfach border-radius. Das ist genormt und wird wie üblich von kaum einem Browser unterstützt. Aber vielleicht ja in Zukunft? So etwa mit IE 12.3?

    Alles Andere würde ich lieber weglassen. Erzeugt nur reichlich aufgeblähten und unsemantischen Code. Du packst jede Menge Zeugs ins html mit rein, das nur der Präsentation dient und mit dem Inhalt Nix zu tun hat. Keine sonderlich gute Idee.

    Ich verwende auf meinen Seiten mehrere alternative Stile. Einer davon, „Humus“, nutzt abgerundete Ecken für Überschriften. Sieht recht gut aus. Der IE kann’s halt nicht, aber der kann sowieso keine alternativen Stile. Na und? Die Seiten werden dadurch ja nicht unzugänglich für IE-Nutzer. FF Nutzer bekommen einfach etwas mehr 🙂

  • @Siegfried, wenn aber der graue Background nicht merh angezeigt wird, würde die weiße Überschrift auf weißen Body-Background für IE Nutzer verschwinden. Wenn ich diese Methode nehme. Oder kann ich dem IE alternativ ne andere Farbe der Überschrift geben, als rot wie jetzt?

  • Habe ich da was falsch verstanden? Benno (#1) schrieb doch, dass der Kasten im IE nicht verschwindet, sondern eben nur rechtwinkelige Ecken hat.

  • @tbones: Kommt auf die Methode an. Bei reinem css, ja, sonst nein.

    @Robert: Die Methode ist zwar nicht schön, aber man kann dem IE tatsächlich per conditional comment eine Art Korrektur-CSS verpassen. Wegen der Cascade natürlich als letztes Stylesheet.

    Ach noch was: Das mit den abgerundeten Ecken funktioniert bislang nur bei Containern mit Hintergrundfarbe, nicht mit Hintergrundgrafik. Grafiken gehen immer bis in die Ecken. Wenn Du dem container einen border verpasst, kannst Du das sehen: Border ist abgerundet, Bild eckig. Also bislang nicht immer besonders gut nutzbar. Aber immerhin, ein Anfang.

  • Robert hab dir eine Lösung über dein tolles Kontaktformular zugeschickt.
    Das ist eigentlich die beste und einfachste Lösung.
    Und solltest du noch einen halbtransparenten Schatten suchen hab ich da auch noch was :).

  • hallo Maik, vielen Dank, kann sein, dass ich mir das heute Abend erst spät im Hotel anschauen kann, da ich heute und morgen in Karlsruhe bin. Hm.. komischer Name irgendwie für ne Stadt, egal.

  • Ich könnte dir eine Lösung via JavaScript senden, vie jQuery. Dann ist es in allen Browsern gleich wenn JS aktiv ist. Ist Js deaktiviert, dann ist es ohne Rundungen aber auch zugänglich. Die Hintergrundfarbe etc. bleibt erhalten.
    LG Frank