konzentrische Kreise im Header

[Matse]

Hallo Leute!
Eine Frage:
Ich versuche, in einem Header-Element auf dieser Seite hier um das Logo herum konzentrische Kreise verlaufen zu lassen:

http://www.viniyoga-wehner.de/test.html

Im Moment hat das Header-Tag eben als Hintergrund ein PNG, wo die Kreise um das Logo herum als Hintergrundbild inkludiert sind. Das PNG arbeitet mir Transparenzen so dass um die Kreise herum die HHintergrundfarbe durchscheint.

Das Ganze ist allerdings in meinen Augen reichlich stümperhaft weil ich einfach nicht weiß wie es geht. Ich hatte auch keine bessere Idee. Ihr hattet mir neulich gut geholfen als ich nach Euren Inspirationen und Anleitungen die ursprünglich verwendeten Tabellen gegen eine saubere Seitenstruktur getauscht habe und mit 1/1000tel des Codes ein viel besseres Ergebnis erhalte.

Die Sache hier ist aber nicht gut weil die Kreise als Hintergrundbild nicht auf das Logo zentriert sind welches ja mit den anderen Header-Inhaltselementen mittig zentiert ist. Wenn der Inhalt des Headers wandert, wandern die Kreise natürlich nicht mit.

Ich kam schon auf die Idee, die Kreise einfach als Hintergrund in das Logo-Bild zu bringen. Dann ließen sie sich relativ dazu sicher gut positionieren. Allerdings geht dann das Bild nicht über das Objekt hinaus und ich habe nichts gewonnen weil von den Kreisen fast nichts zu sehen ist.

Wie kann man das raffiniert machen?

LG und danke für Eure Tipps,
Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matse!

Ihr hattet mir neulich gut geholfen als ich nach Euren Inspirationen und Anleitungen die ursprünglich verwendeten Tabellen gegen eine saubere Seitenstruktur getauscht habe und mit 1/1000tel des Codes ein viel besseres Ergebnis erhalte.

Da gibt es noch nicht beachtete oder kommentierte Hinweise.

Wenn du dich im Forum registrieren würdest, könntest du Gunthers JavaScript verwenden und würdest so auf ungelesene Antworten hingewiesen werden.

Matthias

[Matse]

Hallo Namensvetter,
ja, die ungelesenen Geschichten kann ich noch umsetzen bzw. mir darüber Gedanken machen. Das macht alles Sinn!

Kannst Du zu der aktuellen Idee etwas sagen?

Danke und LG,
Matthias alias Matse (;-))

Om nah hoo pez nyeetz, Matse!

Ihr hattet mir neulich gut geholfen als ich nach Euren Inspirationen und Anleitungen die ursprünglich verwendeten Tabellen gegen eine saubere Seitenstruktur getauscht habe und mit 1/1000tel des Codes ein viel besseres Ergebnis erhalte.

Da gibt es noch nicht beachtete oder kommentierte Hinweise.

Wenn du dich im Forum registrieren würdest, könntest du Gunthers JavaScript verwenden und würdest so auf ungelesene Antworten hingewiesen werden.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matse!

bitte vermeide Vollzitate.

ja, die ungelesenen Geschichten kann ich noch umsetzen bzw. mir darüber Gedanken machen. Das macht alles Sinn!

Tu das nicht leichtfertig ab, zumal das auch dein header-Element betrifft!

Kannst Du zu der aktuellen Idee etwas sagen?

Ja.
Es gibt radial-gradient(). Durch geschickte color-stops bekommst du scharfe statt weiche Übergänge.

Bleibt das Problem des gemeinsamen Mittelpunkts, dazu hab ich zwar eine Idee, aber das könnte mit der gewünschten Zentrierung kollidieren.

Du solltest jetzt das Markup ändern, wie ich das bereits vorgeschlagen habe. Dann baust du dir eine Testseite, auf der du mit radial-gradient() experimentieren kannst. Bei dabblet geht das gut. Dann sehen wir weiter.

Im Moment hat das Header-Tag eben als Hintergrund ein PNG,

Tags haben keinen Hintergrund.

Om nah hoo pez nyeetz, Matse!
[Vollzitat]

Vermeide Vollzitate. Sie stören nur.

Matthias

[Matse]

Hallo Matthias!
Danke, damit experimentiere ich mal.

Den restlichen Vorschlägen habe ich mich auch angenommen und vieles geändert. Ich hoffe, jetzt entspricht es Deinen Vorstellungen. Danke für die Tipps!

LG,
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Es gibt radial-gradient(). Durch geschickte color-stops bekommst du scharfe statt weiche Übergänge.

Nein. Browser machen bei Gradienten kein Anti-aliasing. (Kann man ihnen auch nicht verübeln; Gradienten sind ja eigentlich nicht für scharfe Kanten gedacht.) Kreise sehen dann fürchterlich pixelig aus.

Hier tut’s ein Hintergrundbild wohl besser. Mit background-position und media query sollte man das auch passend hinzuschubsen sein.

Qapla'

[Matse]

Hallo Ihr beiden!
Danke für Eure Antworten!

Ich habe mal mit zwei übereinander liegenden Hintergrundbildern experimentiert und ich bin BEGEISTERT! Das Ergebnis jetzt ist ja noch viel genialer als meine ursprüngliche Idee!

Das ist jetzt als erstes HG-Bild ein radial-gradient() und darüber ein zweites HG-Bild, welches ich mit einem Grafikprogramm in der Perspektive verbogen, dann mit nur 30% Deckfähigkeit versehen als PNG abgespeichert und über background-position und background-size im CSS so positioniert und verkleinert habe wie ich das haben will.

Genial! Ihr hattet die Ideen und ich habe gespielt und umgesetzt! Danke, danke, danke!

So muss das sein, tolles Forum!

LG,
Matthias

[Gunnar Bittersmann]

@@Matse:

nuqneH

Ich habe mal mit zwei übereinander liegenden Hintergrundbildern experimentiert und ich bin BEGEISTERT! Das Ergebnis jetzt ist ja noch viel genialer als meine ursprüngliche Idee!

Das ist jetzt als erstes HG-Bild ein radial-gradient() und darüber ein zweites HG-Bild

Jetzt? Nö. Jetzt ist nur ein Hintergrundbild. radial-gradient ist auskommentiert.

Im Übrigen in dein Markup kaputt. (Einfach mal den Validator fragen.) ul darf nur li enthalten, nicht h1 und h2.

Das Logo sollte auch nicht in h1 stehen (sondern gar nicht als Überschrift) und die eigentliche Überschrift nicht in h2 (sondern in h1). Oder Logo und Text zusammen in ein h1-Element. h1 gefolgt von h2 ist jedenfalls falsch.

Das Logo-Bild ist viel zu groß. 910 × 876 Pixel ist wohl etwas zu viel des Guten, Retina-Auflösung sollte genügen. 140 Kilobyte sind definitiv zu viel. So viel Bildinformation steckt da nicht drin, wie hast du es geschafft, dass das PNG so riesig ist? PNG-24? Es sollte PNG-8 sein.

Noch sinnvoller aber SVG. Du hast das Logo mit einem Grafikprogramm erstellt, aus dem du es als Vektorgrafik speichern kannst? Für alte Browser noch PNG als Fallback, aber in der tatsächlich angezeigten Größe, also 208 × 200 Pixel.

Auch die 170 Kilobyte für die Sonne ist viel zu viel. Muss es Tranzparenz sein? Kann das Orange nicht mit ins Bild? Für diesen Bildinhalt wäre JPEG das richtige Grafikformat.

Qapla'