[Markus123]

Hallo Leute,

mit CSS kann man ja geometrische Figuren erstellen. Es ist doch damit bestimmt auch möglich ein solches 4-Farben YinYang Symbol zu kreieren:



Das überfordert mich ein bisschen gerade :S

Wie würde man soetwas planen? Ich habe mir schon überlegt etwa mit vier verschiedenen <div>s vier Halbkreise mit den vier Farben zu erstellen und diese dann zu dem großen Kreis zusammenzuschieben. Dann zwei kleine Halbkreise mit zwei neuen divs in Gelb und Blau und diese dann wieder versuchen an die richtige stelle zu schieben.

Geht das auch irgendwie einfacher mit nur einem div so wie in dem Beispiel?

Im Netz habe ich dieses YinYang CSS Symbol gefunden:

#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}

#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}

#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}

Über Tipps und Hilfen dazu würde ich mich sehr freuen.

liebe grüße, markus

[explanator]

Welchen Sinn soll das haben, anstatt eines Bildes ein aufgeblähtes Markup zu haben und Dinge wie solch ein Symbol nachzubauen.

Als SVG verbraucht die schwarzweiss Variante gerade mal 370 Byte.
Siehe File:Yin yang.svg - Wikimedia Commons

[Markus123]

Hallo explanator,

das Bild ist der Hintergrund eines Logos das ich auf einer Webseite einbauen möchte (onlineshop mit shopware).
Das Problem dabei ist dass diese Software für das Logo eine jpg Datei verlangt und mit dem Programm mit dem ich das Bild bearbeiten muss (Gimp) kann ich es nicht als jpg exportieren weil die jpg keine transperenten Ebenen kennen irgendwie.
Das führt dazu, dass das Logo immer als Viereck eingebaut wird und nicht als Kreis weil ich die Ecken ja nicht entfernen kann und diese weißen Ecken stören dann eben total.
Die einzige Möglichkeit die ich also noch hätte wäre dem Hintergrund des Logos die selbe Farbe zu geben wie der Hintergrund des Bereiches in dem ich das Logo einfügen will.

[explanator]

Dann konvertiere das Bild.
Jeder Bildbetrachter kann das. Ich empfehle Irfanview unter Windows.

[Markus123]

danke, habs mir bereits runtergeladen

ich werde aber dennoch irgendwie versuchen wenn ich die Zeit habe das Symbol mit css zu gestallten, weil dann könnte ich evtl noch coole Effekte darauf anwenden wenn man mit der Maus darüber fährt oder wenn die Seite geladen wird

Aber das wäre dann eher so der Luxus den ich machen kann wenn alles andere erledigt ist.

Danke für deinen Tipp!

lg, Markus

[Markus123]

Wie hast du das eigentlich gemeint?

Ich soll es quasi mit der Transparenten Hintergundebene als .png speichern und dann mit Irfanview öffnen und dann zu .jpg konvertieren?

[protonenbeschleuniger]

Du kannst auch mit Gimp ein jpg als png speichern. Du musst halt nur einen transparenten Bereich definieren.

[explanator]

JPG kennt ja keine Transparenz. Ich ging irgendwie davon aus, dass es umgekehrt gemeint war.

Wenn es denn ein Hintergrundbild sein soll, dann fügt man dass ja für gewöhnlich per CSS ein. Was das mit der Software zu tun hat ist mir in diesem Fall nicht ganz klar.
Kannst du das nicht als Background-Image im CSS zum Logo einfügen?

[Markus123]

achso dann habe ich mich oben falsch ausgedrückt glaube ich.

Ich kann kein anderes Format als jpg verwenden für das Logo, die software verlangt eine .jpg da kann ich auch nichts änderen andere Formate werden nicht geladen!

Deshalb bin ich auch darauf gekommen es mit css zu machen, zumindest die Hintergrundgrafik.

[mariane]

Ich verstehe noch nicht ganz dein Problem, es ist doch egal welches Format von was auch immer akzeptiert wird.

CSS-Variante

Du legst ein Div mit class="logo" an gibst dem per CSS die passende Größ, positionierst es und gibt dem ein Hintergrundbild per background:url(logo.png) no-repeat;
Das Bild lädst du per ftp-Zugang hoch.


HTML-Variante

<img src="bild.png" alt="logo" />
Das Bild lädst du per ftp-Zugang hoch.


JPG-Variante

und wenn - aus welchen Gründen auch immer - nur das Format "jpg" geht, dann nimm für die "transparenten" Bereiche die Hintergrundfarbe.


VG