Fundstück

Codepen Top 10 2019: Die besten Code-Beispiele des Schnipseldienstes

Das sind die beliebtesten Pens auf dem Entwicklerdienst Codepen 2019. (Screenshot: t3n)

Die Betreiber von Codepen haben die 100 beliebtesten Code-Schnipsel des Jahres 2019 zusammengetragen. Wir zeigen euch die die Top Ten.

Codepen ist für Entwickler zu einer zentralen Anlaufstelle geworden. Hier zeigen Developer sich gegenseitig ihre Lösungen für ganz spezielle Anwendungsfälle oder teilen kleine Projekte zum Spaß, wie etwa den hier vorgestellten Tesla Cybertruck in CSS. So könnte Codepen durchaus als das Dribbble für Entwickler bezeichnet werden. Allerdings ist die Qualität auf Codepen im Schnitt höher.

Als Rückblick auf das Jahr 2019 haben die Betreiber nun eine Top 100 der Best Practices zusammengestellt. Für das Ranking haben sie die Zahl der vergebenen Favoritenpunkte, auf Codepen Herzen genannt, und die Zahl der Herzengeber einbezogen. Das ist insofern relevant als jeder Herzengeber bis zu drei Herzen an ein Projekt heften kann.

Die Top 100 findest du hier. Mit der Top 10 befassen wir uns folgend näher:

Platz 10: CSS Card Hover Effects

CSS Card Hover Effects. (Screenshot: t3n)

CSS Card Hover Effects. (Screenshot: t3n)

Entwickler Jhonier Riascos Zapata belegt Platz 10 mit seinem Hover-Effekt für kartenbasierte Designs, den er in reinem CSS umgesetzt hat. Dabei wird eine Karte zunächst monochrom abgeblendet dargestellt, um dann on Hover farbig zu werden und weitere Inhalte zu zeigen.

Hier gehts zum Pen >>

Platz 9: The Cube

The Cube. (Screenshot: t3n)

The Cube. (Screenshot: t3n)

Dieser Pen ist beeindruckend. Boris Šehovac hat mit HTML, CSS und Javascript den berühmten Zauberwürfel (Rubik’s Cube) nachgebaut. Nach einem Doppelklick auf den Würfel mischt sich dieser durch. Danach kann per Mauszug oder Push-Tap auf mobilen Geräten versucht werden, den Würfel zu lösen. Dabei wird die Zeit gezählt. The Cube ist auch optisch überaus ansprechend.

Hier gehts zum Pen >>

Platz 8: Displacement Scroll

Displacement Scroll. (Screenshot: t3n)

Displacement Scroll. (Screenshot: t3n)

Dieser Pen von Matthew Willox implementiert einen Scroller, der Bilder durchblättert und dabei den Übergang als eine Art Morphing gestaltet. Die Bilder scheinen beim Scrollen ineinander zu verfließen. Wilcox bringt dafür HTML, CSS und Javascript zum Einsatz.

Hier gehts zum Pen >>

Platz 7: Mini Music Player – Vue.js

Mini Music Player - Vue.js. (Screenshot: t3n)

Mini Music Player – Vue.js. (Screenshot: t3n)

Muhammed Erden überzeugt mit seinem optisch ansprechenden Music Player auf Basis von Vue.js. Funktional könnte seine Lösung noch von einer API-Anbindung profitieren, damit nicht jeder Song erst heruntergeladen werden müsste.

Hier gehts zum Pen >>

Platz 6: Color This Sofa!

Color this Sofa. (Screenshot: t3n)

Color this Sofa. (Screenshot: t3n)

Kyle Wetton liefert ein Beispiel dafür, wie eine SVG-Grafik nebst Hintergrund per CSS Blend Mode frei eingefärbt werden kann. Dafür benötigt er neben HTML und CSS auch Javascript.

Hier gehts zum Pen >>

Platz 5: Simple CSS Waves

Simple CSS Waves. (Screenshot: t3n)

Simple CSS Waves. (Screenshot: t3n)

Daniel Österman, als Goodkatz auf Codepen, präsentiert eine einfache Möglichkeit, Websites mit animierten Wellenbewegungen auf reiner CSS-Basis zu versehen. Die Wellen bewegen sich über die volle Breite und funktionieren auch in Mobilbrowsern.

Hier gehts zum Pen >>

Platz 4: CSS Grid: Style Guide

CSS Grid: Style Guide. (Screenshot: t3n)

CSS Grid: Style Guide. (Screenshot: t3n)

Olivia Ng zeigt auf Codepen einen Teil ihrer CSS Grid Collection und kann sich mit dem Style Guide aus der Kollektion den vierten Platz sichern. Per einfachem Klick ändert ihr einen kompletten Design-Stil, der nicht nur die Farbgebung, sondern auch die Typografie, Buttons, Links und Alerts betrifft. Das ist wirklich gut gemacht.

Hier gehts zum Pen >>

Platz 3: Click the Button!

Click the Button. (Screenshot: t3n)

Click the Button. (Screenshot: t3n)

Der Nutzwert dieses Pen ist beschränkt. Dennoch ist der Effekt aus CSS und Javascript sehenswert und bringt Bård N Hovde den dritten Platz ein. Versucht einfach mal, den einzigen Button dieses Pen zu klicken. Ihr werdet euch wundern.

Hier gehts zum Pen >>

Platz 2: Pure CSS Still Life – Water and Lemons

Pure CSS Still Life - Water and Lemons. (Screenshot: t3n)

Pure CSS Still Life – Water and Lemons. (Screenshot: t3n)

Ben Evans zeigt uns, was mit purem CSS möglich ist. Das Bild dieses Pen zeigt ein Wasserglas und zwei Zitronenteile, basiert aber nicht auf einem oder mehreren Fotos. Vielmehr generiert Evans die Darstellung vollständig aus CSS.

Hier gehts zum Pen >>

Platz 1: Credit Card Form – Vue.js

Credit Card Form - Vue.js. (Screenshot: t3n)

Credit Card Form – Vue.js. (Screenshot: t3n)

Den Entwickler des visuellen Kreditkartenformulars auf Basis von Vue.js haben wir auf Platz 7 bereits kennengelernt. Mit seiner optisch ansprechenden „Credit Card Form“ sichert sich der Javascript-Experte auch den ersten Platz.

Hier gehts zum Pen >>

Passend dazu: Das sind die 100 beliebtesten Code-Snippets auf Codepen

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
Daniel
Daniel

„So könnte Codepen durchaus als das Dribbble für Entwickler bezeichnet werden. Allerdings ist die Qualität auf Codepen im Schnitt höher.“

Sie vergleichen hier Äpfel mit Birnen und sagen dann, dass Äpfel besser sind …

Es ist zudem zwar schön zu sehen, was alles mit moderner Webtechnologie möglich ist, doch die meisten Beispiele sind im Grunde nur Spielereien.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung