kulturbanause Blog

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

Frontend


CSS aspect-ratio – das Seitenverhältnis von HTML-Elementen steuern

Web-Layouts und einzelne Komponenten ändern ihre Abmessungen i.d.R. unabhängig in Breite und Höhe. Sie skalieren – bis auf wenige Ausnahmen wie die HTML <img>- oder <video>-Elemente – nicht proportional. Das Beibehalten oder das Verändern des Seitenverhältnisses ist allerdings häufig ein Schlüsselfaktor, wenn es um Layout-Entscheidungen im responsive Design geht. Ein festes Seitenverhältnis ist mittels CSS derzeit nur mit einem Trick möglich. Das ändert sich bald mit der nativen CSS-Eigenschaft aspect-ratio.

Beitrag zu Ende lesen

CSS color()-Function  – »Wide-Gamut« und Sonderfarben für Websites

Der vorherrschende Farbraum im Internet ist der sRGB-Farbraum. Monitore mit großem Farbumfang sind allerdings in der Lage mehr Farben darzustellen als mit sRGB abgebildet werden können. Mit neuen CSS-Techniken kann der erweiterte Farbraum dieser Monitore bedient werden, wodurch wir leuchtende Farben darstellen können, die früher auf Website nicht verwendet werden konnten. Der Effekt ist vergleichbar mit dem von Sonderfarben wie Pantone oder HKS im Druck. Die Farben im erweiterten Farbraum wirken kräftiger und »satter« und haben das Potenzial in Erinnerung zu bleiben.

Beitrag zu Ende lesen

Bilder im Responsive Design – Tipps für Seitenverhältnisse & Motive in flexiblen Layouts

Fotos, Illustrationen und Grafiken sind viel genutzte Gestaltungselemente im Web Design. Beim Einsatz von Bildformaten und Motiven sollte allerdings einiges beachtet werden, damit die Website später gut umsetzbar ist und redaktionell komfortabel gepflegt werden kann. Wir zeigen, was ihr bei Bildern im Web Design hinsichtlich Bildausschnitt, Skalierung und Seitenverhältnis beachten solltet.

Beitrag zu Ende lesen

HTML-Inhalte mit CSS und ARIA barrierefrei verstecken

Es gibt zahlreiche Gründe, weshalb Inhalte auf einer Webseite versteckt werden sollen. Bei der handwerklich korrekten Umsetzung spielt Barrierefreiheit immer eine Rolle, denn neben dem vollständigen Verstecken von Inhalten für alle Personen können Elemente auch nur für sehende Menschen oder nur für assistive Technologien wie Screenreader versteckt werden. Wir geben einen Überblick wie Inhalte mit CSS im jeweiligen Anwendungsfall korrekt versteckt werden.

Beitrag zu Ende lesen

JSON aus Sketch-Datei extrahieren

Sketch ist als UX/UI-Design-Tool u.a. auch deshalb so populär, da Sketch-Dokumente sich leicht im Frontend weiterverarbeiten lassen. Eine dieser Möglichkeiten ist das Auslesen von JSON aus Sketch. Im Kern ist jede Sketch-Datei ein gezippter Ordner mit enthaltenen JSON-Dateien. Im Umkehrschluss können aus Code auch neue Sketch-Dokumente erzeugt werden, wie Airbnb mit react-sketchapp beeindruckend vorgemacht hat.

Beitrag zu Ende lesen

CSS clip-path – Objekte mit Schnittmasken beschneiden

Mit der CSS-Eigenschaft clip-path können HTML-Elemente visuell beschnitten werden. Abgeschrägte Kanten, maskenartige Effekte und individuelle Formen sind somit kein Problem mehr. Der clip-path wird durch eine Vektor-Form beschrieben, daher sind keine weichen Übergänge möglich. Die Beschneidungspfade können mit verschiedenen Basis-Formen hergestellt werden. Neben Kreis, Ellipse und abgerundeter Ecke, können detaillierte Formen mit dem Polygon hergestellt werden.

Beitrag zu Ende lesen