Jan Gantzert Software Development
20. Mai 2015
Social Share-Buttons

Eigene Social Media Buttons mit Share-Funktion

In diesem Plugin-Tutorial stellen ich einen möglichen Ansatz vor wie man seine eigenen Social Media Buttons zum Teilen (Share-Funktion) von Beiträgen oder anderen Inhalten erstellen kann. Oft reichen die angebotenen Share-Funktionen wie bspw. von AddThis natürlich völlig aus. Wer...
6. Mai 2015
CSS Price Tag

„Price Tags“ per CSS erstellen

Ich hatte Euch in einem vorherigen Beitrag schon einmal vorgestellt wie Ihr mit Hilfe von CSS 3D Ribbons erstellen könnt. Nun folgt eine kleine Abwandlung davon, denn ich zeige nun wie man mit einfachen CSS3-Mitteln so genannte Price Tags (Preisschilder) kreiert. Dazu kommen auch...
30. April 2015

Responsive Videos per CSS oder JavaScript

Heute gibt es zur Abwechslung mal wieder ein kleines Tutorial zur Umsetzung von Responsive Videos mit HTML/CSS und JavaScript. Problem Wenn Ihr bspw. ein YouTube-Video in Eure Website einbettet, ist in der Normalansicht zunächst nichts besonderes zu beachten. Dies ändert sich...
15. Dezember 2014
Plugin Column Shortcodes

Gleichmäßiger Spaltensatz für WordPress Posts

Es gibt einige Möglichkeiten, um ein Spalten-Layout in die eigene Website oder den WordPress Blog zu integrieren. Ich stelle Euch heute drei Varianten für ein dreispaltiges Layout dazu vor. Die erste Version ist für statische Websites geeignet und bildet zugleich den Grundstoc...
11. September 2014
Code editor

Mit WP Hooks Javascript und CSS richtig einbinden

Des Öfteren habe ich in WordPress schon eigene CSS- und JavaScript-Dateien einbinden müssen, um z.B. bestimmte Plugins zu unterstützen. Nun gibt es grundsätzlich zwei unterschiediche Wege dies zu tun: Eine Option wäre das Einbinden der externen Dateien direkt in die header.php....
25. Juni 2014
CSS Ribbon mit Pseudoelementen

3D CSS Ribbon mit Pseudoelementen

Eine weitere Option zur CSS Ribbon-Variante von letzter Woche ist das Anwenden der CSS-Pseudoelemente before und after. Mehr über den Unterschied zu Pseudoklassen und Pseudoelementen könnt Ihr im SelfHtml-Forum nachlesen. Im Vergleich zum bereits vorgestellten Beispiel ist...
22. Juni 2014
3D CSS Ribbon

Infobox mit CSS Ribbon

3D-Ribbons sind bei der Hervorhebung von Infoboxen als grafisches Gestaltungselement sehr beliebt. Wer dazu vielleicht bislang – zumindest teilweise – noch eine Grafik verwendet hat, kann getrost darauf verzichten. Mit Hilfe von reinem CSS3 lassen sich solche...
28. Februar 2014
Aktive Links kennzeichnen

Tipp: Aktive Links per jQuery hervorheben

Aktive Links kann man innerhalb eines Menüs auf verschiedene Arten hervorheben. Die einfachste Variante wäre wohl die Visualisierung per reinem HTML und ein wenig CSS-Code statisch umzusetzen, z.B.: Simples CSS & HTML und im HTML-Markup: Im Ergebnis würde der erste Link des...
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...