zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Geometrische Figur - YinYang Symbol mit 4-Farben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.08.2013, 13:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.08.2013
Beiträge: 13
Markus123 befindet sich auf einem aufstrebenden Ast
Standard Geometrische Figur - YinYang Symbol mit 4-Farben

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:


Code:
#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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.08.2013, 13:10
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.08.2013, 13:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.08.2013
Beiträge: 13
Markus123 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 21.08.2013, 13:52
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Dann konvertiere das Bild.
Jeder Bildbetrachter kann das. Ich empfehle Irfanview unter Windows.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 21.08.2013, 14:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.08.2013
Beiträge: 13
Markus123 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 21.08.2013, 14:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.08.2013
Beiträge: 13
Markus123 befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #7 (permalink)  
Alt 21.08.2013, 14:37
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.973
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Du kannst auch mit Gimp ein jpg als png speichern. Du musst halt nur einen transparenten Bereich definieren.
Mit Zitat antworten
  #8 (permalink)  
Alt 21.08.2013, 14:37
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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?
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #9 (permalink)  
Alt 21.08.2013, 14:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.08.2013
Beiträge: 13
Markus123 befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.08.2013, 15:39
Benutzer
neuer user
 
Registriert seit: 23.09.2008
Beiträge: 62
mariane befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Div Orientierung Leonidus CSS 22 30.05.2007 17:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:35 Uhr.