HTML5 Tags im Überblick

Publiziert am 14. September 2010 von admin

Noch keinen genauen Überblick, was HTML5 für Elemente beinhaltet? Und welches der vielen Elemente gehört wohin?
Der praktische, interaktive und ultimative Überblick dazu mit Tag-Klassifikation ist auf der Seite “HTML5 Tag Systematik” angekommen
Übersicht über alle HTML5 Tags / Elemente

Veröffentlicht unter HTML5 | Hinterlasse einen Kommentar

Accordion Boxen mit CSS3

Publiziert am 15. Mai 2013 von admin

Es gibt dank CSS3 einen fast schon unfassbar einfachen Weg, um dynamisch animierte Accordion Menus bzw. Boxen zu erstellen, die beim Anklicken des Titels sich gemächlich (natürlich nach genauer Vorgabe des Schöpfers) auseinanderfalten.

Nachfolgend dazu ein Beispiel:
Weiterlesen →
Veröffentlicht unter CSS3 | Verschlagwortet mit , , | Hinterlasse einen Kommentar

Box-Shadow Generator

Publiziert am 21. Februar 2013 von admin

box-shadow CSS 3 code generator

Generieren Sie schnell und einfach Code für box-shadow


Arbeiten Sie mit dem gesamten Code dieses CSS3 Code Generators online auf Codepen/Montego

Box-Shadow Parameter

-
+
-
+
-
+
-
+
  #


box-shadow Generator

Surprise Me!


box-shadow styles

Schlagschatten
weich
Licht von Oben
reduziert
inset
glow (benötigt dunklen Hintergrund)


CSS3 Code für box-Shadow generieren

Mit CSS3 ist es möglich geworden, Elementen einen Schatten zuzuweisen, ohne diesen als Grafik anlegen zu müssen. Da das box-Shadow Attribut bis zu 5 Parameter bietet (siehe box-shadow in CSS3) ist es allerdings nicht ganz leicht, die Parameter zu durchschauen und das Erscheinungsbild vorherzusehen.

Mit diesem Generator können Sie die Werte manuell einstellen und sehen das Ergebnis direkt angezeigt.

Nutzen Sie auch dan "Surprise-Me" Werte Generator, um dem Box-Shadow Zufallswerte zuzuweisen.
Schließlich können Sie auch über die vordefinierten Styles von beliebten box-shadow Parametern inspirieren lassen.

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

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 | Hinterlasse einen 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 , , | 2 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 , , , , , | 1 Kommentar

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 , , , , | Hinterlasse einen Kommentar

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