Font Awesome in Photoshop nutzen

Icon-Fonts sind eine tolle Sache. Keine lästigen PNG-Files mehr aus Photoshop exportieren, keine Sprite-Positionen im CSS notieren und keine Probleme mehr, wenn sich die Farbe der Icons später ändern soll. „Font Awesome“ ist eine der beliebtesten Icon-Fonts und ebenfalls kompatibel für Bootstrap. Wie man die Schrift auf seiner Website einbindet, wird auf vielen Seiten gut beschrieben, wie aber kann man sie auch für das nächste Screendesign in Photoshop nutzen?


Font Awesome in Photoshop verwenden

Font Awesome Photoshop Palette
Icon kopieren, Schrift auswählen, fertig.
  • Das ganze Paket via fortawesome.github.io/Font-Awesome downloaden und entpacken
  • Im Ordner „font“ findet ihr eine .otf-Datei, diese installiert ihr bzw. fügt sie zu eurem Schriftverwaltungsprogramm hinzu. Die Schrift sollte nun einsatzbereit sein
  • Damit ihr sie auch in eurem nächsten Design nutzen könnt, muss das gewünschte Icon zuerst von diesem Cheatsheet kopiert werden.
  • Achtet darauf, dass nicht der Unicode, sondern wirklich nur das Icon selbst kopiert wird.
  • Nun müsst ihr in Photoshop eine neue Textebene anlegen, das Icon von der Zwischenablage einfügen und die Schrift „Font Awesome“ wählen
  • Das Icon sollte nun sichtbar sein

Nun könnt ihr das Icon beliebig groß darstellen, die Farbe ändern, Ebeneneffekte darauf anwenden und viel mehr. Wie in CSS3 eben auch. Viel Spaß!

CSS3-Workaround: Transitions für Background Gradients

Ein Gartartikel von Christian Olear:

Animationen ohne Javascript, nur durch die Veränderung von CSS-Eigenschaften: mit CSS3-Transitions kein Problem. Während der Arbeit an einem aktuellen Projekt musste ich leider feststellen, dass sich CSS-Transitions nicht auf Background-Gradients anwenden lassen. Hier ein kleines Workaround um trotzdem das gewünschte Ergebnis erzielen zu können.

Animation von Hintergrundfarben – Demo

Wir haben also ein </div>-Element mit einem Background-Gradient und möchten diesen verändern, wenn sich der Mauszeiger auf dem Element befindet. Zur Generierung des Verlaufes empfehle ich Ultimate CSS Gradient Generator, dort kann man sich schnell und einfach das CSS für den gewünschten Gradient generieren lassen.

Hätten wir statt einem Gradient nur eine einfache Hintergrundfarbe, würde das ganze so aussehen:

[css]<style><!–
.background {
background-color:#0C87C9;
-webkit-transition: background-color 2s;
transition: background-color 2s;
}
.background:hover {
background-color:#9BC100;
}
–></style>
<div class="background">Text</div>[/css]

Animation von Background-Gradients – Demo

Meine erste Idee wäre gewesen, eine zweite Ebene über die Hintergrund Ebene mit einem leicht transparenten Gradient zu legen. Doch will man, dass das Element nicht nur einen Verlauf der Helligkeit hat, sondern auch den Farbton ändert, wird das zu kompliziert.

Nimmt man allerdings zwei Ebenen mit den unterschiedlichen Gradients, kann man eine Transition auf die opacity der Elemente anwenden und so einen Übergang zwischen den Gradients schaffen.
[css]<style><!–
.background {
position:absolute;
top:20px;
left:20px;
width:500px;
height:300px;
-webkit-transition: opacity 2s;
transition: opacity 2s;
}

.blue {
/*
* Eigenschaften für Gradient 1
*/
z-index:2;
}


.blue:hover {
opacity:0;
}

.green {
/*
* Eigenschaften für Gradient 2
*/
z-index:1;
}
–></style>
<div class="background green">Text</div>
<div class="background blue">Text</div>
[/css]

Durch die Positionsangaben in der Klasse .background befinden sich beide Elemente an der gleichen Position. Da .blue im Markup nach .green folgt, befindet er sich im Vodergrund. Man kann das ansonsten auch mit der CSS Eigenschaft z-index steuern.

In .blue:hover haben wir einen opacity Wert von 0, was den blauen </div> verschwinden lässt, wenn man mit dem Mauszeiger hovert. Entscheidend allerdings: Er tut es langsam, da in .background die Transition auf den opacity Wert definiert wurde.

