Jan Gantzert Software Development
24. Mai 2012
Google Maps API V3

Google Maps V3 als Routenplaner für die eigene Website

Google Maps nutzen viele als reine Kartenansicht für ihre eigene Webseite. Aber mittels der Google API kann natürlich auch schnell ein schöner Routenplaner implementiert werden. Früher verwendete man zur API V2 noch einen zur Website generierten Maps-Key zur Geolokalisierung. Die...
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...
25. April 2012
Referenzkarte mit Google Maps

Kundenreferenzkarte mit Google Maps API V3

Google Maps JavaScript API ermöglicht die schnelle Einbettung von Google Maps in die eigene Webseite. Die Google Maps API-Referenz bietet dazu viele Ideen und Ansätze für mögliche Anwendungsbeispiele. So lässt sich mitunter mit wenig Aufwand ein Showcase für die Präsentation der...
15. April 2012
Zufälliger Bildwechsel mit JavaScript

Quick Random-Script für Bildwechsel

Wer bislang ein Hintergundbild per Zufall (Random) bei Refresh einer Seite laden wollte, hat womöglich folgende Variante oder eine Form davon verwendet:
5. April 2012
Radialer Hintergrundverlauf per CSS

Browserkonformer Hintergrundverlauf mit CSS

Um bislang einer Website einen linearen oder radialen Farbverlauf zu verleihen, musste oft auf Bilder zurückgegriffen werden, damit eine browserkonforme Anzeige möglich wurde. Mit CSS3 und einigen Filteroptionen für den Internet Explorer sind zumindest lineare Farbverläufe aber...
1. April 2012
Interaktive Karte mit Paper.js

Ostergrüsse der anderen Art

Natürlich möchten auch wir Euch für die kommenden Ostertage alles Gute wünschen und haben Euch zu diesem Zwecke einen kleinen Ostergruß vorbereitet. Wer dieses Blog regelmäßig verfolgt, dürfte allerdings erahnen, dass es sich hierbei um keine „gewöhnliche“ Osterkarte...
30. März 2012
Rotation mit Paper.js

„Rotating Letter“ – Animation via Paper.js

Im Artikelbeitrag zu Vektor-Tortendiagramm mit Paper.js erstellen hatte ich das neue Framework Paper.js schon einmal kurz vorgestellt. Nun möchte ich basierend auf dem frisch veröffentlichten Paper.js Nightly eine einfache Variante für eine Animation vorstellen. Selbige greift...
18. März 2012
Tortendiagramm mit Paper.js

Vektor-Tortendiagramm mit Paper.js erstellen

Nicht nur mit der JavaScript-Library Raphäel lassen sich Vektorgrafiken innerhalb einer Website einbinden. Auch mittels Paper.js können Animationen, Charts und dergleichen in Vektorform dargebracht werden. Größter Unterschied zwischen den beiden JavaScript-Bibliotheken: Während...
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...
23. Februar 2012
Fusszeile am Ende

Fußzeile immer am Seitenende

Um einen Fußbereich, Footer genannt, stetig am Ende der Website (nicht Browserfenster!) zu positionieren, ist keine komplexe HTML/CSS-Codierung nötig. Dazu bedient man sich zunächst einem einfachen HTML-Grundgerüst. HTML-Markup ^ Alle Inhalte außer der ID „footer“...
18. Februar 2012
Zentrierte Box zum Browserfenster

Zentrieren eines DIV-Containers relativ zum Browserfenster

Das horizontale Zentrieren eines DIV-Containers relativ zum Browserfenster ist mittlerweile geläufig. Voraussetzung ist, dass der DIV-Container eine bestimmte Breite hat. Dies kann sowohl ein Pixelwert (z.B. 900px) als auch ein Prozentwert (z.B. 80%) sein. CSS Für das vertikale...