HTML, CSS, Javascript & PHP

Tipps & Tricks fürs Webdesign

Wir geben Ihnen nützliche Tipps und hilfreiche Tricks fürs WEbdesign mit HTML, CSS Javascript und Co.

Tipps & Tricks fürs Webdesign

© Archiv

Tipps zur Menügestaltung mit CSS

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…