Phodana Media » CSS

CSS3 Verlauf Generator

André Gärtner — Sun, 28 Nov 2010 11:54:53 +0000

Seit der Einfügung von CSS3 ist es möglich Verläufe über extra Attribute zu definieren, ohne dass dafür Hintergrundgrafiken erstellt werden müssen. Wer sich damit schon ein wenig beschäftigt hat, wird sicherlich festgestellt haben, dass das bei einfachen Verläufen noch relativ einfach zu definieren ist, jedoch bei komplexeren Verläufen schon nicht mehr ganz so trivial ist.

CSS3 Verlaufs Generator

Wer sich in Zukunft ganz einfach CSS3 Verläufe erstellen möchte, so wie er das vielleicht aus Photshop kennt, sollte sich unbedingt mal diese Seite anschauen. Dort kann über einen einfachen grafischen Editor der gewünschte Verlauf erstellt werden, wo dann automatisch der passende CSS Code dazu generiert wird. Wer sich bei seinen Verläufen noch etwas unentschlossen ist, kann sich über eine große Auswahl vordefinierter Verläufe den passenden heraussuchen. Aus meiner Sicht ein sehr nützliches Werkzeug!!

Mächtiger CSS-Menü Generator

André Gärtner — Tue, 27 Jan 2009 14:02:23 +0000

Wer sich schnell richtig tolle CSS-Menüs generieren lassen will, sollte mal einen Blick auf CSS QuickMenu werfen. Der Ablauf zum Erstellen seines eigenen Menüs ist denkbar einfach:
Nachdem die kleine Flash Anwendung im Browser geladen ist, entscheidet man sich für eines der zahlreichen Templates, wie das Menü aussehen soll. Nach einem Klick auf einen Button, öffnet sich ein mächtiger Editor, in dem sich das Menü an jegliche eigene Wünsche anpassen läßt. Im letzten Schritt läßt man sich den Code generieren und bindet diesen auf seiner Seite ein. Fertig…

Unit PNG Fix für den IE6

André Gärtner — Sat, 23 Aug 2008 15:19:43 +0000

Einige von Euch kennen bestimmt das Problem, dass der IE6 transparente PNG Bilder nicht richtig dastellen kann. Bisher könnte man das mit diversen PNG-Fix-Methoden (JavaScript-Lösungen) beheben. Diese PNG-Fix-Methoden sind aber nicht sehr zuverlässig. In der Performance sind sie langsam und die CSS-Attribute background-position und background-repeat funktionieren in Kombination nicht. Während also aktuellere Browser das Hintergrundbild gekachelt oder positioniert anzeigen, wird das Bild im IE6 mit den Fixes zwar transparent angezeigt, aber eben nicht so, wie man sich das gewünscht hat.

Jetzt gibt es eine neue Methode von Unit Interactive: Labs. Das Ganze ist deutlich performance-optimiert (nur 2kb groß), zuverlässiger und einfacher in der Handhabung. Wärend man bei den alten Lösungen noch CSS Anpassungen machen musste, müssen jetzt nur zwei Dateien auf dem Webserver hochgeladen werden und folgendes muss in den Head-Bereich der Website eingefügt werden:

Mit dieser Lösung funktionieren background-position und background-repeat wieder ohne Probleme. Demo, Download und weitere Infos gibts auf der Website von:

Einführung in CSS3 – Teil 1: Was wird neu sein

André Gärtner — Thu, 19 Jun 2008 21:03:12 +0000

Dieser Artikel ist einer von mehreren zum Thema CSS3. Ich werde eine Einführung zu dem neuen CSS3 Standard geben, der CSS2 stark verbessern und erweitern wird. Beginnen werden wir mit einem Überblick, was von CSS3 zu erwarten ist. Weitere Artikel werden sich mit speziellen Eigenschaften befassen. Als Quelle dienen die englischen Artikel zu CSS3 von Design Shack.

