web - art - tech
web - art - tech
Hier ist ein einfaches JavaScript-Skript, mit dem ein Burger-Button eine responsive Navigation von der rechten Seite hereinschieben lässt. Beim Klick auf einen Link innerhalb der Navigation verschwindet sie wieder. Funktionalität: Styling: Ergebnis: Beim Klick auf einen Navigationslink oder außerhalb der…
Hier ist ein einfaches Skript, das einen „Top-Button“ erstellt, der erscheint, sobald der Benutzer 100px scrollt. Beim Klick auf diesen Button wird der Benutzer zurück zum Seitenanfang gebracht. HTML und CSS: <!DOCTYPE html><html lang=“en“><head> <meta charset=“UTF-8″> <meta name=“viewport“ content=“width=device-width, initial-scale=1.0″>…
Um zwischen einem Dark-Modus und einem Light-Modus umzuschalten, kannst du mit einem Schalter (switch button) und CSS-Variablen arbeiten. Hier ist eine vollständige Lösung mit HTML, CSS und JavaScript: HTML <!DOCTYPE html><html lang=“en“><head> <meta charset=“UTF-8″> <meta name=“viewport“ content=“width=device-width, initial-scale=1.0″> <title>Dark/Light Mode…
Die Bedeutung von Graceful Degradation im barrierefreien Interface-Design Quelle: Smashing Magazine Graceful Degradation ist ein Designansatz, der sicherstellt, dass die Grundlagen einer Website auch dann noch funktionieren, wenn bestimmte einzelne Teile nicht mehr funktionieren. Der Ansatz beseitigt einzelne Fehlerquellen : Nur weil…
Um sicherzustellen, dass immer nur ein <details>-Element geöffnet ist, wenn der Benutzer ein anderes <details>-Element anklickt, kannst du ein JavaScript hinzufügen, das alle anderen <details>-Elemente schließt, sobald eines geöffnet wird. Hier ist ein Beispiel: HTML <!DOCTYPE html><html lang=“en“><head> <meta charset=“UTF-8″>…
In diesem ersten Video zeige ich dir was HTMX genau ist und warum du es für deine Webprojekte benutzten solltest. In dieser Playlist werden noch weitere Videos zum Thema HTMX folgen. Folge gern dem Kanal um kein Video zu…
HTML5 entwickelt sich ständig weiter, und es gibt kontinuierliche Diskussionen und Vorschläge innerhalb der Web-Community und der W3C (World Wide Web Consortium) über die Einführung neuer Tags und Funktionen. Hier sind einige Tags und Konzepte, die in zukünftigen HTML-Versionen eingeführt…
Hier sind einige weitere HTML5-Tags, die in den vorherigen Antworten noch nicht behandelt wurden: 1. <embed> Das <embed>-Tag wird verwendet, um externe Inhalte, wie z.B. Multimedia-Objekte, einzubetten. Es ersetzt weitgehend das ältere <object>-Tag und bietet eine einfachere Möglichkeit, Inhalte wie…
Hier sind noch weitere CSS3-Befehle und -Eigenschaften, die in den letzten Jahren hinzugekommen sind oder populär geworden sind: 1. accent-color Diese Eigenschaft ermöglicht es, die Akzentfarbe von Steuerelementen wie Checkboxen, Radiobuttons und Schiebereglern zu definieren. 2. place-content place-content ist eine…
Hier sind noch weitere wichtige HTML5-Tags, die eingeführt wurden, um die Struktur, Semantik und Funktionalität von Webseiten zu verbessern: 1. <main> Das <main>-Tag kennzeichnet den Hauptinhalt der Seite. Es sollte nur einmal pro Seite verwendet werden und enthält den einzigartigen…
Hier sind weitere neue CSS3-Eigenschaften und -Funktionen, die in den letzten Jahren eingeführt wurden: 1. scroll-padding und scroll-margin Diese Eigenschaften definieren den Abstand des Inhalts von den Rändern des Containers, wenn scroll-snap verwendet wird. 2. gap (für Flexbox) Die gap-Eigenschaft…
Neben den bereits genannten Tags hat HTML5 eine Reihe weiterer neuer Tags eingeführt, die das Schreiben von semantisch sinnvolleren, strukturierteren und funktionaleren Webseiten erleichtern. Hier sind einige weitere wichtige HTML5-Tags: 1. <aside> Das <aside>-Tag wird verwendet, um Inhalte zu kennzeichnen,…
