Coding Archive - berylune.de https://www.berylune.de/tag/coding Blog für Software, China Gadgets, HTML und CSS Thu, 27 Feb 2025 14:09:21 +0000 de hourly 1 Sanfte Seitenwechsel mit CSS View-Transitions 🚀 https://www.berylune.de/2025/02/sanfte-seitenwechsel-mit-css-view-transitions-%f0%9f%9a%80 https://www.berylune.de/2025/02/sanfte-seitenwechsel-mit-css-view-transitions-%f0%9f%9a%80#respond Thu, 27 Feb 2025 14:07:36 +0000 https://www.berylune.de/?p=558 Ich habe meine Website mit CSS View-Transitions optimiert, um ein flüssigeres und moderneres Navigationserlebnis zu bieten! 🎉 Dank dieser neuen CSS-Technologie wirken Seitenwechsel nicht mehr abrupt, sondern laufen mit sanften Übergängen ab. Möglich macht das die @view-transition-Regel, mit der sich Animationen für den Wechsel zwischen Seiten ganz ohne JavaScript steuern lassen. Ich verwende dabei folgende …

Continue reading "Sanfte Seitenwechsel mit CSS View-Transitions 🚀"

Der Beitrag Sanfte Seitenwechsel mit CSS View-Transitions 🚀 erschien zuerst auf berylune.de.

]]> Ich habe meine Website mit CSS View-Transitions optimiert, um ein flüssigeres und moderneres Navigationserlebnis zu bieten! 🎉 Dank dieser neuen CSS-Technologie wirken Seitenwechsel nicht mehr abrupt, sondern laufen mit sanften Übergängen ab.

Möglich macht das die @view-transition-Regel, mit der sich Animationen für den Wechsel zwischen Seiten ganz ohne JavaScript steuern lassen. Ich verwende dabei folgende Konfiguration:

@view-transition {
    navigation: auto;
    type: morph;
}

🔹 navigation: auto; sorgt dafür, dass View-Transitions automatisch bei jedem Seitenwechsel aktiviert werden.
🔹 type: morph; bewirkt, dass ähnliche Elemente zwischen zwei Seiten nahtlos ineinander übergehen, anstatt neu zu erscheinen oder zu verschwinden.

WordPress: Wichtige Anpassung in der header.php

Wenn du View-Transitions in WordPress nutzen möchtest, musst du eine kleine Änderung in der header.php deiner Website vornehmen. Füge folgende Zeile im <head>-Bereich ein:

<meta name="view-transition" content="same-origin">

Dieser Meta-Tag ist notwendig, damit View-Transitions über verschiedene Seiten hinweg funktionieren. Ohne diese Einstellung bleibt der Effekt auf einzelne Elemente innerhalb einer Seite beschränkt.

Browser-Unterstützung

Aktuell funktionieren View-Transitions nur in Google Chrome und anderen Chromium-basierten Browsern wie Brave oder Opera. In Firefox und Microsoft Edge wird diese Funktion leider noch nicht unterstützt. Falls du also keinen Effekt siehst, könnte das an deinem Browser liegen.

Falls dein Browser es unterstützt, kannst du es direkt auf meiner Website ausprobieren. Ich freue mich über dein Feedback! Viel Spaß beim Erkunden! 😊

Dieser Text wurde KI-generiert.

Der Beitrag Sanfte Seitenwechsel mit CSS View-Transitions 🚀 erschien zuerst auf berylune.de.

]]> https://www.berylune.de/2025/02/sanfte-seitenwechsel-mit-css-view-transitions-%f0%9f%9a%80/feed 0 HTMHell.dev – schlechte Praktiken im Frontend https://www.berylune.de/2019/11/htmhell-dev-schlechte-praktiken-im-frontend https://www.berylune.de/2019/11/htmhell-dev-schlechte-praktiken-im-frontend#respond Wed, 27 Nov 2019 16:33:03 +0000 https://www.berylune.de/?p=134 Eine Sammlung von schlechten Praktiken in HTML, die von echten Websites kopiert wurden. Paradebeispiele wie man es nicht machen sollte. Man lernt nie aus! Schöne Webseiten mit interessanten und Informativen Inhalten gibt es viele. Schaut sich der ein oder andere Frontend-Developer dabei den HTML-Quellcode näher an, muss sich dieser des öfteren die Augen reiben. Gründe …

Continue reading "HTMHell.dev – schlechte Praktiken im Frontend"

Der Beitrag HTMHell.dev – schlechte Praktiken im Frontend erschien zuerst auf berylune.de.

]]> Eine Sammlung von schlechten Praktiken in HTML, die von echten Websites kopiert wurden. Paradebeispiele wie man es nicht machen sollte.

Man lernt nie aus!

Schöne Webseiten mit interessanten und Informativen Inhalten gibt es viele. Schaut sich der ein oder andere Frontend-Developer dabei den HTML-Quellcode näher an, muss sich dieser des öfteren die Augen reiben.

Gründe hierfür sind schlecht generierter und geschriebener Quellcode. Sicher ist mein aktuell verwendetes freies WordPress Theme auch nicht ganz ideal, allerdings gibt es deutlich schlechtere.

Mit groben Schnitzern in der Frondend-Entwicklung befasst sich zu dem Thema die einfache Blog HTMLHell. Es bleibt gespannt was für weitere Patzer dort gezeigt werden. Vielleicht findet man auch eigene Fehler.

HTMHell.dev besuchen

Der Beitrag HTMHell.dev – schlechte Praktiken im Frontend erschien zuerst auf berylune.de.

]]> https://www.berylune.de/2019/11/htmhell-dev-schlechte-praktiken-im-frontend/feed 0