Gestaltungsmöglichkeiten von Webformularen mit CSS

Aus Formupedia

Wechseln zu: Navigation, Suche

Mit Maskito Formularware können Sie Ihre Formulare schnell und einfach gestalten. Dafür benutzen wir vordefinierte Controls, die in ihrer Farbe an das Corporate Design Ihres Unternehmens angepasst werden können. Manchmal reichen diese Gestaltungsmöglichkeiten aber nicht um die Vorgaben der Grafiker umzusetzen. Im folgenden kleinen Beispiel möchten wir Ihnen zeigen, wie Sie mit Hilfe von CSS Webformulare anpassen können.

Praxisbeispiel

Wir möchten den Standard-Button folgender Vorgabe anpassen:

  • Schriftart soll Verdana sein
  • Jeder Button soll 30px hoch sein.
  • Die Hintergrundfarbe der Buttons hat der Grafiker mit folgendem Farbcode definiert: RGB 222,49,41 bzw. Hex #de3129
  • Jeder Button soll runde Ecken erhalten.
  • Jeder Button soll einen Schatten erhalten.

Datei:Standardbutton.png‎ Datei:CSS-Button.png‎

Vorgehensweise

  1. Öffnen Sie im Maskito FormDesigner ein bestehendes oder neues Projekt.
  2. Klicken Sie am unteren Rand der Bühne auf die Registerkarte „Style“.
  3. Laden Sie eine neue CSS-Vorlage*.Datei:CSS-Vorlage.png‎
  4. Fügen Sie folgenden Code in den Textbereich des entsprechenden Elements (in diesem Beispiel. „.Button“) ein.
  5. Speichern Sie das Formular auf dem FormServer und sehen Sie, wie sich das Standardformat des Controls verändert hat.


Code für unser Beispiel

.Button {
 font-family: 'Verdana' , sans-serif;
 color: white;
 font-size: medium;
 height: 30px;
 background-color: #de3129;
 border-width: 1px;
 border-style: groove;
 border-radius: 5px;
 border-color: #de3129;
 box-shadow: 5px 5px 3px #888888;
 }

CSS bietet Ihnen eine Vielzahl zusätzlicher Gestaltungsmöglichkeiten. Weitere Einführungen und Tutorials finden Sie hier [[1]]

Wir wünschen Ihnen viel Spaß bei der Gestaltung Ihrer Formulare und stehen Ihnen gern für Fragen zur Verfügung.



* Diese Vorlage enthält die notwendigen Klassenbezeichnungen für die Gestaltung der einzelnen Elemente. Bitte beachten Sie diese bei der CSS Erstellung.


Zur Übersicht über weitere Funktionen

Persönliche Werkzeuge