Codepen: viele HTML, CSS oder JScript Kreationen

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

Inhalt öffne dich!

Codepen.io?

Codepen.io ist eine Internetplattform, in der Benutzer 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 plaziert 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 angezeigtbekommen. 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

Zurück

Legomännchen mit Werkzeug in der Hand - Werkzeuge für Ihr Business

Sie möchten auch von modernen Online-Tools profitieren und den Erfolg Ihrer Seite damit langfristig ankurbeln?