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… Font Awesome in Photoshop nutzen weiterlesen

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… CSS3-Workaround: Transitions für Background Gradients weiterlesen

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… SVG-Bilder im Web: Farben ändern und animieren mit CSS weiterlesen

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. 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… Animation von Farbwerten mit CSS3-Transition, ohne jQuery weiterlesen

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,… Head JS – Scriptdateien parallel und asynchron Laden weiterlesen