HTML5Tutorial

Splashnology hat eine super Zusammenstellung von 30 CSS3 Tutorials released, mit denen ihr viele der neuen Features und Funktionen der Layoutsprache kennenlernen und erlernen könnt. Lohnt sich!

Hier geht’s zu Splashnology

Ich find’s ja immer wieder total hammer, was die Cracks da draußen in den Weiten des Internets so alles entwickeln und online zur Verfügung stellen. Heute bin ich über ATARI arcade gestolpert, eine Art Online-Videospiel-Halle, in der man acht Games, darunter auch echte Super-Klassiker wie Breakout oder Pong, direkt im Browser spielen kann.

Und dies sind die zockbaren Spiele:

• Missile Command
• Pong
• Super Breakout
• Yars‘ Revenge
• Asteroids
• Centipede
• Combat
• Lunar Lander

Und wieder mal wurde, diesmal von ATARI, hiermit ein tolles Showcase geschaffen, das aufzeigt, was mit HTML5, CSS3 und JavaScript möglich ist und dass diese Technologien Flash nicht allzu sehr nachstehen.

Kaum ein Entwickler oder Web Designer hat alle Keywords, Kommandos oder Tags einer Programmier-, Script- oder Beschreibungssprache im Kopf. Zum Einen sind das in vielen Sprachen einfach zu viele, von denen man die meisten auch nur ganz selten braucht, zum anderen ist es auch gar nicht nötig, sie auswendig aufsagen zu können. Man muss immer nur wissen, wo sie zu finden sind.

Eine große Hilfe für Letzteres sind sogenannte Cheat Sheets (zu Deutsch: Spickzettel), die man sich z.B. großformatig ausdrucken oder für den schnellen Zugriff ins Dateisystem legen kann. Auf diesen Cheat Sheets findet man dann eine Übersicht über alle (oder zumindest die wichtigsten) Befehle, die man in der jeweiligen Sprache benötigt. Auch für HTML5 und CSS3 haben sich einige findige Köpfe schon mal hingesetzt und solche Spickzettel entworfen. Hier möchte ich euch eine kleine Liste von meiner Meinung nach guten HTML5 und CSS3 Cheat Sheets präsentieren. Read more »

WordPress ist das weitest verbreitete CMS für Blogs und bietet über zahlreiche Plugins und eine Menü-Engine die Möglichkeit, es darüber hinaus als CMS für klassische Websites oder sogar Communities einzusetzen. Durch diese Vielfältigkeit und die damit verbundenen steigenden Nutzerzahlen hat sich um WordPress eine riesige Community aufgebaut, die ständig für Nachschub an tollen und schicken Themes oder Templates sorgt. (Auch dieser Blog verwendet natürlich WordPress.)

Für viele Leute, die in nächster Zeit vorhaben, einen Blog zu starten oder einem bestehenden Blog ein neues Aussehen zu geben, könnte sich die Frage stellen, ob die zukünftige Site gleich in der zukunftsträchtigen HTML5 / CSS3 Technik umgesetzt werden sollte. Und für viele ist das neben einer generell technischen auch eine Kostenfrage, da der Markt an qualitativ hochwertigen kostenfreien HTML5 WordPress Themes noch sehr übersichtlich ist.

Deshalb gibt es hier für all diejenigen, die sich für den Schritt in Richtung Zukunft mit einem HTML5-basierten Template entschieden haben, eine kleine Liste von sieben kostenfreien und guten WordPress Designs.

1. Yoko

Yoko ist ein frisches und umfangreich ausgestattetes Theme von den Machern vom Smashing Magazine. Es unterstützt die wichtigsten Browser, hat für ältere ein Fallback implementiert und ist dank CSS3 Media Queries für Geräte mit verschiedensten Displaygrößen geeignet. Über eine Theme-Options-Seite lassen sich die wichtigsten Parameter bequem über’s Backend pflegen. Außerdem bietet das Theme verschiedene Post-Formate (aside, gallery, image, video, link and quote), optionale Submenüs, ein Social Media Widget für die wichtigsten Netzwerke und geschachtelte Kommentare.
Hier geht’s zur Download-Seite.

Read more »

Jeder Designer, der mit Photoshop arbeitet kennt sie: die Ebenenstile. Ebenenstile ermöglichen es, eine Kombination verschiedener Ebeneneffekte wie Schatten, Kontur oder Farbüberlagerung als Paket abzuspeichern, um später auf sie zurückgreifen zu können. Felix Niklas hat das User Interface dieser Photoshop-Funktion nun für ein eigenes Projekt übernommen, einen grafischer CSS3 Editor namens Layer Styles.

Photoshop-User werden damit sofort zurecht kommen, aber auch für Nutzer anderer Grafikprogramme ist die Funktionsweise im Prinzip selbsterklärend – per Schieber und Checkboxes können verschiedene Effekte ausgewählt und deren Parameter angepasst werden. Das Ergebnis des erstellten CSS-Stils kann sofort in einer kleinen Vorschau betrachtet werden und per Klick auf „CSS Code“ am linken unteren Bildschirmrand bekommt man den dazu passenden CSS Code ausgespuckt. Wirklich sehr gelungen!

Grafischer CSS Editor Layer Styles