Webdesign / Tipps / Eingabefeld mit Schatten [IE|M|O|G]

von: Werner Zenk

Eingabefeld und Button mit Schatteneffekt.
Um einen 3D-Effekt in einem Eingabefeld zu erzeugen kann
man eine Grafik als Schatteneffekt einsetzen.


ObjektBeispiel

Mehrzeiliges
Eingabefeld
(Textarea)

Einzeiliges
Eingabefeld

Button

Bild: schatten5.gif
KB: 1,27
Größe: 457 x 237 Pixel
schatten5.gif


Quelltext:		 
<style type="text/css">
textarea {
 color: #333333;
 font-family: Verdana;
 font-size: 9pt;
 background: #FFFFFF;
 padding: 5px 0 0 5px;
 background-image: url('schatten5.gif');
}

input {
 color: #333333;
 font-family: Verdana;
 font-size: 9pt;
 background: #FFFFFF;
 padding: 5px 0 0 5px;
 background-image: url('schatten5.gif');
}
</style>

<textarea rows="5" cols="40"></textarea>

<input type="text" size="30">

<input type="button" value="...">
    Und Ihre Meinung?
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?  
Nuno:
sehr schön, ich habe vieles gesehen, aber das gefält mir!

josef:
geniall-bravo, sehr schön.

elma:
naja so toll isses jetzt net.

Dreyt:
Echt gute Idee, auf so was muss man erst ein mal kommen. Oder, Elma? -.-

Hinweis:
Den Schatten auf dem Button kann ich nicht nachvollziehen; sieht unnatürlich aus. Ich würde den einzelnen Elementen verschieden Klassen zuweisen, anstatt das allg. *input* zu definieren! input.text; input.button etc! Aber ansonsten gut umgesetzt.

Rainer:
Also: Ich habe schon einige HPs programmiert und finde (nicht nur) dieses Tool gnadenlos geil!
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!  
 Das könnte Sie interessieren:
Bildformat PNG  Verschiedene Zielgruppen  Haarlinien-Tabelle 2  Schattenbilder  Bildformat GIF  Schriftrolle mit Webfonts - Mit einem kleinen Trick lässt sich auf ein Papier schreiben, das keinen geraden Rand hat.  Die Typografie: Einheit oder Vielfalt?  Weicher Farbübergang in Containern  Inhalt mit Legende  Tabellenbild 3  Gratis-Webfonts von Google - Webfonts mit Textschatten. Mit den Google Web Fonts haben Sie die Möglichkeit eine ganze Reihe von Schriften auf Ihrer Webseite zu nutzen, ohne dass Sie diese auf den Server hochladen müssen.  Hypertext  Farblehre  Eingabe von mehreren Leerzeichen  …mehr
© 2000-2012 Homepage-Total.de Kontakt - Impressum - Banner