Anzeige
Anzeige
News
Artikel merken

Das sind die 100 beliebtesten Code-Snippets auf Codepen

Codepen, die Plattform zum Schreiben und Teilen von Frontend-Code, hat die besten Pens aus dem vergangen Jahr veröffentlicht. Wir stellen sie euch vor.

Von Jessy Kösterke
2 Min. Lesezeit
Anzeige
Anzeige

(Screenshot: codepen.io)

Codepen, die Plattform für begeisterte Entwickler aus den verschiedensten Bereichen. Eine Community zum austoben und inspirieren, für Profis sowie Anfänger. Codepen-Nutzer können ihre Arbeiten oder genauer gesagt den Code dahinter veröffentlichen, Test-Cases erstellen oder sich einfach nur inspirieren lassen. Kurz gesagt: Eine Plattform zum Frontend-Code schreiben und teilen.

Anzeige
Anzeige

Besonders die Inspiration kann oft eine echte Hilfe sein, denn durch den offen gelegten Code können zum Beispiel einzelne Snippets beliebig angepasst oder kopiert werden. In der Live-Preview werden Veränderungen in Echtzeit ausgegeben. Wer also auf der Suche nach Code für eine verrückte Animation ist, wird auf Codepen sicher fündig.

Die Code-Snippets nennen sich „Pens“ und können privat oder public sein. Codepen ist somit besonders für Berufseinsteiger eine geeignete Plattform zur Präsentation bereits absolvierter Projekte.

Anzeige
Anzeige

Die besten drei Pens aus 2017

Die Community hat die Möglichkeit „Pens“ anderer Nutzer zu bewerten oder kommentieren. Die Bewertung erfolgt meistens  durch „Hearting“ – eine Art Like, nur wird nicht mit einem Daumen, sondern mit einem Herzen geliked. Jeder Nutzer kann einen Pen bis zu drei Mal bewerten.

Anzeige
Anzeige

Jetzt hat Codepen die Pens mit den meisten Herz-Bewertungen aus dem vergangenem Jahr zusammengefasst und veröffentlicht.

Auf Platz eins der Codepen-Auswertung ist das Werk vom Microsoft-Entwickler David. Mit seinem Pen „CSS Responsive House“ hat er die Community begeistert und konnte 1.681 Likes sammeln.

Anzeige
Anzeige

Den zweiten Platz gewinnt Giana mit ihrem „CSS-only directionally aware hover“ Pen. Je nachdem aus welcher Richtung gehovert wird, legt sich ein Overlay über die Bilder.

Anzeige
Anzeige

Mit 1.310 Likes gewinnt Fabio Ottaviani den dritten Platz. Sein Werk ist die „Split Slick Slideshow“. Durch eine sanfte Scroll-Animation teilt sich das Bild und scrollt zum nächsten.

Hier gelangt ihr direkt zur Übersicht der 100 ausgewählten Pens.

Anzeige
Anzeige

Das könnte euch auch interessieren:

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Ein Kommentar
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

JanSolo76

Kann es sein, dass ihr die Reihenfolge vertauscht habt und euer Platz 1 in Wirklichkeit nur Platz 100 ist? ;)

Antworten

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige