kulturbanause Blog

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

CSS


CSS Multi Columns – Responsive Layouts ohne Media Queries

Mit dem »Multi Column Layout« von CSS lassen sich Inhalte in mehreren Spalten anzeigen. Das CSS-Feature bietet sich besonders gut für Fließtexte an, kann aber auch für andere Darstellungen sinnvoll eingesetzt werden. Besonders interessant ist, dass mit Multi Columns responsive Layouts ohne Media Queries möglich sind. Die Gestaltung von in sich abgeschlossenen Komponenten wird somit möglicherweise einfacher.

Beitrag zu Ende lesen

CSS conic gradients (gewinkelte Verläufe)

Gewinkelte Verläufe gehören in vielen Grafik- und Bild­bearbeitungs­programmen zur Standard-Ausstattung. Sie ermöglichen zahlreiche grafisch ansprechende Effekte, die mit linearen oder radialen Verläufen nicht möglich sind. In CSS könnt ihr gewinkelte Verläufe mit der conic-gradient()-Funktion erzeugen.

Beitrag zu Ende lesen

CSS Scroll Snap

Mit Hilfe der Scroll Snap-Technik von CSS könnt ihr steuern, dass der Browser an bestimmten Stellen im Layout einrastet, wenn über diese Punkte hinweg gescrolled werden soll. CSS Scroll Snap kann somit die Usability und die User Experience erheblich verbessern – z. B. beim Gestalten von Bildergalerien oder OnePagern mit verschiedenen Sektionen. Viele Scrolling-Effekte, für die früher JavaScript eingesetzt wurde, können dank Scroll Snap heute mit CSS gelöst werden.

Beitrag zu Ende lesen

CSS display: contents;

Als Frontend-Designer steht man ab und zu vor dem Problem, dass die semantisch beste HTML-Struktur mit CSS nicht in die gewünschte Form gebracht werden kann. Oft werden daher Abstriche im HTML-Markup in Kauf genommen. Dieser Fall tritt auch dann ein, wenn Layout-Techniken wie Flexbox oder Grid genutzt werden. Mit dem CSS-Befehl display: contents; gehören solche Schwierigkeiten der Vergangenheit an.

Beitrag zu Ende lesen

CSS Text Decoration Styling – Farbig unterstrichene Texte, Unterbrechungen bei Unterlängen, Effekte für Linien usw.

Links werden in HTML automatisch unterstrichen dargestellt. Ein unterstrichenes Wort auf einer Website wird daher vom Anwender intuitiv als Hyperlink interpretiert – weshalb man das Gestaltungsmittel der Unterstreichung bewusst einsetzen sollte. Der CSS-Befehl text-decoration:underline; sorgt dafür, dass ein Text unterstrichen wird. Wenn mehr gestalterische Freiheit gewünscht war, haben Designer häufig border-bottom eingesetzt. Das CSS Text Decoration Module Level 3 erweitert die Möglichkeiten von text-decoration um Farben, Abstände und Effekte.

Beitrag zu Ende lesen