Box-Shadow in CSS3

Publiziert am 18. Februar 2013 von admin

Mit CSS3 sind die Zeiten vorbei, als Schattenwurf dem Programmierer den Angstschweißt auf die Stirn getrieben hat. Jede erdenkliche Form von Schatten ist mit dem box-shadow möglich, wenn man nur weiß, wie.
Vom Schlagschatten bis hin zu feinen und diffusen, richtungsungebundenen Schattenwürfen hat der Programmierer mit box-Shadows alle Möglichkeiten, einen Schatten realistisch nachzubauen, ohne ein Grafikprogramm bemühen zu müssen. Weiterlesen →

Veröffentlicht unter CSS3 | Verschlagwortet mit , | Hinterlasse einen Kommentar

Farbverläufe (Gradients) mit CSS3

Publiziert am 25. Januar 2013 von admin

Farbverläufe machen die Welt schöner. Zumindest, wenn ein feinfühliger Designer damit hantiert und keine Regenbogenleuchthintergründe entstehen. Gradienten eignen sich für eine Vielzahl von Einsatzmöglichkeiten und schaffen Realismus, auch ohne Grafiken verwenden zu müssen. In der „echten“ Welt gibt es durch den Lichteinfall für das Auge des Betrachters keine Fläche, die ganz einfarbig ist. Es gibt immer einen Farbverlauf von heller zu dunkeler und so sind Gradients unverzichtbar für realistisch wirkende Designs.
Auch die beliebten gläsernen Buttons lassen sich durch Farbverläufe erstellen.

Das Zauberwort dafür heit in CSS3 „linear-gradient„. Weiterlesen →

Veröffentlicht unter CSS3 | 1 Kommentar

8. Offline Datenspeicherung per localStorage

Publiziert am 22. Oktober 2012 von admin

Einsetzbar ab FireFox 3.5, Safari 4, Internet Explorer 8 und Chrome

Wenn man in einer Web-Anwendung Daten dauerhaft speichern will, löst man dies auf dem Server in einer Datenbank.  Um die Daten an den Server schicken zu können, ist jedoch eine Internetverbindung notwendig.

Apps sollten jedoch grundsätzlich Daten jederzeit an jedem Ort und ohne online zu sein, speichern können.
Für den Programmierer von Web Apps gab es da bisher nur die Möglichkeit, das über Cookies zu erledigen, was allerdings große Einschränkungen in Bezug auf Datenmenge und Sicherheit aufwies. Mit HTML5 ist es möglich, Daten „Client-Side“ also auf dem Endgerät auch offline zu speichern. Weiterlesen →

Veröffentlicht unter Apps programmieren | Verschlagwortet mit , , | 5 Kommentare

10 praktische CSS3 DIV Boxen Designs

Publiziert am 15. Juni 2012 von admin

Gutes Design lebt von den Details. Schöne Headerbilder sind toll, aber gefällige Strukturierung gerade auch des Contents erst macht den Unterschied zwischen einer amateurhaften und einer professionellen Website aus.

Wir stellen hier eine Reihe von Boxen vor, die gänzlich ohne zusätzliche Grafiken auskommen, sondern lediglich durch CSS3 formatiert sind. Das spart nicht nur Datenvolumen sondern dem Programmierer auch Zeit und Nerven.

Weiterlesen →

Veröffentlicht unter CSS3 | Verschlagwortet mit , , , , , | 6 Kommentare

SVG Files Toolbox

Publiziert am 10. Juni 2012 von admin

SVG Files sind „scalable vector graphics“, also Grafiken, die nicht in Pixelform vorliegen, wie etwa ein GIF oder JPEG, sondern die einfach ausgedrückt „gezeichnet“ werden.
Dazu ist nicht mehr nötig, als die Koordinaten des Startpunktes und des Endpunktes, sowie ein Füllfarbe und eine Strichstärke und schon hat man eine Strecke gezeichnet.
Genauso funktioniert es mit Rechtecken, Kreisen, Ellipsen und allen anderen geometrischen Formen, die beliebig transformiert und kombiniert werden können.
Weiterlesen →

Veröffentlicht unter HTML5 | Verschlagwortet mit , , , , | Hinterlasse einen Kommentar

