Codepen: viele HTML, CSS oder JScript Kreationen

von

"Die Inspiration existiert, aber sie muss dich bei der Arbeit finden." Codepen zeigt, was alles möglich ist.

Teilen macht sexy ...

Inhalt öffne dich!

Codepen.io?

Codepen.io ist eine Internetplattform, in der Benutzer:innen eigene HTML, CSS oder JScript Kreationen hochladen können. Es werden in dieser Hinsicht keine Grenzen gesetzt. Hover Effekte, Buttons, Überblendungen, Ladeanimationen, Seitenlayouts oder auch unfertige Ideenschnipsel sind hier nur ein kleiner Teil aller hochgeladenen Arbeiten.

Direktes ändern und testen im Browser

Der Unterschied zu anderen Seiten, in denen Arbeiten dieser Art hochgeladen werden ist der Editor. Dieser ist aufgeteilt in drei Bereiche. Ganz oben auf der rechten Seite befindet sich der HTML-Block. Dort sind alle HTML-Befehle vorzufinden. Mittig platziert ist der CSS-Block und ganz unten auf der Seite befindet sich der JScript-Code.

Es ist Ihnen nun möglich, dort eigene Links zu Bilder einzufügen oder Farben, Größen und Inhalte zu verändern, sodass Sie direkt im linken Vorschaufenster Ihre Veränderung angezeigt bekommen. So ist es auch für Laien recht einfach, die Logik hinter einer Arbeit zu verstehen und die Grundlagen der Codes optisch dargelegt zu bekommen.

Natürlich lässt sich dieser Code auch einfach kopieren.

Beispiele:

Um einen kleinen Vorgeschmack zu bekommen haben wir von KONTOR4 ein paar Musterbeispiele für Sie vorbereitet:

Menü:

Hover-Effekte:

Animationen:

Fazit:

Wer nicht so in dem Thema HTML, CSS, JScript involviert ist und trotzdem auf seiner Internetseite ein Feuerwerk an Animationen haben möchte oder einfach nur mit einem schönen Hover-Effekt überzeugen will, sollte auf jeden Fall einen Blick auf Codepen.io werfen. Leider fehlt die Suche innerhalb Kategorien, welches aber durch das Suchfenster und die Tag-Auswahl zu verkraften ist. Dank der Bandbreite an verschiedenen Arbeiten ist Codepen ein Katalog an Ideen und Inspirationen für die eigenen HTML, CSS und JScript- Arbeiten.

Sie brauchen Unterstützung?

Ohne (An-) Frage - keine Antwort. So einfach ist das. Nutzen Sie einfach unser Kontaktformular und wir melden uns umgehend bei Ihnen zurück.

Wir können Ihnen bei folgenden Leistungen weiterhelfen:

  • Webdesign
  • Online Werbung (SEO und SEA)
  • Social Media
  • Content Management
  • Marketingautomatisierung
  • Programmierung

Wer schreibt hier?

Sina Koch - Online Marketing Managerin

Leidenschaftliche Teetrinkerin, äußerlich sowie innerlich ein kleiner (Kreativ-) Fuchs

Mehr erfahren ...