Nachdem wir das Stylesheet erstellt und eingebunden haben kümmern wir uns um ein paar gestalterische Details:
#header h1 a {
text-shadow: 1px 1px 0px #EEE;
background-image: -webkit-gradient
(linear, left top, left bottom, from(#ccc), to(#999));
}
Lediglich 32 Codezeilen lang ist der Code zum erzeugen dieser spassigen “leuchten Linien im Dunklen” – incl. HTML-Canvas. Es wird dafür mithilfe einiger Zufallszahlen alle 50ms eine neue Kurve erzeugt (bezierCurve) die verblasst indem sich über den canvas in jeder Schleife ein scharzes rectangle (mit alpha 0.1) legt. Der “glow” um die Kurve wird durch einen Schatten mit weißer Farbe erzeugt. Beeindruckt?
Sehr informatives Video [engl.], das einen guten Überblick über HTML5 gibt. Dabei geht es mehr um das Verständnis übergeordneter Zusammenhänge als um technische Details:
Introduction to HTML 5 from Brad Neuberg on Vimeo.
Das klassische Look von Apps auf dem iPhone lässt sich mit HTML und einer Prise CSS ganz leicht herstellen.
Die CCS-Styles:
Weiterlesen
HTML5 ist ein Quantensprung in vielen Hinsichten. Es ist seit HTML 4.01 (das bekanntlich aus dem letzten Jahrtausend stammt) die erste akzeptierte Weiterentwicklung und hat es bereits fast zum Standard geschafft.
Viele Neuerungen betreffen die Auszeichnung von Elementen und helfen dabei nicht nur dem Programierer, den Überblick zu behalten, sondern liefern auch Hinweise für Suchmaschinen, den Inhalt richtig zu interpretieren (Endlich kann man Google außer über die robots.txt sagen, dass Home, Index oder Impressum NICHT zu den wichtigen Begriffen der Seite zählen.)
Weiterlesen
Mit HTML5 und CSS lässt sich der Look eines nativen iPhone Apps komplett nachstellen. In diesem Tutorial lernen Sie alles über die CSS-Stile, Border-Radius und Seitenskalierung, um professionelle Web-Apps am Beispiel des iPhones zu erstellen.
Sie sollten für jedes mobile Endgerät, dass Sie gezielt bedienen möchten, ein separates Stylesheet schreiben. Beginnen kann man dabei natürlich mit einem einzigen – wir tun das mit einem Stylesheet für das iPhone mit den hier typischen Maßen und Stilen. Dieses Stylesheet lässt sich dann schnell anpassen, um z.B. für das iPad oder andere mobile Endgeräte die gleichen Ergebnisse zu erzielen.
Weiterlesen
Apps beflügeln nicht nur die Fantasien großer Softwareschmieden, sondern besonders auch die kleinerer Entwickler und Programmierer: über den App-Shop von Apple können diese praktischen Programme ohne eigenen Vertrieb theoretisch millionenfach verkauft werden.
Dabei müssen hochwertige und praxistaugliche Apps nicht kompliziert sein: viele Anwendungen des täglichen Bedarfs sind schnell programmiert und dankbare Abnehmer finden sich bei den weltweit derzeit über 200Mio Usern von Smartphones schnell. Weiterlesen
Das Canvas-Element bietet noch nie zuvor dagewesene Möglichkeiten zur grafischen Darstellung dynamischer Inhalte. Mit steigendem Entwicklungsfortschritt und der Etablierung von Frameworks, um dieses recht komplexe Element besser zugänglich zu machen, werden Web-Anwendungen entstehen, die Desktop-Anwendungen in der Bedienbarkeit und der Fülle grafischer Manipulationsmöglichkeiten in nichts nachsteht.
Doch zur segensreichen Neuerung führt ein steiniger Weg. Selfhtml5 bietet zahlreiche Informationen, wie z.B. den sehr hilfreichen Canvas-Table, doch auch die Dokumentation der w3c im Original wollen wir Ihnen nicht vorenthalten.
Hier ein sehr hilfreiches Schmankerl für den HTML5 Programmierer:
Eine Übersicht zu allen Canvas-Attributen und Methoden mit Beschreibungen.
Anklicken zum Vergrößern
Ein sehr anschaulisches Tool liefert – das verwundert sehr – Microsoft zur Demonstration der border-radius-Attribute in CSS3:
http://ie.microsoft.com/testdrive/HTML5/01BorderRadius/Default.html
Und hier der Quellcode der Seiten zur einfachen Referenz: Weiterlesen