Zur Navigation

CSS-Kunst

Kann mir jemand den Code erklären?

1 Ranma (Gast)

#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

01.02.2016 01:34

2 Jörg

Kann man solche Figuren als Hintergrund verwenden?

wenn du da einen transparenten Layer drüberlegst

Was würde bei einer Kombination mit einem Hintergrundbild passieren?

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

Können die Figuren mit nur relativen Angaben konstruiert werden, so daß sie auf alle Bildschirmgrößen skalieren?

Ich denke nicht, da border-width relative Angaben nur in Bezug auf die Schriftgröße akzeptiert (em), aber nicht in Bezug auf die Größe des jeweiligen Elements (%)

Muß man die Figuren per Versuch und Irrtum finden oder geht das methodisch auf eine nachvollziehbare Weise?

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.

01.02.2016 11:45 | geändert: 01.02.2016 11:49

3 Ranma (Gast)

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

02.02.2016 02:01

4 Jörg

Zitat von Ranma
wenn du da einen transparenten Layer drüberlegst

Und wie würde ich das machen?

Kommt auf den Kontext an - z.B. mit position:absolute und top und left

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.

Diese CSS-Figuren sind denke ich eher eine Spielerei bzw. Demonstration was mit CSS machbar ist. Auf einer anderen Seite werden Flaggen per CSS dargestellt:

http://wrtlprnft.de/flaggen.htm

Für den alltäglichen Gebrauch ist so etwas aber eher nicht gedacht - da würde ich im Normallfall auch Grafiken einsetzen.

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?

Das ist eine Zweckentfremdung, die das Positionieren etwas einfacher gestaltet.

Der eigentliche Zweck von :before, :after und content wird in SELFHTML auf dieser Seite erklärt:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/generierter_Inhalt/content

Nur border und background werden mit Farben versehen, also sollte man etwas in die Figur hineinschreiben können?

ja

Deiner Beschreibung nach würde ich sagen, daß die Figuren per Versuch und Irrtum hergestellt werden.

Das ist nicht de Fall. Das von mir empfohlene Nacheinander-Anzeigen der CSS-Definitionen könnte dir aber helfen, zu verstehen, auf welche Weise die Figuren aufgebaut sind. Der Aufbau ist wohl durchdacht!

02.02.2016 11:58

Beitrag schreiben (als Gast)





[BBCode-Hilfe]