Außerdem: Visual-Regression-Testing mit PhantomCSS

Fast Forward Spezial: Web Type Lockup, CSS Border Images & Scroll Snap Points
Kommentare

2015 neigt sich langsam aber sicher dem Ende zu. Ganz im Gegensatz zum Bedarf an versierten und vielfältig begabten Entwicklern – denn der ist ungebrochen groß. Wer sich für’s nächste Jahr den Vorsatz gesetzt hat, sein Skillset zu vertiefen und/oder zu erweitern, den wollen wir in Form einer kleinen Reihe dabei etwas unterstützen. Dazu haben wir uns Folgendes überlegt: In den nächsten sechs Fast-Forward-Ausgaben bieten wir Ihnen zu jeweils einem Thema eine konzentrierte Ladung Tutorials, Einführungen sowie Tipps & Tricks. Den Anfang machen insgesamt sechs Texte zur CSS-Entwicklung.

Visual-Regression-Testing mit PhantomCSS

Visual-Regression-Testing hat in letzter Zeit erheblich an Popularität gewonnen – aber warum? Wer eine Frage auf diese Antwort erhalten möchte, sollte einen Blick auf den Blogpost von Jon Bellah werfen. Er erklärt, was man sich unter dieser Form des CSS-Testings vorzustellen hat, warum sie sinnvoll ist und wie man sie gewinnbringend in das eigene Projekt implementieren kann.

„box-shadow“ geschmeidig animieren

Ist es möglich, die Eigenschaft box-shadow in CSS ohne große Performance-Einbußen in die eigene Webseite zu integrieren? – Nein! Aber es gibt eine Alternative, um den Effekt zu imitieren. Mithilfe von opacity ist es möglich, ein Pseudo-Element zu animieren, das durchgehend mit 60 FPS dargestellt werden kann. Wie das funktioniert, verrät Tobias Ahlin in seinem Blogeintrag.

CSS: Drag-and-Drop File-Uploading

In einem Blogpost erklärt Osvaldas Valutis nicht nur, wie ein Upload per Drag-and-Drop funktioniert. Er stellt auch Überlegungen hinsichtlich des User Interfaces, der User Experience und des Browser-Supports an und diskutiert ihre Umsetzung aus der Sicht des Progressive Enhancement.

Web Type Lockup: was ist das und wie macht man’s?

Unter einem Type Lockup versteht man ein typographisches Design, das sich nicht verändern darf, also nicht flexibel ist, sondern des Aussehens wegen festgestellt ist – ein schriftbasiertes Logo zum Beispiel. Wie man ein Type Lockup-Design in CSS bastelt und trotzdem eine responsive Seite behält, zeigt sehr schön dieser Artikel von Chris Coyier. Für die Erstellung seines Type Lockups greift er auf das Dateiformat SVG zurück und erläutert dazu noch einige Finessen.

Fast Forward Spezial im Überblick

Alle Beiträge aus unserer Reihe Fast Forward Spezial finden Sie hier.

CSS Border Images

CSS bietet eine ganze Reihe an Optionen, um Elemente auf Websites mit einem hübschen Rahmen zu versehen. Viele Designer kennen die Effekte dotted, dashed, solid und double bereits; über das border-image-source-Property lassen sich aber darüber hinaus auch Bilder als Rahmen verwenden. Wie das geht, erklärt das Tutorial von Maria Antonietta Perna.

Scroll Snap Points mit CSS

Punktgenaues Scrollen ließ sich bisher nur per JavaScript verwirklichen. Sollte der Nutzer beim Scrollen genau ein Bild weiter springen, war das recht aufwändig zu realisieren. Inzwischen gibt es aber auch eine native CSS-Lösung dafür. Dabei wird ein Scroll-Container erstellt, innerhalb dem dann Objekte als Snap Points markiert werden. Gescrollt werden kann horizontal und vertikal, auch die Zielposition des Objekts auf dem Bildschirm kann detailliert definiert werden. Bisher unterstützen allerdings nur der Firefox und Microsoft Edge sowie der IE und Safari Scroll Snapping. Chrome-User müssen noch ein wenig auf die Funktion warten.

Aufmacherbild: Photo frames on wall. Vector vintage picture frames (modifiziert) von Shutterstock / Urheberrecht: Banana Republic images

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -