Login-Formular mit CSS3

dodo123

dodo123

Mitglied
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
 
Code: 
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:

Code: 
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:

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

oder

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

Gruß Lars
 
Zuletzt bearbeitet:
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück