Login-Formular mit CSS3

[dodo123]

Hi. Ich möchte gerne dieses Formular in CSS3 nachbauen:

http://dribbble.com/shots/713946-Login-or-Register?list=searches&tag=green

Habe auch schon ein bisschen herumexperimentiert, aber an einigen Stellen hapert es noch.

Hier mal das aktuelle Ergebnis: http://cssdeck.com/labs/full/svuvjstq

Ich tue mich noch mit der box-shadow-Eigenschaft ein bisschen schwer und mein Verlauf sieht auch noch leicht anders aus.

Welche Werte muss ich nehmen bzw. ändern, damit es noch näher an die Vorlage rankommt?

Grüße

 

[BoR]

box-shadow: 0px 0px 2px 0px #000 inset;

Wert 1: horizontale Ausrichtung
Wert 2: vertikale Ausrichtung
Wert 3: Grad der weichen Kante
Wert 4: Dicke des Schattens
Wert 5: Farbe (rgba auch möglich)
Wert 6: Schatten innen (inset weglassen = Schatten aussen)

Ist der Schatten noch zu stark halt einfach mal das ausprobieren:

box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5) inset;

Beim Button brauchst du nicht mit Gradienten arbeiten. Hier hilft auch ein Schatten weiter. Probier hier einfach mal:

box-shadow: 0px -[Hälfte der Höhe des Buttons] 0px [dunklere Farbe] inset;

oder

box-shadow: 0px -[Hälfte der Höhe des Buttons] 0px rgba(0, 0, 0, 0.2) inset;

Gruß Lars

 

[dodo123]

Vielen Dank. Das mit den vielen Werten verwirrt mich manchmal Habe es gleich mal geändert, habe nur anstatt #000 #FFF genommen, dann ist der Rahmen nicht so dominant. Die Inputfelder hab ich noch mit einem leichten Schlagschatten versehen, gefällt mir jetzt sogar etwas besser als in der Vorlage.