CSS Archive - berylune.de https://www.berylune.de/tag/css 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 Tesla Cybertruck meets CSS https://www.berylune.de/2019/11/tesla-cybertruck-meets-css https://www.berylune.de/2019/11/tesla-cybertruck-meets-css#respond Tue, 26 Nov 2019 19:03:39 +0000 https://www.berylune.de/?p=64 Es gibt auch Sie, weibliche Gurus des CSS wie Lynn Fisher. Die Künstlerin hat mit einem einfachen DIV HTML-Tag und 353 Zeilen CSS den von Elon Musk neu präsentierten Tesla Cybertruck nachgebaut. Respekt! Auch wenn der Tesla Cybertruck nur aus eckig und kantigen Design besteht, gebührt die Aufmerksamkeit der Umsetzung mittels Cascading Style Sheets. Mittels …

Continue reading "Tesla Cybertruck meets CSS"

Der Beitrag Tesla Cybertruck meets CSS erschien zuerst auf berylune.de.

]]> Es gibt auch Sie, weibliche Gurus des CSS wie Lynn Fisher. Die Künstlerin hat mit einem einfachen DIV HTML-Tag und 353 Zeilen CSS den von Elon Musk neu präsentierten Tesla Cybertruck nachgebaut.

Respekt! Auch wenn der Tesla Cybertruck nur aus eckig und kantigen Design besteht, gebührt die Aufmerksamkeit der Umsetzung mittels Cascading Style Sheets.

Mittels CSS3 und der Verwendung der Multi-Background Funktion und CSS linear-gradients sowie radial-gradients Farbverläufen, background-size, background-position mittel CSS Preprocessor zusammen gebastelt.

Es ist beachtlich was möglich ist wenn man aufe keine älteren Browser Rücksicht nehmen kann.

Auf Codepen anschauen

Der Beitrag Tesla Cybertruck meets CSS erschien zuerst auf berylune.de.

]]> https://www.berylune.de/2019/11/tesla-cybertruck-meets-css/feed 0