kulturbanause Blog

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

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

Bildunterschriften mit CSS immer perfekt ausrichten

Die Gestaltung von Bildunterschriften kann mitunter lästig werden. Es ist schwierig zu entscheiden ob der Text zentriert oder linksbündig unter dem Bild angezeigt werden soll, da die Textmenge oft stark variiert. Zentrierte Bildunterschriften sehen bei kurzen Texten gut aus. Linksbündig passt besser wenn die Bildunterschrift mehrere Zeilen umfasst. Was also tun?

In diesem Beitrag findet ihr ein CSS-Snippet, dass automatisch dafür sorgt, dass kurze Bildunterschriften zentriert werden, und mehrzeilige Bildunterschriften linksbündig ausgerichtet werden.

Beitrag zu Ende lesen

Hintergrund-Grafiken mit CSS positionieren

Mit CSS lassen sich Hintergrund-Grafiken einbinden und positionieren. Welche Möglichkeiten man bei der Positionierung dieser Grafiken hat, wollen wir euch in diesem Artikel zeigen. Dabei gehen wir neben der CSS-Eigenschaft background-position auch auf die Eigenschaften background-clip und background-origin ein und zeigen euch anhand von Beispielen ihre Auswirkungen auf die Hintergrundgrafik. Beitrag zu Ende lesen

image-rendering: pixelated/crisp-edges – Bildinterpolation im Browser steuern

image-rendering-pixelated

Grafiken werden in flexiblen Web-Layouts häufig mit Hilfe des Browsers skaliert. Sofern es sich um Pixelgrafiken handelt, geht Qualität verloren, wenn die Grafik über ihre tatsächliche Größe hinaus skaliert wird. Das Bild wird unscharf. Aus diesem Grund werden Grafiken normalerweise kleiner skaliert. Doch auch diese Vorgehensweise hat Nachteile, denn es werden mehr Daten geladen als notwendig. Responsive Images und Techniken wie Downsampling schaffen hier Abhilfe, doch auch die Art wie der Browser die Bildskalierung berechnet, kann euch dabei helfen ein optisch besseres Ergebnis zu erreichen.

Beitrag zu Ende lesen

Schnellerer Bild-Export aus Photoshop

Adobe hat mit Photoshop CC 2015 (Version 2015.0.0) neue Export-Funktionen für Webdesigner in das Bildbearbeitungsprogramm integriert. Der bisherige Dialog »Für Web speichern« wird damit überflüssig – kann aber nach wie vor verwendet werden. Die neuen Export-Funktionen ergänzen den in Photoshop CC 2014 hinzugekommenen »Generator« und beschleunigen in erster Linie den Workflow anstatt neue Export-Möglichkeiten bereitzustellen.

Beitrag zu Ende lesen

CSS Filter-Effekte

Mit Hilfe von CSS-Filter-Effekten können die Elemente einer Website gestalterisch manipuliert werden. Ihr könnt z. B. Bilder in ihrer Farbe verändern, Schatten hinzufügen, die Deckkraft reduzieren oder Bilder und Texte weichzeichnen. In Kombination mit CSS Blend Modes stehen uns somit Photoshop-ähnliche Techniken im Browser zur Verfügung. Da CSS Filter mittlerweile in allen modernen Browser (außer dem IE) zur Verfügung stehen, möchte ich in diesem Beitrag die Funktionsweise kurz zusammenfassen.

Beitrag zu Ende lesen