Jan Gantzert Software Development
21. Februar 2014
Style CSS Selectbox

Selectbox rein per CSS gestalten

Die Auswahlboxen (in Webkreisen besser bekannt als „Selectbox“) sind oft Bestandteil in HTML-Formularen. In ihrer Urform passen sie vom Aussehen leider nicht immer zum restlichen Design der Website und haben Browser-spezifisch auch gerne mal ein unterschiedliches...
12. Februar 2014
CSS Link Tooltips

Einfacher Link-Tooltip mit CSS

Um simple Tooltips für das Anzeigen weiterer Informationen zu einem Link bereitzustellen, benötigt man kein JavaScript. Etwas HTML und CSS reicht aus, um beim Hovern über den Hyperlink ein kleines „Popup“ mit weiterem Text, Bildern oder Links anzeigen zu lassen. Die...
3. Januar 2014
WP Anti-Spam

Snippet: Spamschutz mit Honeypots

Wer mit Spam bei HTML-Formularen oder bei WordPress Blogs durch ungewünschte Massenkommentare konfrontiert wird, kann mit einer einfachen Methode schnell Abhilfe schaffen: Den so genannten Honeypots. Die HTML-/CSS-Methode trickst Spambots aus, die in der Regel immer alle Felder...
24. Dezember 2013
Breadcrumbs

Apple Breadcrumbs zum Nachbauen, 2. Teil

Wie bereits im ersten Teil der DIY Apple Breadcrumbs angesprochen, kann die Brotkrümelnavigation auch rein per CSS3 und ein wenig HTML, also ganz ohne Bilder als Trenner generiert werden. Der HTML-Aufbau zur Ausgabe der Breadcrumbs setzt sich ebenfalls wieder über einfache...
15. Dezember 2013
Breadcrumbs

Apple Breadcrumbs zum einfachen Nachbauen

Im folgenden stelle ich Euch über ein einfaches Tutorial vor, wie man die Brotkrümelnavigation (besser bekannt als Breadcrumbs), die u.a. auf apple.com im Footer zum Einsatz kommt, auf die eigene Website mit wenigem HTML/CSS-Code bringen kann. Dieses Code-Beispiel ist auch für...
18. Juli 2013
Sliding Menu mit Anchors

„Sliding Menu“ mit jQuery & Anchors

Um mehr Dynamik in die eigene Website oder den eigenen Webshop zu bekommen, kann man anstelle einer fixierten Navigation auch schon mal ein so genanntes „Sliding Menu“ verwenden. Die Variante, die ich Euch heute vorstelle, basiert auf ein wenig jQuery und einfachen...
12. April 2013

Box-Shadow mit CSS3

Seit dem es mit CSS 3 und box-shadow die Möglichkeit gibt, HTML-Elementen ohne Zuhilfenahme von Bildern einen Schatten zuzuweisen, gehört das nachfolgende Beispiel mittlerweile wohl zu den Klassikern: CSS für den umfassenden Boxschatten
12. Februar 2013
Hover-Menü mit CSS

Horizontales 2 Level Menu mit CSS

Ein 2 Level Menu rein per CSS zu erstellen, ist weit verbeitet. Einige Anreize zum Selber(nach)bauen liefern wir Euch mit folgendem, leicht zu modifizieren Basismodell – die klassische 2 Level Menu-Variante in der horizontalen Ansicht. Beim MouseOver über die einzelnen...
15. Dezember 2012
Anti-Spam Wordpress

Snippets: Effizienter Antispam E-Mail-Schutz

Immer noch sind auf vor Spambots ungeschütze E-Mail-Adressen auf Websiten ein Problem. Dabei gibt durchaus viele Ansätze zur Gegenoffensive. Neben der unverlinkten ( at )-Schreiweise, z.B: john.doe(at)mysite.com, werden manchmal auch Bilder verwendet. Beide Varianten sind nicht...
10. Mai 2012
Zweigeteilter Website Hintergrund

Website mit zweigeteiltem Hintergrund

Mit CSS3 kann man mittlerweile recht einfach einer Website oder einem DIV-Container mehrere Hintergrundbilder zuweisen. CSS Doch auch mit CSS2 ist es möglich, einer Website bspw. einen zweigeteilten Hintergrund zu geben. Hierzu wird sowohl zum HTML-Tag als auch dem Body-Tag...
30. April 2012
Hintergrundbild Skalierung per CSS

Hintergrundbilder mit CSS skalieren

Immer wieder sieht man Websites, bei denen zwar großflächige Hintergundbilder eingesetzt wurden, die aber bei einer Auflösung x abrupt enden. Wer so etwas verhindern, aber kein JavaScript einsetzen möchte, kann zum einen auf die bekannte Tabelle-Resize-Lösung oder aber auf eine...
1. März 2012
Fusszeile am Browserende

Sticky-Footer am Ende des Browserfensters

Wer den Fußbereich nicht nur immer am Seitenende platzieren möchte, sondern am Ende des Browserfensters (Sticky Footer), benötigt einen kleinen Trick. Man verwendet wieder ein einfaches HTML-Grundgerüst. HTML-Markup Besonderheit hier: Der #minheight-Container dient als reiner...
12