Gratis HTML5 & CSS3 Formular

Heute gibt es ein kleines Geschenk des Pixelero-Teams. Ein vollständiges, in HTML5 & CSS3 erstelltes Formular zur freien Verfügung. HTML5 stellt einige Neuerungen im Form-Tag zur Verfügung, so z.B. die „placeholder“-Angabe die den Nutzer darauf hinweist, welche Daten er einzugeben hat. Auch der Gestaltung sind dank CSS3 kaum Grenzen gesetzt, beispielsweise beliebige Schriftarten, Verläufe und so weiter.

Einen schönen Überblick aller neuen HTML5-Elemente in Formularen gibt es hier. Alternativ natürlich immer auf w3schools.com.

Wir wünschen viel Spaß damit mit dem Gratis HTML5 & CSS3 Formular und hoffen das Paket erweist sich eventuell als nützlich.

Vorschau:

html5_form

 

DEMO   DOWNLOAD

(Download-Datei im zip-Format)

CSS3 / Ein Überblick

Inzwischen pfeifen es auch die letzten Spatzen von den Dächern, CSS3 ist nicht mehr fern. Das Normierungsgremium der W3C Working Group arbeitet schon seit einigen Jahren am kommenden Standard CSS3. Was ändert sich? Kurz gesagt, CSS3 wird leistungsfähiger, umfangreicher und ein klein wenig komplizierter.

Aktuell wird schon mehr CSS3 verwendet wie man zunächst vermuten möchte, oft wissen diejenigen gar nicht das es sich im verwendeten Code um CSS3 handelt. Dies ist der Fall bei z.B. Webseiten-Anpassungen an mobile Geräte (Media Queries), oder bestimmten Bildeffekten. Die Verwendung ist natürlich nur durch die breite Unterstützung von CSS3 durch die aktuellen Browser möglich.

Hier kurz ein Überblick der verschiedenen Browser in Hinblick auf CSS3 Unterstützung:

Browser Unterstützung von CSS3
Safari Version 5.194,7%
Firefox Version 22 94,7%
Google Chrome Version 28 94,4%
Internet Explorer Version 9 52,6%
Internet Explorer Version 10 94,4%
Opera Version 1594,7%

Quelle: Normansblog.de

Ältere Browser unterstützen gar nicht bzw. nur in sehr geringen Umfang CSS3. Diesen Umstand muss man sich eben bewusst sein, ich persönlich irgnoriere alte Browser einfach, sonst macht es kaum Sinn sich mit CSS3 zu beschäftigen. Wenn man sich dann noch anschaut, wie viele Webseiten in den letzten 2 Jahren CSS3 verwenden unabhänig der Browser-Verbreitung, so untermauert dies nur die Unnötigkeit für alte Browser zu entwickeln.

Was endlich einfacher geht

Viele Dinge die früher nur mit gewissem Aufwand umzusetzen waren, sind nun durch simple CSS3-Befehle möglich, hier eine kleine Auswahl von Beispielen, die großen Neuerungen lassen wir außenvor.

1. Runde Ecken

Zunächet der entsprechende CSS-Code, durch diesen erhält man als Ausgabe ein Rechteck mit 4 (gleich) runden Ecken.

//
border: 1px solid;
/* Radius Anweisung, alle 4 Ecken gleich */
border-radius: 5px;

/* Radius detailliert, Variationen möglich */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
//

Wie man sieht, ist es auch möglich die Ecken einzeln anzusprechen um so unterschiedliche Radien zu erzeugen. Auch anbieterspezifischen CSS-Eigenschaften wie -moz-border-radius (Firefox) und -khtml-border-radius (Safari) werden bereits unterstützt.

2. Schlagschatten:

Mit folgendem Befehl lassen sich Schlagschatten in beliebiger Richtung erzeugen. Zunächst der Befehl:

//
#boxshadow {
box-shadow: 10px 10px 15px #666;
}
//

Kurze Erläuterung der einzelnen Angaben: box-shadow ist das einleitende Tag, die erste Zahl steht für den horizontalen Versatz, die zweite Zahl steht somit für den vertikalen Versatz. Die dritte Zahl, hier 15px, steht für den Versatz. Die letzte Angabe ist ein hexadezimaler Farbwert.

3. Schatten für Texte:

Hier gilt das selbe Prinzip wie bei den Schlagschatten, nur das einleitende Tag ist anders. Hier ein Beispiel:

//
#textshadow {
text-shadow: 3px 3px 4px #232323;
}
//

4.Farbverläufe:

Auch Farbverläufe lassen sich recht einfach mit CSS3 umsetzten, allerdings ist etwas mehr Code notwendig. Gleich vorweg empfehle ich entsprechende Generatoren in Netz, wie z.B.: colorzilla.com Dort lassen sich schnell Verläufe erstellen und man muss im Notfall nur schnell die Farbwerte oder Position ändern. Nachfolgend ein Code-Beispiel:

//
#gradient {
background: #b5bdc8; /* Old browsers */
background: -moz-linear-gradient(top,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), 
color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); 
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',
GradientType=0 ); /* IE6-9 */
}
//

 5.Eigene Schriftarten:

Eine Neuerung die ich wirklich begrüße, da es früher mehr wie umständlich war individuelle Schriftarten zu verwenden. Prinzipiell war dies eigentlich nur mit Grafiken umsetzbar. Mit CSS3 ist dies nun recht zügig möglich, auch hier verweise ich auf sehr nützliche Online-Generatoren, als Beispiel fontsquirrel.com.

Mit diesen Generatoren ist man deshalb auf der sicheren Seite, da auch z.B. zusätzlich Vektoren erzeugt werden. Durch diese Vektoren in Verbindung mit CSS3 können die Schriftarten in jedem Browser angezeigt werden. Fast jedem, Chrome hat hin und wieder Probleme mit der Kantenglättung von bestimmten Schriftarten. Jetzt aber ein Beispiel für die Einbindung:

//
@font-face typoslab{
    font-family: 'typoslabserif-lightregular';
    src: url('typoslabserif-light-webfont.eot');
    src: url('typoslabserif-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('typoslabserif-light-webfont.woff') format('woff'),
         url('typoslabserif-light-webfont.ttf') format('truetype'),
         url('typoslabserif-light-webfont.svg#typoslabserif-lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Einbinden an anderer Stelle per CSS ID */
//
#typoslab{
font-family: 'typoslabserif-lightregular';
}
//

 5. Texte mehrspaltig formatieren:

Bisher war das Darstellen von mehreren Spalten nur in Verbindung mit DIV-Containern und entsprechender CSS-Anweisung möglich. Mit CSS3 ist das mit einfachen Angaben, in verschiedenen Konfigurations-Modellen möglich.

Hier ein paar Beispiele:

Möglichkeit 1, Gesamtbreite und Spaltenbreite werden angegeben der Rest wird ermittelt, hier 3 Spalten mit einer Breite von jeweils 200px:

//
#spalte1 {
  width: 600px;
  column-width: 200px;
}
//

Möglichkeit 2, Gesamtbreite und Spaltenanzahl werden angeben, hier simpel 3 Spalten automatisch auf die Breite verteilt.

//
#spalte2 {
  width: 600px;
  column-count: 3;
}
//

Möglichkeit 3, ergänzend zum vorherigen Code, die Angabe des Zeilenabstands (column-gap).

//
#spalte4 {
  width: 600px;
  column-count: 3;
  column-gap: 10px;
}
//

Es gibt noch Möglichkeiten bestimmte Formatierungen zu beeinflussen wie z.B. Trennstriche, Abstände oder Umbrüche, darauf gehe ich an dieser Stelle nicht ein, denn das würde den Rahmen sprengen.

Alle weiteren Neuerungen, welche mit unter auch viel Umfangreicher sind, behandle ich eventuell an anderer Stelle und lasse diesen Artikel hier enden. Ich wünsche viel Spaß beim testen, bei Fragen einfach das Kontaktformular nutzen.

~FIN~