10 erstaunliche CSS- und HTML-Retro-Type-Effekte

Hipstamatic, Spotify und jetzt Adidas: Es scheint, dass unsere Gesellschaft eine riesige Sehnsucht nach alten Zeiten und alten Wegen hat. Vielleicht ist unser Markt so gesättigt mit allem Hightech und Innovativen, dass uns langsam langweilig wird. Oder vielleicht ist es nur eine banale Nostalgie für alte Zeiten, als alles noch leicht, einfach und rosarot schien. Die aktuelle Obsession mit allem aus der jüngeren Vergangenheit ist offensichtlich. Es ist überall zu sehen, und die Webdesign-Sphäre ist keine Ausnahme.

Tatsächlich manifestiert sich der Retro-Stil von Zeit zu Zeit im Web. Es zeigt sich durch pastellfarbene Retro-Farbpaletten, Duotone-Effekte, kühne, stark vereinfachte geometrische Drucke, Art-Deco-Illustrationen, körnige und verrauschte Effekte, Polaroid-ähnliche Bilder, von Boulevardzeitungen inspirierte Layouts, Landschaften aus den Old-School-Spielen und natürlich Old-School-Spiele. zeitgemäße Typografie.

Apropos, Typografie ist eine der beliebtesten Optionen, wenn es darum geht, einem Projekt ein spritziges Retro-Feeling zu verleihen. Es ist dezent und geschmackvoll. Und was am wichtigsten ist, es überfordert oder überlastet das Projekt nicht. Es ist einfach ein perfekter Abschluss, der ins Auge fällt und eine richtige Atmosphäre schafft.

Außerdem können Sie mit Hilfe des beliebten Trios aus CSS/JS und SVG schnell Effekte aus den 80er oder 90er Jahren reproduzieren. Wenden Sie den Effekt einfach auf ein beliebiges Wort an und erhalten Sie das gewünschte Ergebnis in Sekunden. Und Sie müssen sich nicht mit Fotobearbeitungs- oder designbezogenen Programmen wie Photoshop oder Sketch herumschlagen, um Änderungen vorzunehmen. Einfach und elegant, nicht wahr?

Wenn Sie diese Art, Dinge zu erledigen, zu schätzen wissen, haben wir 10 Code-Snippets mit erstaunlichen Retro-Typografieeffekten zusammengestellt. Lass uns einen Blick darauf werfen:

Das Land verlassen

Wir konnten nicht anders, als unsere Sammlung mit diesem herausragenden Code-Snippet von Gabrielle Wee zu beginnen. Ihr Projekt heißt Left the Country und wurde vor allem vom Horrorfilm „Stranger Things“ der Duffer Brothers inspiriert. Viele Designer und Entwickler haben es reproduziert. Dribbble und Codepen wimmeln nur so von professionellen Aufnahmen des Intros der Show. Es gibt sogar einen von Nelson Cash entwickelten Generator, mit dem Sie ein Logo mit Ihren Daten nachbauen und das Bild herunterladen können. Aber wenn Sie alles Statische vermeiden wollen, probieren Sie das Code-Snippet von Wee aus, das eine reine HTML- und SCSS-Lösung ist.

Keine Stelle 404

No Vacancy 404 von Riley Shaw ist dem vorherigen Werk von Gabrielle Wee sehr ähnlich. Seine Wurzeln liegen in der wunderbaren Linienkunst, die mit einer leuchtenden Berührung und einem blinkenden Effekt für mehr Realismus aufgewertet wird. Es erinnert uns an all die grellen Leuchtreklamen, die Mitte des vergangenen Jahrhunderts in Amerika immer beliebter wurden. Aber vielleicht sahen sie nicht so elegant und raffiniert aus wie Riley Shaws Meisterwerk. Die Lösung ist eine Symbiose aus Eleganz, Raffinesse und Vintage-Appeal.

Vintage Leuchtreklame

