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:
|
|
Tweet |
|
Artikelzusatzinfos
3. Artikelstatistik:
· read: 11221 · today: 4 · last: 13. February 2012
3. Artikelstatistik:
· read: 11221 · today: 4 · last: 13. February 2012
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.
Die Box ist trotzdem da. Sie ist nur nicht rund ;-)
-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…;)*ooops* ;-)
Noch ein interessanter Link zum Thema: http://www.css3.info/preview/rounded-border/
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 ;)
wenn es eine Javascriptlösung sein darf:
http://www.html.it/articoli/niftycube/index.html
Habe ich selbst im Einsatz, finde ich sehr schön.
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 ;)
super simpel, bingo!!
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.
ah, bingo
spiffycorners.com mag auch eine recht interessante Lösung sein, verursacht aber eine Menge b-Tags.
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.
Ich habe Nifty Corners eingesetzt – zB auf http://www.konzertweb.ch und im Admin-Bereich von http://www.bandweb.ch – da bindet man nur ein Javascript-File ein und ruft eine Funktion auf mit Übergabe der Elemente, die man abgerundet haben will… recht simpel.
@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.
Kennst du die xsnazzy-methode?
> http://www.cssplay.co.uk/boxes/snazzy2.html
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?
Dem IE kannste theoretisch über sog. “Conditional Comments” im CSS-Code ein komplett anderes Layout aufdrücken.
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
danke Frank, lass mich mal zunmächst die andere Lösung probieren von oben… dann schauen wir mal weiter. Hast Du die bei Dir so im Einsatz irgendwo?
Ist in Vorbereitung, werde den Artikel in den nächsten Tagen frei geben.
LG Frank
Alles mit runden Ecken, irgendwann hört das auch wieder auf, glaubt mir…
Wie angekündigt, nun einige Lösungen via JavaScript: http://bueltge.de/webdesign-ru.....cript/511/