Es handelt sich, wie gesagt, um einen Workaround für dieses Problem. Ein anderer Ansatz wäre beide Verläufe in ein Element zu fügen, via Background-Size nur einen bestimmten Ausschnitt anzuzeigen und via Animation der Background-Position den Effekt zu erzielen.

SVG-Bilder im Web: Farben ändern und animieren mit CSS

SVG-Bilder sind eine tolle Sache – besonders wenn man sie auf Webseiten einbindet: Die Speichergröße ist gering, die Images sind ohne Qualitätsverlust skalierbar und sogar der Internet Explorer 9 kann damit etwas anfangen. Im Gegensatz zu herkömmlichen Bildformaten, haben sie aber noch einen Vorteil: Mit CSS kann ihre Farbe verändert und auf Wunsch sogar animiert werden.

Das Markup

[html]<img src="logo.svg" class="svg" id="logo" />[/html]

Vorbereitung mit JavaScript

Zuerst muss via jQuery der Inhalt der .svg-Bilddatei in den Image-Tag eingefügt werden. Dies kann natürlich auch direkt im Markup erledigt werden. Beide Methoden haben Vor- und Nachteile.
[js]
$(‚img.svg‘).each(function(){
var $img = $(this),
imgID = $img.attr(‚id‘),
imgClass = $img.attr(‚class‘),
imgURL = $img.attr(‚src‘);

$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find(‚svg‘);

// Add replaced image’s ID to the new SVG
if(typeof imgID !== ‚undefined‘) {
$svg = $svg.attr(‚id‘, imgID);
}
// Add replaced image’s classes to the new SVG
if(typeof imgClass !== ‚undefined‘) {
$svg = $svg.attr(‚class‘, imgClass+‘ replaced-svg‘);
}

// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr(‚xmlns:a‘);

// Replace image with new SVG
$img.replaceWith($svg);
});

});
[/js]
Quelle: stackoverflow.com

Farbe des Bildes ändern

Nun kann direkt via CSS die Farbe des SVG-Bildes angepasst werden:
[css]#logo path {color: red}[/css]

Farbe animieren

Natürlich ist es jetzt auch möglich den gewünschten Farbwert via Animation zu verändern. Im folgenden Beispiel passiert das bei Mouse-Hover:
[css]#logo path {
-webkit-transition: all 1;
-moz-transition: all 1;
-ms-transition: all 1;
-o-transition: all 1;
transition: all 1;
}
#logo:hover path {color: green}
[/css]


Das ganze funktioniert in allen Browsern die mit SVG-Bildern und CSS3-Transitions etwas anfangen können.

Animation von Farbwerten mit CSS3-Transition, ohne jQuery

Das Problem ist bekannt: Mit der animate()-Methode von jQuery können lediglich numerische Style-Variablen animiert werden. Was aber machen wenn eine Farbwert-Animation benötigt wird? Beispielsweise um bei Hover die Hintergrundfarbe eines Elementes gleichmäßig zu ändern.

CSS3
Quick-Animationen: CSS3 macht’s möglich

Entweder man bindet ein Plugin ein, verwendet gleich eine große Library oder aber man nutzt die Möglichkeiten die einen CSS3 schon heute bietet. Die Transition-Eigenschaft, welche in allen modernen Browsern gut funktioniert, ist in der Lage diese Anforderung in wenigen Zeilen umzusetzen.

Beispiel: Hintergrund-Animation bei Hover

Ja wirklich, dieser Code reicht aus, um unsere Hintergrund-Animation auf das Element #foo anzuwenden.
[css]#foo {
background:red;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
#foo:hover {
background:yellow;
}[/css]
Die Transition-Eigenschaft (inkl. aller Browser-Prefixe) sorgt dafür, dass jegliche Änderung der background-Eigenschaft, mit einer 1-sekündigen-Animation durchgeführt werden. Das kann natürlich auch abgeändert werden, um zum Beispiel die Schriftfarbe (color) oder die Rahmen-Farbe (border-color) zu animieren. Natürlich bietet die Transition-Eigenschaft die Möglichkeit fast alle CSS-Werte animierend zu ändern. Ganze Animations-Abfolgen können via Keyframe-Animation realisiert werden.

Noch schneller geht es mit SCSS/SASS und Compass:
[css]#foo {background:red; @include transition(background 1s)}
#foo:hover {background:yellow}[/css]

Soll der Effekt erst ab einer bestimmten User-Interaktion starten, muss die gewünschte Zielfarbe einfach in einer Klasse gespeichert werden, welche man dem Element via JavaScript zuweist. Viel Spaß!

Head JS – Scriptdateien parallel und asynchron Laden

„it’s becoming a core client side development tool for many“

Vor über fünf Jahren genügte noch ein einziges Java-Script-File, um einem ganzen Webportal Interaktivität einzuhauchen. Niemand redete damals über komprimierte Scripte, Framework-Plugins, die neueste JavaScript-Engine im Browser oder clientseitige Performance-Optimierungen. Durch den Siegeszug von Frameworks wie jQuery oder Mootools, dazugehörige Erweiterungen und immer umfangreichere Weboberflächen, wurde das Bild des Internets stark verändert – Und das ist auch gut so. Doch all diese Script-Wunder müssen erstmals vom Browser des Benutzers heruntergeladen werden. Damit dies schnell von statten geht, basteln die Hersteller an immer effektiveren Java-Script Engines. Doch auch jene, die sich Webworker nennen, müssen Zeit investieren, um ihre Projekte dahingehend zu optimieren. Genau an diesem Punkt setzt Head JS an.

Doch was passiert eigentlich beim Laden einer Website? Zuerst werden die im <head>-Bereich verlinkten Stylesheet- und Script-Files heruntergeladen. Abgesehen von ganz modernen Browsern, funktioniert dies nicht parallel, sondern nacheinander. Erst wenn alle Dateien geladen wurden, beginnt das Markup-Rendering und somit auch der für den Benutzer interessante Teil: Die Website erscheint. Schlaue Frontend-Entwickler platzieren deshalb ihre Script-Files an das Ende des Dokumentes. Durch das zuerst durchgeführte Rendering, erscheint es, als würde die Seite schneller laden, da die Script-Dateien erst heruntergeladen werden, wenn die Website schon sichtbar ist. Doch es gibt noch Optimierungsbedarf.

Head JS

Das Konzept von Head JS ist simpel und effektiv: Im Kopfbereich der Seite wird lediglich ein einziges Script-File eingebunden. Alle weiter benötigten Dateien werden parallel via Funktionsaufruf nachgeladen und in der gewünschten Reihenfolge ausgeführt. Der Vorteil liegt klar auf der Hand: Das Rendering der Seite startet sofort und die noch fehlenden Java-Script-Dateien werden, durch den gleichzeitigen Abruf, rascher vom Browser heruntergeladen. Es wird außerdem eine spezielle Funktion “gefeuert” sobald alle Dateien bereit sind. Durch diese ist es möglich, mitten im <body>-Bereich Scripte einzufügen, die erst dann ausgeführt werden, wenn beispielsweise die jQuery-Bibliothek geladen wurde.

Ein einfaches Beispiel zum Laden von drei Script-Dateien mit Head JS:

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js");

Doch Head JS macht mit seiner Größe von 2.30kb noch mehr: Es befüllt den <html>-Tag mit einer Vielzahl nützlicher Klassen (Browser-Typ, Fenstergröße, Funktionalität von einzelnen CSS3-Eigenschaften, Page-Routes und noch einige mehr). Außerdem wird versprochen, dass ausgewählte HTML5-Tags durch das “Kopf-Script” in allen Browsern funktionsfähig sind.

Meine ersten Praxis-Tests verliefen erfolgreich bis durchwachsen. Die Senkung der Seitenladezeiten, klappt durch den parallelen Aufruf in jedem Fall erfolgreich. Die neuen CSS-Klassen sind praktisch und machen so manches zusätzlich erstellte Stylesheet-File obsolent. Probleme gab es lediglich mit dem Internet Explorer: Das Nachladen des selectivizr-Script mit Head JS führte zu regelmäßigen Abstürzen oder Fehlermeldungen des Browsers. Auch Umdenken beim Ausführen von Scripten mitten im <body>-Bereich ist nun angesagt, vor allem wenn dies initial und später via Ajax-Call passiert.

Ein rascher Einstieg in diese neue Herangehensweise ist dank der informativen Website von Head JS gegeben. Ob Webworker zukünftig wirklich nur mehr ein einziges JavaScript-File direkt einbinden müssen und ob die Performance-Steigerung überall erfolgt, werden weitere Tests zeigen. Es wird laufend an Head JS gearbeitet und daher sollte man dieses Projekt im aktuellen Jahr bestimmt nicht aus den Augen verlieren.