CSS-Kunst

#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; } 

Das ist von dort: https://css-tricks.com/examples/ShapesOfCSS/

Ich verstehe kaum etwas von dem CSS dort. Spätestens wenn :before oder :after vorkommt, bin ich abgehängt. Kann man solche Figuren als Hintergrund verwenden? Oder beansprucht das sowohl den Hintergrund als auch den Vordergrund? Was würde bei einer Kombination mit einem Hintergrundbild passieren? Können die Figuren mit nur relativen Angaben konstruiert werden, so daß sie auf alle Bildschirmgrößen skalieren? Muß man die Figuren per Versuch und Irrtum finden oder geht das methodisch auf eine nachvollziehbare Weise?
Ranma

wenn du da einen transparenten Layer drüberlegst

Und wie würde ich das machen?

Das kommt darauf an, was du durch das Hintergrundbild ersetzen möchtest: die Fläche außerhalb der Yin-Yang-Figur, oder alle Hintergründe der Farbe #eee? in letzterem Fall könnte man #eee vielleicht durch die Eigenschaft transparent ersetzen und das Hintergrundbild wird dem Elternelement zugeordnet

Vor allem wollte ich wissen, ob eine Kombination überhaupt möglich ist. Wenn ich das machen wollte, dann am ehesten statt der Farbe #eee, in der Hoffnung, daß dann das Hintergrundbild nur teilweise zu sehen ist (durch per PHP erzeugtes CSS sollten dann unterschiedliche Teile gezeigt werden können) oder entsprechend verzerrt wird (das wäre dann eine andere Anwendung als ein Teilausschnitt). Bilder sind älter als CSS, darum interessiert mich noch besonders, ob eine Figur als CSS-Kunst gegenüber einem klassischem Bild handfeste Vorteile hat oder die Leute nur ihre künstlerische Ader ausleben. Eigentlich geht es mir hier darum, die Vorteile herauszufinden.

Nachvollziehen kannst du das, indem du zuerst nur die Definitionen für #yin-yang anzeigen lässt, dann auch für #yin-yang:before und am Ende für alle drei. Die Formen werden durch die abgerundeten Borders gebildet, und mithilfe der Positionierung passend übereinandergelegt.

Selbst in den ausführlichsten der mir bekannten Anleitungen für CSS werden :before und :after nicht erklärt. content: "" verwirrt mich auch etwas, weil wieso definiert man das, wenn sowieso nur ein leerer String darin ist? Nur border und background werden mit Farben versehen, also sollte man etwas in die Figur hineinschreiben können?
Deiner Beschreibung nach würde ich sagen, daß die Figuren per Versuch und Irrtum hergestellt werden. Von der verlinkten Seite her ist offensichtlich, daß man mehr als eine Figur auf einer Netzseite haben kann. Es könnte sich also eventuell lohnen, nach fremdem Code dieser Art zu suchen. Bekomme ich die Figur überhaupt mit einem einzelnen <div class="yin-yang"></div> ins HTML übernommen? Was würde mit einem Text innerhalb des DIV-Containers passieren?

Vielleicht bleibe ich am Ende doch beim klassischen Bild. Man könnte auch mittels PHP Grafiken erzeugen. Aber vielleicht hat der Methode gegenüber der Weg über CSS Vorteile? Anscheinend sind nämlich nur wenige Zeilen Code für eine recht komplexe Figur notwendig. Aber ich kann nicht abschätzen wieviele Zeilen PHP man brauchen würde, wenn man das genauso sauber implementiert und keine Umwege geht (ohne die ich es wahrscheinlich nicht fertigbrächte). Vielleicht können CSS-Figuren nicht beliebig komplex werden, obwohl ich die Beispiele beeindruckend finde. Unterschiedliche Brauser kommen unterschiedlich gut damit klar und bisher gibt es noch kein Beispiel, das einen dreidimensionalen Eindruck erweckt. Könnte vielleicht noch kommen? Oder doch nur Kunst um der Kunst willen?
Ranma