Aloha ;)

Jetzt hat die rote Grafik einen ganz weichen verlauf. Wie könnte ich dieses umsetzten so dass er in allen relevanten wichtigen Browsern funktioniert? Und er sollte wirklich nur sehr sanft sein.

Dann suchst du linear-gradient. Wie weich der ist hast du selbst in der Hand ;)

Mit ::before habe ich bis jetzt noch nie etwas gemacht. Hab es mal angeschaut finde aber dieses ist hier nicht nötig. Ich kann innerhalb von meinem DIV eine Grafik einfügen?

Auch das kannst du tun. Klarer Vorteil der Variante, die Matthias vorgeschlagen hat: Du kannst das Bild im CSS festlegen. Dadurch werden viele sinnvolle Dinge möglich, z.B. das Bild durch media-query zu kontrollieren (kein oder anderes Bild für kleine Bildschirme aka Smartphones) oder auch die Entscheidung ob Haus oder Telefon einfach durch die Klasse des übergeordneten Elements festmachen. Außerdem ist das auch die semantisch sinnvollere Variante, da das Bild keinem inhaltlichen, sondern nur gestalterischem Zweck dient. Du kannst aber auch mit vollem Bewusstsein eine weniger sinnvolle Alternative wählen, das ist deine Entscheidung ;)

Mit dem 3D-Effekt ist so eine Sache, da ich bis jetzt noch nie etwas mit box-shadow gemacht habe bzw. nur ein Schatten um die ganze Seite gelegt.

Einfach mal ausprobieren. Das Wiki ist diesbezüglich mit Informationen ja auch nicht gerade spärlich ;) Wirst schon sehen: Ein kleiner Schatten reicht und das Ganze wirkt plastisch ;)

Die Grafik selbst reduziert sich dann auf ein weißes Telefon vor einem transparenten Hintergrund.

Beim Telefon und Haus bin ich noch am überlegen ob ich eine Grafik von hier nehmen soll.

Ob das nachher in den Stil des Gesamtkonzepts passt musst du entscheiden, prinzipiell weiß ich nicht, was dagegen spricht. Sicherlich keine schlechte Wahl, da Vektorgrafik.

Grüße,

RIDER