CSS Regenbogen

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.
 
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
 

Anhänge

  • upload_2014-7-25_23-41-20.png
    upload_2014-7-25_23-41-20.png
    656 KB · Aufrufe: 10
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/
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück