kulturbanause Blog

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

CSS


CSS: @font-face im Praxistest

Zu einem individuellem Layout gehört in den meisten Fällen auch eine individuelle Schriftart. Doch was tun, wenn diese allzu exotisch ist und es keine Hoffnung gibt, das sie jemals flächendeckend als Systemschrift installiert ist? Die CSS-Eigenschaft @font-face hilft hier weiter.

Bereits seit CSS2 gehört @font-face zum Standard. Aufgrund mangelnder Unterstützung seitens der Browser-Entwickler, mit Ausnahme des Microsoftschen Browsers, wurde die Eigenschaft in Version 2.1 jedoch wieder aus dem Standard herausgenommen. Umso mehr erfreut es mich jetzt natürlich, das ein breites Umdenken statt gefunden hat und @font-face in CSS3 ein Comeback feiert.

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

HTML5, CSS3 und SVG Export aus Illustrator

In den Adobe Labs wurde ein neues Illustrator CS5-Plugin veröffentlicht was es ermöglicht in Illustrator erstellte Grafiken als HTML5 Canvas, CSS3 oder SVG-Grafiken zu exportieren.
Dieses Plugin ist meiner Ansicht nach ein wichtiger Schritt in die richtige Richtung. Auch für Photoshop wurden in der Vergangenheit "HTML-Layers" diskutiert die es ermöglichen sollen grafische Stile direkt webfähig zu exportieren und somit den Workflow zu beschleunigen.

Das Illustrator Plugin kann in den Labs heruntergeladen werden.

Was haltet Ihr von Plugins dieser Art, sei es in Illustrator oder in Photoshop?

CSS3 Pie: CSS im Internet Explorer 6-8 aktivieren

Es gibt diverse Möglichkeiten um CSS3 für die Internet Explorer Reihe zu simulieren. Ein neues (?) Tool das in der vergangenen Woche durch die Blogsphäre gewandert ist nennt sich CSS3Pie. Alles was Ihr tun müsst ist eine *.htc-Datei innerhalb Eures Stylesheets zu verlinken. Anschließend verfügen die Internet Explorer 6-8 über neue Eigenschaften. Zu den unterstützen Features zählen die CSS3-Eigenschaften border-radius, box-shadow, border-image, multiple background images und gradient (Innerhalb der background-Eigenschaft).

Beitrag zu Ende lesen

CSS Kerning und Ligaturen im Browser

Webdesigner wurden lange Zeit bei der Wahl einer individuellen Schriftart und insbesondere im Bereich der Detailtypografie massiv eingeschränkt. Diese grauen Tage sind zwar noch nicht ganz vorbei, in letzter Zeit wurden jedoch einige Techniken entwickelt oder zumindest neu entdeckt die uns bei der Arbeit mit Schriften unterstützen. In erster Linie sind das die sog. Webfonts, die in den meisten Browsern ohne größere Schwierigkeiten verwendet werden können. Moderne Browser unterstützen neben Webfonts aber auch Ligaturen und Kerning.

Beitrag zu Ende lesen

@font-face Bibliothek "Kernest"

Vor kurzem habe ich über die neue Google Font Directory berichtet die mittels CSS-Eigenschaft @font-face den Einsatz von Schriften im Web um einiges erleichtert. Abgelegt werden die Fonts auf dem Google-Server und eingebunden über eine Mini-API.
Nun ist es leider so, dass bei Google bisher nur wenige Schriften zur Verfügung stehen was die praktische Idee (aktuell) noch wenig praktikabel macht. Hier kommt "Kernest" ins Spiel.

Beitrag zu Ende lesen