kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Tools


Online CSS Pattern Generator: Patternify

Wenn Ihr häufig eigene Hintergrund-Muster in Photoshop erstellt, diese anschließend als Grafik exportiert und im CSS-Dokument wieder einbettet, dann schaut euch unbedingt mal folgendes Online-Tool an.
Patternify ist ein Online-Generator zur Herstellung von Hintergrundmustern und erleichtert die Gestaltung und vor allem die Einbindung von CSS Pattern erheblich.

Beitrag zu Ende lesen

Schneller coden mit dem CSS3-Präfix-Generator

CSS3 erleichtert die Arbeit an zeitgemäßen, skalierbaren Web-Layouts spürbar und kann mittlerweile in modernen Online-Projekten fast problemlos eingesetzt werden. Wirklich ärgerlich im Umgang mit CSS3 sind allerdings die unterschiedlichen Präfixe mit denen wir die verschiedenen Browser-Engines ansprechen müssen. Für einen simplen CSS3-Befehl müssen demnach im Extremfall fünf Zeilen Code geschrieben werden: Für Webkit-Browser (Chrome, Safari), für den Firefox, für den Internet Explorer 9, für Opera und letztendlich die "echte" CSS3-Anweisung.
Das geht auch schneller.

Beitrag zu Ende lesen

Google Page Speed Online

Google hat das hauseigene Tool "Page Speed" kräftig ausgebaut. Bisher war das Hilfmittel zur Bewertung der Website-Performance lediglich als Firefox-Extention verfügbar und konnte über die Google Webmaster Tools eingesehen werden.
Jetzt steht das Plugin auch für Google Chrome zur Verfügung und - was ich persönlich noch viel besser finde - als Online-Version!

CSS3-Transitions intuitiv erstellen: Ceaser

Mit der CSS3-Eigenschaft transition habt Ihr die Möglichkeit animierte Objekte und Übergänge zu erstellen. Ein häufig verwendetes Beispiel ist der Hover-Effekt in einer Navigation.
Um mit Transitions arbeiten zu können muss einem Objekt zunächst mitgeteilt werden auf welche Eigenschaften sich die Animation auswirken soll. Doch auch die Art der Animation spielt eine große Rolle. So kann eine Animation linear ablaufen oder zum Anfang und Ende hin ein wenig abbremsen, was in der Regel zu einem natürlicheren Bewegungsablauf führt. Die Optionen sind hier sehr umfangreich.
Ein nützliches Tool um Geschwindigkeit und Beschleunigung einer Animation intuitiv festzulegen ist Ceaser.

Beitrag zu Ende lesen

HTML-Texte an Pfad ausrichten: CSS3 Warp

In Photoshop und Illustrator ist die Funktion längst bekannt: zunächst wird ein Pfad erstellt, anschließend wird diesem Pfad ein Text zugewiesen um ihn in beliebigen Formen verlaufen zu lassen. Soll ein solches Design dann allerdings ins Web übertragen werden, so wird meist eine Grafik verwendet was natürlich zum Nachteil hat, dass der Text weder vergrößert noch markiert werden kann und darüber hinaus zusätzlich im Code versteckt werden muss um von Suchmaschinen indexierbar zu bleiben.
Mit CSS3-Funktionen und dem Online-Tool CSSWarp lassen sich diese Pfadtexte nun kinderleicht auch als Plain-Text in die eigene Website integrieren.

Beitrag zu Ende lesen

Flash zu HTML5 Converter von Adobe: Wallaby

Flash verliert mit der zunehmenden Verbreitung von HTML5 immer mehr an Boden. Nicht zuletzt weil Apple Flash aus dem iOS verbannt hat. Ob das nun gut oder schlecht ist mag ich hier gar nicht bewerten aber offenbar hat Adobe die Zeichen der Zeit erkannt und stellt nun mit Wallaby ein Konvertierungs-Tool für Flash-Dokumente bereit.

Beitrag zu Ende lesen

Sprite-Generator Spritebox

CSS-Sprites sind für moderne Websites ein absolutes Must-Have. Eine Sprite fasst verschiedene grafische Seitenelemente in einer Datei zusammen um somit unter anderem die Ladezeit der Website zu beschleunigen. Mittels CSS-background-Eigenschaft wird anschließend verschiedenen Elementen die selbe Grafik zugewiesen; die Position innerhalb der Grafik erfolgt über die Koordinaten der background-position-Eigenschaft. Je größer die Sprite wird, desto lästiger ist es die Koordinaten abzumessen und anschließend auf das Stylesheet zu übertragen.
Der kostenlose Online-Dienst Spritebox erleichtert diese Aufgabe enorm.

Beitrag zu Ende lesen