HTML, CSS, Javascript & PHP Tipps & Tricks fürs Webdesign
© Archiv
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:
CSS3: Effektvolle Überschriften
Mit CSS und etwas Vorstellungskraft lassen sich Effekte wie Feuer ohne den Einsatz von Bildern oder Javascript auf Text anwenden:
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
und es bleibt lediglich der folgende Markup übrig:
Das CSS-Stylesheet benötigt etwa diese zwei Regelsätze:
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.
