Hier gibt es Artikel rund um Webdesign, Grafikdesign, Photoshop, Flash, TYPO3, CSS, Content-Management-Systeme, Windows, Multimedia, 3D-Visualisierung und vieles mehr.
CSS3: Generator für Cross-Browser-Deklarationen
Die Idee von Border-Radius.com scheint großen Anklang zu finden und so haben Paul Irish und Jonathan Neal einen Generator für moderne CSS3-Effekte entwickelt. Mit CSS3 Please! steht ein komfortabler Editor für die möglichen CSS-Regeln zur Verfügung, mit dem sich einfach Cross-Browser-Regeln erstellen lassen. Bei dem interaktiven Editor ist eine Echtzeit-Vorschau enthalten, so dass man die Effekte direkt anpassen kann. Per Knopfdruck kann der CSS-Code in die Zwischenablage kopiert werden.
Zur Auswahl stehen Effekte wie abgerundete Ecken, Schatten, Verläufe, Rotationen oder die @font-face-Technik. Sehr schön sind die generierten Deklarationen für Internet Explorer, da nahezu alle Effekte mit "DXImageTransform"-Filtern realisiert werden können. Eine Ausnahme bilden runde Ecken, die erst mit Version 9 des Microsoft-Browsers verwendet werden können. Erlaubt es die Zielgruppe eines Webprojektes, kann mit der Verwendung von CSS3-Effekten viel Zeit gespart werden, da unnötige Verschachtelungen und transparente PNG-Grafiken entfallen.
Harmony: Prozedurales Zeichnen mit JavaScript
Erst kürzlich berichtete ich über die experimentelle Zeichen-Anwendung Flame, mit der sich abstrakte Flammen im Browser erstellen lassen. Ein etwas anderes Kreativ-Werkzeug stellt Harmony von Richardo Cabello dar. Die JavaScript-Anwendung, welche die canvas-Fähigkeiten nutzt, ermöglicht prozedurales Zeichnen (generative Gestaltung) — dadurch entstehen Bilder, die durch wiederholende Algorithmen erzeugt werden.
Das Programm bietet verschiedene Pinsel (Brushes) zur Auswahl, mit denen sich Graustufen-Bilder gestalten lassen. Dazu zählen etwa Kreise, Vernetzungen, Linien oder Rechtecke. Die Anwendung regt zum Experimentieren an und erlaubt es, erstellte Kunstwerke als PNG-Grafik zu speichern.
Sehr interessant ist vor allem die Website des Entwicklers, auf der auch seine anderen HTML5- und ActionScript-Experimente zu sehen sind. Darunter finden sich beeindruckende Physik-Simulationen und unter Anderem die "Ball Pool-Animation", die zu den frühen Chrome-Experimenten zählt.
Border-Radius.com: Vorschau für abgerundete Ecken
CSS3-Effekte und WebKit-Funktionen erfreuen sich trotz der relativ geringen Verbreitung großer Beliebtheit. Die Entscheidung über die Verwendung von modernen CSS-Deklarationen liegt nicht zuletzt beim Kunden und dessen gewünschter Zielgruppe für ein Projekt. Es wird sicherlich noch eine Zeit vergehen, bis die neue Browser-Ära einen globalen Anklang gefunden haben wird. Besonders Microsofts Internet Explorer 9 dürfte noch eine Weile auf sich warten lassen. Version 6 wurde am 1. März 2010 offiziell in Denver begraben (sogar Microsoft schickte Blumen mit Gruß).
Der Microsoft-Browser stellt das eigentliche Dilemma bei abgerundeten Ecken dar: Hierfür gibt es nur diverse Workarounds, ein HTC-Skript sowie eine offizielle Stellungnahme der Microsoft-Entwickler.
Wer bei Projekten dennoch modernen CSS-Code einsetzen kann, findet auf Border-Radius.com einen schönen Echtzeit-Generator für abgerundete Ecken.
Das kleine Online-Tool bietet die Möglichkeit, für jede Ecke einen anderen Radius zu definieren. Als Ausgabe erhält man Deklarationen für WebKit, Gecko und CSS3. Die CSS3-Eigenschaft "border-radius" ist hauptsächlich für Opera notwendig, da Apple- und Mozilla-Browser mit den eigenen Definitionen auskommen.
ZURB CSS Grid Builder: CSS-Code für Raster erstellen
Für das Erstellen von CSS-Rastern gibt es mittlerweile verschiedene Tools: Mit dem Yahoo! CSS Grid Builder oder Plumb lässt sich CSS-Code für die entsprechenden CSS-Frameworks erstellen. Eine Overlay-Grafik kann beispielsweise mit dem Gridmaker von Paul Holliday generiert werden und mithilfe von Hashgrid lässt sich per jQuery ein Raster über der Website einblenden.
Wer nun ein CSS-Raster erstellen möchte, ohne dabei auf ein CSS-Framework zurückgreifen zu wollen, kann den ZURB CSS Grid Builder nutzen. Die Online-Anwendung bietet komfortable Möglichkeiten, fertigen CSS-Code aus benutzerdefinierten Vorgaben zu generieren.
Neben der Spaltenbreite kann der Abstand zwischen den Spalten angegeben werden. Schließlich lässt sich noch die Anzahl der Unterteilungen definieren. Sehr schön bei dem Werkzeug ist die verkleinerte Browserfenster-Vorschau, in der das finale Raster betrachtet werden kann. Das Miniatur-Fenster kann auf verschiedene Breiten (1440, 1280 und 1024 Pixel) eingestellt werden. Per Knopfdruck wird im unteren Seitenbereich der fertige CSS-Code angezeigt. Interessant sind unter Anderem die Korrekturen für Internet Explorer 6, die für eine konstante Browser-Darstellung sorgen.
MooTools 1.2 Beginner's Guide: Eine Rezension
Mit MooTools lassen sich relativ einfach und schnell dynamische Webprojekte realisieren. Neben Effekten und Animationen stellt Ajax ein weiterer Bereich dar, für den die JavaScript-Bilbiothek gute Möglichkeiten bietet. Das MooTools-Framework ist aktuell in Version 1.2 verfügbar und zeichnet sich vor allem auch durch seinen objektorientierten Ansatz aus — JavaScript bietet nativ nur eingeschränkte Möglichkeiten für Objekte, Klassen und Vererbung.
Für MooTools gibt es mittlerweile verschiedene Bücher. Ich habe das kürzlich veröffentlichte Werk "MooTools 1.2 Beginner's Guide" von Jacob Gube (Six Revisions) und Garrick Cheung unter die Lupe genommen. In dieser Rezension will ich den Inhalt des Buches, das sich an Einsteiger und Anfänger richtet, beleuchten. Voraussetzung für die Arbeit mit dem Buch (und entsprechenden Projekten) sind JavaScript-Grundkenntnisse sowie fortgeschrittene HTML- und CSS-Fähigkeiten.
Kommentar schreiben