kulturbanause Blog

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

CSS


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

Element-Styling mit der CSS-Pseudoklasse :nth-child

In CSS3 wurden neue Pseudoklassen eingeführt mit denen Ihr bestimmte Elemente ansprechen könnt. Eine davon ist :nth-child mit der sich Kind-Elemente nach einer vorgegebenen Berechnung auswählen und ansprechen lassen. So könnt Ihr beispielsweise alle ungeraden Tabellenzeilen stylen.
Allerdings führt insbesondere diese Pseudoklasse zu einiger Verwirrung da der Syntax auf den ersten Blick nicht ganz eindeutig erscheint. Ich möchte Euch erklären wie die CSS3-Eigenschaft funktioniert.

Beitrag zu Ende lesen

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