kulturbanause Blog

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

Typografie


Textmasken mit CSS erstellen

Textmasken erfreuen sich im Grafik-Design – insbesondere im Print-Design – größter Beliebtheit. Leider war es mit Webtechnologien lange Zeit kaum möglich eine Textmaske herzustellen, bei der der Text als Reintext im HTML-Code steht. Aber gerade das ist wichtig, damit der Text geändert und übersetzt, sowie von Suchmaschinen und Screenreadern ausgelesen werden kann. In diesem Beitrag zeigen wir, wie ihr mit Hilfe von CSS Blend Modes eine semantisch korrekte Textmaske erstellt.

Beitrag zu Ende lesen

Die CSS-Eigenschaft box-decoration-break – padding & Co. beim Zeilenumbruch beibehalten

Wenn ihr Inline-Elementen über padding einen Innenabstand zuweist, dann wird dieses padding bei einem Zeilenumbruch ignoriert. Gleiches gilt für Eigenschaften wie box-shadow oder border-radius. Diese Tatsache ist in der Praxis extrem lästig, da es beispielsweise nicht möglich ist nur den Textbereich einer mehrzeiligen Überschrift mit einer Hintergrundfarbe zu hinterlegen und ansprechend zu gestalten. An den Zeilenumbrüchen wird der Hintergrund unschön abgeschnitten. Die CSS-Eigenschaft box-decoration-break schafft Abhilfe.

Beitrag zu Ende lesen

Schriftgrößen in vw – Bilder mit Texten proportional skalieren

Textinhalte die optisch in oder vor einem Bild positioniert werden sollen, stellen in einem flexiblen Layout eine große Herausforderung dar. Das Problem besteht darin, dass Bilder meist proportional skaliert werden, wohingegen Texte einfach nur an anderer Stelle umbrechen. Dadurch entsteht ein schwer steuerbares Ungleichgewicht.

Individuelle Breakpoints für jedes Bild sind zwar technisch möglich, in der Praxis jedoch meist nicht realistisch. Auch wäre es denkbar, den Text direkt mit in die Grafik zu speichern, doch aus Gründen der Suchmaschinenoptimierung, Editierbarkeit und Übersetzbarkeit ist eine solche Lösung ebenfalls inakzeptabel.

In diesem Beitrag erklären wir, wie Texte, die optisch vor einem Bild platziert wurden, gemeinsam mit dem Bild proportional skaliert werden können.

Beitrag zu Ende lesen

Web-Typografie: Perfekte Zeilenlängen im Responsive Design

Das Layout einer Website hat u.a. die Aufgabe, Informationen bestmöglich zugänglich zu machen. Insbesondere die Web-Typografie spielt dabei eine wichtige Rolle. Damit ein Text gut lesbar ist, sollten die Zeilen eine optimale Länge haben. Im Responsive Design muss dazu meist die Schriftgröße über die verschiedenen Displaygrößen hinweg verändert werden, damit die Zeilen auf allen Geräten im optimalen Bereich liegen. Auf Smartphones ist Text daher i.d.R. kleiner als auf großen Monitoren.

Beitrag zu Ende lesen

Text mit Verlauf überlagern in CSS

In Photoshop lässt sich ein Text unkompliziert mit Hilfe einer Verlaufsüberlagerung optisch aufwerten. Doch wie sieht es in CSS aus? Verläufe lassen sich grundsätzlich in CSS3 herstellen, nur auf Texten funktioniert es leider nicht so einfach. Hier kann kein Verlauf als Farbe angegeben werden, es sind daher nur einfarbige Texte möglich. Mit folgendem Trick könnt ihr zumindest in Webkit-Browsern (Chrome, Safari, Safari mobile, Android Browser) einen Verlauf als Textfarbe festlegen. In inkompatiblen Browsern wird der Text einfarbig dargestellt.

Beitrag zu Ende lesen

Absatzformate und Zeichenformate in Photoshop nutzen und exportieren

Aufgrund vieler Nachfragen habe ich ein Video zum Thema Absatz- und Zeichenformate von PS CS6 erstellt. In diesem Screencast zeige ich euch wie ihr die Formate einsetzen könnt, und wie ihr häufige Probleme im Umgang mit diesen Werkzeugen vermeidet. Da insbesondere die Export-Funktion häufig angefragt wurde, gehe in diesem Zusammenhang auch auf den Export/Import von Absatzformaten ein. Ich hoffe das Video hilft euch weiter, dieses wirklich hilfreiche Werkzeug endlich auch produktiv zu nutzen

Beitrag zu Ende lesen