Was ist CSS3?

CSS3 bietet eine riesige Vielfalt von neuen Wegen, Einfluss auf das Website-Design mit nur wenigen wichtigen Änderungen zu nehmen. Dieser erste Tutorenkurs wird eine grundlegende Einführung in die neuen, durch den Standard, geschaffenen Möglichkeiten geben.

Module

Die Entwicklung von CSS3 ist dabei in ‘Module’ aufgeteilt zu werden. Die alte Spezifizierung war einfach zu groß und kompliziert, um aktualisiert zu werden. Sie wird nun in kleinere Teile zerlegt, in der auch neue Teile hinzugefügten werden. Einige dieser Module umfassen:

das Box Modell
Listen-Modul
Hyperlink Presentation
Sprach-Modul
Hintergrund und Rahmen
Texteffekte
Spalten-Layout

Entwicklung

Mehrere der Module sind bereits, einschließlich SVG (Scalable Vector Graphics), Media Queries und Namespaces vollendet worden. Andere sind noch in Arbeit. Eine Übersicht über alle Module und deren Status findet Ihr hier.

Es ist sehr schwierig, ein geplantes Datum zu nennen, wenn WWW-Browser die neuen Eigenschaften von CSS3 unterstüzden werden – die neuen Safari Versionen unterstützen bereits einige Eigenschaften.

Neue Eigenschaften werden allmählich in verschiedene Browsers eingeführt. Es konnte jedoch noch ein oder zwei Jahre dauern, bis jedes Modul angenommen wird.

Wie wird CSS3 mich beeinflussen?

Hoffentlich, auf eine positive Weise. CSS3 wird offensichtlich völlig rückwärts kompatibel sein, so wird es nicht notwendig sein, vorhandene Designs zu ändern. WWW-Browser werden den Support zu CSS2 weiter fortsetzen.

Die Hauptneuerung wird die Fähigkeit sein, neue Selektoren und Eigenschaften zu verwenden, die verfügbar sind. Neue Designeigenschaften (z.B. Animation oder Farbverläufe) werden verfügbar sein, die sehr leicht anzuwenden sind.

Zukünftige Artikel in dieser Reihe werden sich jeweils auf ein bestimmtes Modul der CSS3 Spezifizierung und dessen neuen Eigenschaften konzentrieren. Der nächste wird über das Border-Modul (Rahmen-Modul) handeln.

CSS, HTML, WordPress Help Sheets PDF

André Gärtner — Fri, 16 May 2008 18:18:58 +0000

Wenn Ihr alle wichtigen Informationen zu CSS, HTML oder WordPress auf einen Blick haben wollt, dann solltet Ihr mal folgende Links besuchen. Dort könnt Ihr euch drei PDF-Dateien herunterladen. Jeweils kompakt auf einer Seite findet Ihr die wichtigsten Informationen zum Thema zusammengefasst.

CSS Help Sheet

HTML Help Sheet

WordPress Help Sheet

CSS Menu Generator

André Gärtner — Fri, 16 May 2008 15:49:35 +0000

Wenn Ihr euch mal schnell ein CSS Navigations-Menü für eine Website benötigt, kann ich diese Website empfehlen. Dort läßt sich in nur wenigen Schritten ein individuelles CSS Menü generieren. Die Menüs lassen sich nicht nur schnell generieren, sondern sehen auch noch schick aus. Überzeugt euch selbst…

Toolbox CSS

André Gärtner — Thu, 08 May 2008 21:04:05 +0000

Wer kennt es nicht bei der Website Gestaltung, jedes mal legt man die gleichen Klassen und IDs bei einem Projekt an. Damit dies sich ändert hat jemand eine “Toolbox” mit gängigen Styles in einer Stylesheets-Datei zusammengestellt, die ganz einfach durch ein Import eingebunden werden kann. Hier könnt ihr euch das Ganze anschauen und downloaden.