Brauchen Sie mehr leuchtende Effekte und amerikanisches Flair? Dann sollten Sie Ihre Aufmerksamkeit auf Vintage Neon Sign von Kyle Lavery richten. Es fühlt sich einfach so an, als wäre es aus der Werbung der 60er Jahre herausgetreten, die mit Leuchtschildern überfüllt war. Die intelligente Kombination von Röhren mit verschiedenen Durchmessern, der wunderbare Leuchteffekt, die umstrittene Farbpalette und die großartige Schrift machen den Trick und resultieren in einem herausragenden Meisterwerk mit Code.

Splitting: Space Invaders

Lassen Sie uns zurück in die 80er Jahre gehen und Code-Snippets mit Typografieeffekten für diese Zeit erstellen. In erster Linie drehte sich in den 80er und 90er Jahren alles um Videospiele. Unsere Kindheit war so bezaubernd. Und Martin Pitt ist einer von denen, die es geschafft haben, uns daran zu erinnern. Sein Splitting: Space Invaders bringt uns zurück in unsere Jugend. Diese Umsetzung bezaubert mit positiver Stimmung und Verspieltheit. Es sieht süß und verträumt aus. Es wurde mit Hilfe der Splitting-Bibliothek erstellt, die Manipulationen mit CSS kinderleicht macht.

Mit Retro-Typografie spielen

Es gibt keine 90er ohne Arcade-Spiele, die in der Heimvideospielkonsole Atari gespielt werden. Es ist nur ein Synonym für die 80er und 90er in der Geek-Welt. Und Max Kohler weiß es ganz genau. Sein der Retro-Typografie gewidmeter Codestift zeigt ein gekonnt reproduziertes Atari-Logo. Außerdem finden Sie vier weitere Effekte, die Schriftzügen einen angenehmen Retro-Touch verleihen.

Neuer Retro-Text / Typografie der 80er / 404 SVG

Es gibt mehrere fantastische Texteffekte in unserer Sammlung, die an einige süße Erinnerungen im Zusammenhang mit dem Fernsehen erinnern. Zum Beispiel New Retro Text von Vladimir Jovanovic, 80s Typography von David Parker und 404 SVG von Marcos Mellado. Während die ersten beiden Projekte kräftige Typografie, glänzende Oberflächen, Neonstilisierung und drastische Farbgebung für eine gewisse VHS-Retro-Intro-Atmosphäre verwenden, fühlt sich das zweite ein bisschen rustikal, banal und grob an – genau wie Musikvideoclips auf MTV aus dieser Zeit.

Vintage-Schrift / Ehrfürchtiger Vintage-Titel

Dies wäre keine vollständige Sammlung von Retro-Typografieeffekten ohne ein paar traditionelle Lösungen. Und wir haben zwei fantastische Codeschnipsel: Vintage Typeface von Thibault Jan Beyer und Awesome Vintage Title von Kevin Nagata. Beide zeigen ein traditionelles Vintage-Schriftbild, wie wir es uns gewohnt sind: Ultradünn mit zunehmend verlängerten Buchstabenformen, einem subtilen Art-Deco-Touch und natürlich einem Schatten, der das Herz und die Seele des Kunstwerks darstellt. Während das Projekt von Thibault Jan Beyer klassisch und majestätisch aussieht; das Projekt von Kevin Nagata wirkt etwas modern mit einem gewissen verspielten Unterton.

Zurück in der Zeit

Wenn Sie alles Ultramoderne, Anspruchsvolle und High-End satt haben, dann ist es an der Zeit, die Gegenwart hinter sich zu lassen und sich von der Vergangenheit inspirieren zu lassen. Glauben Sie uns, es hat immer ein Ass im Ärmel. Nicht ein einziges Mal versäumt es, den Tag zu retten.

Sie bietet Designern Trends und Lösungen, die ein Projekt aus der Masse herausstechen lassen. Und Retro-Typografie-Effekte sind das perfekte Beispiel dafür. Sie sind einladende und angenehme Explosionen aus der Vergangenheit, die auf natürliche Weise Aufmerksamkeit erregen und sich wie ein Hauch frischer Luft anfühlen.