Tipps & Tricks fürs Webdesign
Wir geben Ihnen nützliche Tipps und hilfreiche Tricks fürs WEbdesign mit HTML, CSS Javascript und Co.
Google+: Schaltflächenoptionen Wer ein Symbol für Google+ in die Website einbinden möchte, kann sich ganz einfach Googles Konfigurationstool zunutze machen. HTML5: Zeichenmuster für Formulareingabe festlegen Dank des in HTML5 eingeführten pattern-Attributs lassen sich reguläre Ausdrücke dire...
Google+: Schaltflächenoptionen
Wer ein Symbol für Google+ in die Website einbinden möchte, kann sich ganz einfach Googles Konfigurationstool zunutze machen.
HTML5: Zeichenmuster für Formulareingabe festlegen
Dank des in HTML5 eingeführten pattern-Attributs lassen sich reguläre Ausdrücke direkt im Markup der Seite nutzen, etwa so:
<form action="" method="post"><label for="username">Wählen Sie einen Benutzernamen: </
label><input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
autofocus
required><button type="submit">Go </button></form>CSS3: Effektvolle Überschriften
Mit CSS und etwas Vorstellungskraft lassen sich Effekte wie Feuer ohne den Einsatz von Bildern oder Javascript auf Text anwenden:
h1 {
text-align: center;
margin: 200px auto;
font-family: "League-Gothic", Courier;
font-size: 200px; text-transform: uppercase;
color: #fff;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
-20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}?CSS: Floats sauber abschließen
Eine ganz einfache Technik zum Abschließen von float-Konstruktionen besteht darin, eine fest definierte Breite zu deklarieren und die Overflow-Eigenschaft des übergeordneten Elementes auf den Wert hidden zu setzen. Dadurch können untergeordnete Elemente mittels der float-Eigenschaft frei darin schweben, ohne ein abschließendes Element mit der Eigenschaft clear zu erzwingen. Es entfällt aus dem gewöhnlichen Markup also etwa die Zeile
<br style="clear: both;" />und es bleibt lediglich der folgende Markup übrig:
<div class="superclear"><div class="float_left">1</div><div class="float_left">2</div></div><p>Dieses Element ist von der float-Eigenschaft der voran
gehenden Elemente nicht mehr betroffen.</p>Das CSS-Stylesheet benötigt etwa diese zwei Regelsätze:
.float_left {float: left;}
.superclear {
width: 100%;
overflow: hidden;
}Der einzige Nachteil dieser Arbeitstechnik besteht darin, dass Innenabstände (margin) des div-Elementes zusammenbrechen. Um zwischen dem übergeordneten div-Element und den nächsten nebengeordneten Elementen Raum zu schaffen, können Sie unten die Eigenschaft padding einsetzen, oder dem Geschwisterelement am oberen Rand die margin-Eigenschaft zuweisen.
Mobiles Web: QR-Code-Generator
Wer mobilen Benutzern zusätzlichen Navigationskomfort gönnen möchte, kann auf der Website QR-Codes anbringen, um das Erfassen wichtiger Informationen zu erleichtern. Mit einem winzigen jQuery-Plug-in namens MyQRCode lässt sich diese Aufgabe sogar kostenlos bewerkstelligen.QR-Codes sind eine beliebte Art zweidimensionaler Barcodes. Ein QR-Code speichert jeweils bis zu 4.296 alphanumerische Zeichen beliebigen Inhalts, zum Beispiel eine URL, eine Telefonnummer, Kontaktinformationen oder beliebige andere Texte. Zum Auslesen eines QR-Codes nutzen Besucher zum Beispiel die Kamera ihres Smartphones.So lässt sich etwa ein Link zu der betreffenden Website vom Papierausdruck viel schneller mit der Smartphone-Kamera erfassen als abtippen. Das Plug-in MyQRCode generiert QR-Codes für mobile Geräte mit Google Chart API unter Verwendung von jQuery. Standardmäßig erzeugt das Plug-in den QR-Code für die URL der betreffenden Website.