HTML5 Video Tag

Publiziert am 15. Mai 2012 von admin

Eine wunderschöne Verbesserung beschert uns HTML5 auch durch die Einführung des Video Tags. Vorbei sind die Zeiten, als man Videos sicher und browserübergreifend nur mit Flash abspielen konnte.
Diese Zeit sind insbesondere seit dem enormen Erfolg von Apples iPhone und iPad vorbei, weil auf diesen Geräten überhaupt keine Flash Inhalte angezeigt werden. Daher ist es umso wichtiger, Videos jetzt über das neue HTML5 Element einzubinden, um damit die Verfügbarkeit des Videos auf einer größtmöglichen Zahl von Endgeräte/Browserkombinationen zu gewährleisten.
In diesem Tutorial wird erklärt, wie das Video Tag eingebunden werden kann, welche Formate untersützt werden und wie es mit der Browserkompatibilität aussieht. Weiterlesen →

Veröffentlicht unter HTML5 | Verschlagwortet mit , , , , | 3 Kommentare

CSS3 Transitions: Texte transformieren mit ’scale‘

Publiziert am 27. April 2012 von admin

CSS3 bietet etwas, das bisher nur mit JavaScript möglich war: Animation.
Bisher musste eine Animation, also eine graduelle Änderung von Eigenschaften über einen festgelegten Zeitraum, relativ mühsam per JavaScript programmiert werden.
Mit CSS3 gibt es jetzt die einfache und elegante Lösung: CSS3 Transitions.
Weiterlesen →

Veröffentlicht unter CSS3 | Verschlagwortet mit , , , , , | 1 Kommentar

HTML5 Diagramme mit Online Generator selbst erstellen

Publiziert am 14. April 2012 von admin

Wir bekommen regelmäßig Rückfragen zu unseren Artikeln zum Programmieren von HTML5 Säulen- und Tortendiagrammen. Obwohl die Codes der Diagramme kommentiert vorliegen, erfordert die Erstellung der Diagramme einige Einarbeitung, insbesondere in die JavaScript Schleifen. Daher haben wir einen Online Generator programmiert, mit dem es viel einfacher geht:


Mit unserem Online Generator für HTML5 Diagramme können Sie jetzt mit ein paar Klicks Ihr eigenes Diagramm erstellen. Das Diagramm kann danach einfach per „iframe“ auf Ihrer Website verwendet werden.

  • Einfachste Erstellung über Formular
  • Eigene Daten einfach in Textfelder eingeben
  • Animierte Balken für beste Aufmerksamkeit
  • Zahlreiche Templates für schnelles Design

Jetzt HTML5 Diagramm Generator testen

Veröffentlicht unter HTML5 | Verschlagwortet mit , , , , , | Hinterlasse einen Kommentar

Die 10 besten HTML5 Websites

Publiziert am 20. März 2012 von admin

Was ist nun eigentlich eine HTML5 Seite in diesem Sinne?

Bei der Auswahl der besten HTML5 Websites haben wir darauf geachtet, dass auch tatsächlich HTML5 Techniken zum Einsatz kommen. Nicht ausreichend ist für uns dabei die bloßen Anwendung von HTML5 Elementen zur Auszeichnung, also den Header, Section, Article Tags. Weiterlesen →

Veröffentlicht unter HTML5 | Verschlagwortet mit , , , | Hinterlasse einen Kommentar

Cut the rope als HTML5 Version

Publiziert am 10. Februar 2012 von admin

Für alle, die bisher noch am Potential von HTML5 gezweifelt haben, gibt es jetzt den ultimativen Augenöffner. „Cut the Rope“, vielen als knuffiges App mit sensationellen 16 Mio. Downloads bekannt, wurde von den Entwicklern jetzt in HTML5 umgesetzt.
Der Titel ist zwar vom technischen Anspruch her kein 3D Shooter, aber aufgrund der sehr liebevollen Gestaltung und der zum Einstz kommenden Physik dennoch eine gewaltige Herausforderung, die in vor-HTML5 Zeiten nicht denkbar gewesen wäre.

Weiterlesen →

Veröffentlicht unter HTML5 WebApps | Verschlagwortet mit , , , , | Hinterlasse einen Kommentar