kulturbanause Blog

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

Frontend


Title-Tag des inaktiven Browser-Tabs animieren

Eine Bewegung in einer ansonsten statischen Umgebung zieht den Blick auf sich. Der <title>-Tag einer Website, der im Browser-Tab angezeigt wird, ist in der Regel statisch und somit eher unauffällig. Wir archivieren in diesem Beitrag ein jQuery-Snippet, mit dessen Hilfe ihr den Inhalt des im Hintergrund geöffneten Browser-Tabs austauscht und auf Wunsch animiert.

Beitrag zu Ende lesen

Textausrichtung mit CSS: Text von oben nach unten bzw. von rechts nach links schreiben

Die Ausrichtung von Text auf einer Website kann kompliziert werden, beispielsweise wenn rechtslaufende Sprachen wie Arabisch abgebildet werden sollen oder wenn aus gestalterischer Sicht Text von oben nach unten laufen soll. Wir geben euch in diesem Beitrag eine Übersicht über die verschiedenen CSS-Techniken zum Ausrichten und zum Positionieren von Text.

Beitrag zu Ende lesen

CSS asynchron laden

Laut dem Analyse-Tool PageSpeed Insights von Google sollen JavaScript- und CSS-Ressourcen, die das Rendering blockieren, nicht in Inhalten »above the fold« (ohne Scrollen sichtbar) vorhanden sein.
Code, der nicht inline im Dokument eingebunden sondern in eine eigene Datei ausgelagert ist, blockiert das Rendering. Daher empfiehlt es sich JavaScript am Ende der Seite vor dem schließenden <body>-Tag anzubringen. Für CSS-Dateien muss jedoch eine andere Methode angewandt werden, wenn der HTML-Code valide nach den Richtlinien des W3C-Konsortiums sein soll. Eine Möglichkeit hierfür ist das asynchrone Laden. Wie das umgesetzt wird beschreibt Scott Jehl ausführlich.

Direkter Link zum Artikel

Variable Fonts

Bei sog. »Variable Fonts« handelt es sich um ein neues OpenType Feature, dass zunehmend an Bekanntheit gewinnt und darüber hinaus im neuesten Update der Adobe Creative Cloud verfügbar ist. Variable Fonts bieten eine Reihe neuer Möglichkeiten über die sich vor allem Webdesigner (aber nicht nur) freuen dürften. Im Typekit-Blog wurde bereits 2016 darüber berichtet und die neuen Features zusammengefasst.

Direkter Link zum Artikel

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

Explicit und Implicit Grids im CSS Grid Layout

Das CSS Grid Layout bietet die Möglichkeit, Raster in CSS zu definieren und Objekte in Rasterzellen zu platzieren. Dabei müssen wir nicht jede Zelle, Spalte und Zeile manuell angeben und ebenso wenig müssen wir jedes Objekt manuell platzieren. CSS Grids sind flexibel genug, um sich Objekte automatisch zu platzieren. Dies wird durch das so genannte explizite und implizite Raster gehandhabt. Um was es sich dabei handelt und worin der Unterschied besteht erläutert Manuel Matuzovic.

Direkter Link zum Artikel

Die CSS-Eigenschaft »font-display«

Webfonts sind heutzutage eine Selbstverständlichkeit. Allerdings wird die Schrift von modernen Browsern so lange versteckt, bis sie komplett geladen ist. Mit der CSS-Eigenschaft font-display kann der Fallback- und Ladeprozess (FOIT, FOUT) von Webschriften ähnlich gestaltet werden wie mit JavaScript-basierten Lösungen. Allerdings ist dafür nur noch eine Codezeile nötig. Jeremy Wagener erklärt, wie font-display eingesetzt wird und welche Auswirkung die verschiedenen Werte haben.

Direkter Link zum Artikel