Jan Gantzert Software Development
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...
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...
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...
16. Juni 2014
SVG-Graufilter

Snippet: SVG-Graufilter

MouseOver-Bildeffekte mit Graufilter werden immer wieder gerne für Websiten wie z.B.Fotogalerien verwendet. Neben dem Einsatz von JavaScript oder einem CSS-Bildaustausch beim Hovern gibt es auch eine einfach anzuwendende CSS-Filtervariante. Hier ein kleines Code-Beispiel für den...
26. März 2014
Diagonale Hintergrundverläufe CSS3

Snippet: Diagonale Hintergrundverläufe mit CSS3

In einem vorangehenden Beitrag hatte ich bereits kurz die Verfahrensweise zum Erstellen radialer Hintergrundverläufe per CSS vorgestellt. Nun will ich hier noch ein kleines Beispiel für diagonale oder auch horizontale Hintergrundverläufe nachreichen. Wegen der Nicht-Unterstützung...
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...
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...
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...
12