3D-Eingabefeld

von Fries Websolutions

Es gibt einige Möglichkeiten, viel mehr aus einem Formular zu machen. Ein 3D-Effekt zieht die Blicke auf sich und ist relativ einfach.

Wir formartieren die Ränder mit CSS. Die rechte und die untere Seite werden mit Schwarz verstärkt, die linke und obere Seite werden durch Weiß quasi unsichtbar gemacht. Mehr braucht man für einen Schatteneffekt nicht.

Am besten wirkt ein etwas dunklerer Hintergrund.

Als Rahmenstärke kommen 1 oder 2 Pixel in Frage. Auch dunkelgraue Farbtöne können verwendet werden.

Der Quellcode:

<form>
<p>Text<input type="text" name="textfield" style="border-top : 0px solid white;border-left : 0px solid white;border-right : 2px solid black;border-bottom : 2px solid black;margin-left : 10px"></p>

<p>Text<input type="text" name="textfield" style="border-top : 0px solid white;border-left : 0px solid white;border-right : 1px solid black;border-bottom : 1px solid black;margin-left : 10px"></p>
</form>