Das sind die 100 beliebtesten Code-Snippets auf Codepen
(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.
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.
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.
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.
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.
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.
Das könnte euch auch interessieren:
- Die ultimative Frontend-Checkliste für Webdesigner
- 6 Webdesign-Trends, die ihr 2018 nicht verpassen solltet
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
Kann es sein, dass ihr die Reihenfolge vertauscht habt und euer Platz 1 in Wirklichkeit nur Platz 100 ist? ;)