mehrdimensionelle Arrays

[Gunnar Bittersmann]

@@Andreas Vogt

nein, deine Verbesserungen habe ich nicht übernommen.

Solltest du noch.

Habe knapp 2 Stunden mich am korrekten Box-Shadow versucht

Shadow??

bekomm es aber nicht so hin wie mit den Grafiken.

Was kriegst du da nicht hin?

Mit einem Colorpicker (Firefox stellt einen für <input type="color"/> zur Verfügung) die Farbwerte für deinen blauen Farbverlauf ermittelt: oben #2161A7, unten #16406C.

Also einfach für das Container-Element
background-image: linear-gradient(to bottom, #2161A7, #16406C)

Dieses soll noch runde Ecken recht unten und links untern haben (die anderen beiden also Radius 0):
border-radius: 0 0 2em 2em

Für den Hovereffekt musst du nur den Gradienten umdrehen, also entweder die Farbwerte vertauschen oder die Richtung in to top ändern.

Den Effekt (oder besser einen noch auffälligeren) solltest du unbedingt auch für :focus angeben, sonst sieht man bei Tastatursteuerung nicht, wo man sich gerade befindet.

Das könnte dann so aussehen. Mehr HTML-Elemente braucht man dazu nicht. (Es würde sogar ohne ul und li gehen.)

Daher belass ich es bei den Grafiken.

Die Headergrafik solltest unbedingt überarbeiten, die ist völlig verwaschen. Außerdem ist das keine Verzierung, die gehört nicht als Hintergrundbild ins CSS, sondern als img-Element ins HTML. Und zwar mit Alternativtext, der denselben Inhalt auch für Nutzer angibt, die die Grafik nicht sehen können (oder wollen und Grafiken laden abgeschaltet haben).

LLAP 🖖