Codepen: viele HTML, CSS oder JScript Kreationen

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ü:

• CSS3 Responsive Menu Navigation
• Dropdown Menu Animation
• Side Sliding Menu CSS
• Menu Toogle Button with flat Menu

Hover-Effekte:

• Direction Aware Hover Effect
• Text Revel on Hover
• Gallerie Hover Expand
• Border Bounce Effect

Animationen:

• Run, run, Ruuun !
• CSS3 Loading Animation
• Advanced Animation Path
• CSS Animation Material Design

Fazit:

Wer nicht so in dem Thema HTML, CSS oder 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.