# CSS Regenbogen



## ikosaeder (2. Juli 2014)

Hallo, 
ich bräuchte mal Hilfe bei einem kleinen Problem mit 2D Transformation.
Ich möchte einen Regenbogen mit Sonne in CSS erstellen. Den Regenbogen und die Sonne haben ich schon
http://jsfiddle.net/8DbPC/
Ich brauche aber noch einen sauberen Weg um die Sonnenstrahlen zu erzeugen. Drehen und positionieren per Hand ist etwas mühselig, aber mir fällt gerade nichts dazu ein.
Vielleicht weiß jemand von euch einen Rat.


----------



## ComFreek (2. Juli 2014)

Hallo,

vielleicht etwas mit mask? http://www.html5rocks.com/en/tutorials/masking/adobe/
Aber unbedingt leichter als deinen Weg stelle ich mir das auch nicht vor.


PS: Schau dir mal dein jsFiddle in Chrome an. In IE schaut's aber super aus


----------



## ikosaeder (2. Juli 2014)

Es geht mir im Moment mehr um die Positionierung. Aber mask ist cool, danke für den Tipp.
Ich habe leider/ zum Glück kein Chrome.


----------



## ComFreek (2. Juli 2014)

Bezüglich mask dachte ich an ein gelbes Rechteck, welches du mit mask in Strahlen verwandelst. Sprich du lässt nur Strahlen durchscheinen und alles andere wird versteckt.


----------



## ikosaeder (25. Juli 2014)

Dank 
	
	
	



```
transfrom-origin
```
 bin ich ein gutes Stück weiter.
http://jsfiddle.net/ikosaeder/6FCCg/4/
Ich habe einige Elemente transparent gemacht, damit man sieht was ich da versucht habe.
Leider ist das Erzeugen der Strahlen von Hand sehr mühsam. Ich möchte aber keine CSS-Preprozessor wie Sass einsetzen sondern bei reinem CSS bleiben.


----------



## ComFreek (25. Juli 2014)

Nette Wolke 

Die Strahlen sind aber noch nicht richtig positioniert, oder habe ich hier einen Anzeigefehler (in IE 11, Firefox und Opera)?


----------



## ikosaeder (25. Juli 2014)

Was meinst du mit nicht richtig positioniert? Die Position ist (zumindest bei mir im Firefox), so wie ich es eingegeben habe. Allerdings bin ich selbst damit noch nicht zufrieden. Es kann sein, das der Ursprung noch nicht genau in der Mitte der Sonne liegt. Müsste ich noch mal prüfen.
Durch die Verschiebung des Ursprungs in die Mitte kann man sie auf jeden Fall besser rotieren und gleichzeitig verschieben. Damit sie gut aussehen muss man aber wohl mindestens alle 10 Grad also insgesamt 18 Strahlen erzeugen, von denen ein Teil von anderen Elementen verdeckt wird. Nicht sehr elegant.

So sieht es aktuell aus. Ich habe bislang 12 Strahlen. Das es Lücken gibt ist Absicht. Die Strahlen in den Lücken würden sowieso erst ausserhalb des div's den Rand der Sonne verlassen.


----------



## ComFreek (25. Juli 2014)

So wie auf deinem Bild sieht es bei mir auch aus. Ich hatte vergessen, dass du die Sonne und andere Dinge absichtlich leicht transparent gemacht hattest


----------



## djheke (25. Juli 2014)

ist eine grafik nicht einfacher, als deine divsuppe.


----------



## SpiceLab (25. Juli 2014)

djheke hat gesagt.:


> ist eine grafik nicht einfacher, als deine divsuppe.


Wie @ComFreek es in Post #2 vorschlägt? Oder "konventionell" in einem Grafikprogramm erstellt?


----------



## ikosaeder (25. Juli 2014)

Wenn es mir nur um das Ergebnis ginge, hätte ich ein Grafikprogramm benutzt. Ich sehe das Ganze als Übung für die Möglichkeiten von Css. Mit der Divsuppe kann man nämlich mehr mache als mit einem statischen Bild. Zum Beispiel kann man das Ganze animieren. Es gibt ein paar ziemlich coole Beispiele.


----------



## SpiceLab (25. Juli 2014)

djheke hat gesagt.:


> divsuppe


Wer sagt dir denn, dass @ikosaeder die schwer im Magen liegende DIV-Suppe überhaupt der Öffentlichkeit auftischt? 

Aus seiner letzten Antwort lese ich was ganz anderes heraus: "Experimentelles Forschertum"


----------



## brizzi (25. Juli 2014)

Hey ikosaeder,

Als Ersatz für richtige Strahlen bzw. als zusätzlichen scheinenden Effekt, würde ich dir empfehlen, der Sonne einen sehr weichen box-shadow in der der selben Farbe zu geben. Außerdem habe ich gerade gelesen, dass du es als Übung machst um es dann eventuell noch zu animieren. Hierfür hätte ich ein paar hoffentlich hilfreiche Tipps, auch was die Sonnenstrahlen betrifft.

Ich habe selbst mal eine Sonne animiert, auch wenn ich zugeben muss, dass ich PNG Grafiken (die Sonnenstrahlen) zur Hilfe genommen habe, die ich mit css animiert habe.
Dies könntest du aber auch ganz ohne Grafiken mit einer Kombination aus dem schon erwähnten mask und einer css animation (rotate) handhaben. Ich habe für meine Sonne mehrere absolut positionierte divs übereinander gelegt und mit unterschiedlicher Geschwindigkeit rotieren lassen, um einen realistischeren Effekt zu erlangen. 

bei Interesse an css animationen empfehle ich die dieses Tutorial --> http://www.mediaevent.de/css/animation.html


----------



## ikosaeder (26. Juli 2014)

Zuerst einmal ist es Ausprobieren. Wenn es gut aussieht wird es auch veröffentlicht.
@SpiceLab: Netter Link, aber die Div's sind ja kein schlechter Ersatz für semantische Tags sondern tatsächlich Blockelemente. 
Mal ein extremes Beispiel, was man so alles mit CSS machen kann:
http://pattle.github.io/simpsons-in-css/


----------



## SpiceLab (10. August 2014)

ikosaeder hat gesagt.:


> @SpiceLab: Netter Link, aber die Div's sind ja kein schlechter Ersatz für semantische Tags sondern tatsächlich Blockelemente.


Ich wollte dir überhaupt nicht zu nahe treten, respektive das Markup kritisieren, sondern lediglich den von @djheke genannten Begriff mit dem Link "definieren"


----------

