Live Code Übersicht

Dark Mode

Diese ist ein Beispiel für den Media Querie für Dark Mode und prefers-color-scheme.

Placeholder Styling

Diese ist ein Beispiel für eine Placeholder Styling mit Costum HTML Elementen und JavaScript.

Interne und Externe Links Erkennen

Diese ist ein Beispiel um Externe und Interne Links mittels CSS zu erkennen und Unterschiedlich zu Stylen.

File Upload Stylen

Diese ist ein Beispiel für das Stylen von File Uploads. Multi Upload Möglich.

Mailto Beispiel

Beispiel für einen HTML Mailto Link - Damit kannst du Emails Erstellen.

JavaScript MailTo

Diese ist ein Beispiel für den Mail To Generator in JavaScript mit data Attributen.

JavaScript Iframe Erkennen

Wie du mit JavaScript erkennen kannst, ob eine Seite in einem Iframe geöffnet wurde.

CSS Checkboxen und Radiobuttons Stylen

Diese ist ein Beispiel für das Stylen von Radio Buttons und Checkboxen.

Match Media Beispiel

Live Demo für eine Verwendung von matchMedia. Abschließend will ich dir noch einmal ein Beispiel zeigen, wie unser ganzer Code aus dem vorherigen Beispiel in einer Live-Demo aussehen würde. Öffne das Fenster zum Beispiel mal in Groß und ziehe es hin und her, du wirst direkt eine Veränderung bemerken.

Dialog Element

Diese ist ein Beispiel für die Verwendung vom neuen Dialogelement, in JavaScript / HTML.

Intersection Observer - Prozent Anzeigen

In diesem Beispiel kannst du erkennen, zu wie viel Prozent das jeweilige Bild im Viewport ist.

Intersection Observer - LazyLoading

Diese ist ein Beispiel für die Erstellung eines LazyLoading mittels IntersectionObserver.

Intersection Observer - Animation

Diese ist ein Beispiel für die Erstellung einer Animation mittels IntersectionObserver.