Webdesign Archive - berylune.de

Sanfte Seitenwechsel mit CSS View-Transitions 🚀

Webmaster — Thu, 27 Feb 2025 14:07:36 +0000

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 -Bereich ein:

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.

whocanuse.com – Mircosite für Farbkombinationen

Webmaster — Sun, 08 Dec 2019 20:35:00 +0000

Kann man diese Farbkombination verwenden?

Es gibt eine Vielzahl von Microsites und Entwicklertools, um die Zugänglichkeit von Farben zu untersuchen, einschließlich der direkt in den Browser DevTools integrierten Tools. Sie zeigen dir oft, ob eine Farbe die AA- oder AAA-WCAG-Richtlinien erfüllt. Der Farbkontrast ist jedoch komplizierter, da es eine Vielzahl von Sehstörungen gibt.

Diese Seite von Corey Ginnivan nimmt zwei Farben und zeigt Ihnen dann eine Simulation verschiedener Sehtypen (z.B. Tritanomalie, Schwierigkeiten bei der Unterscheidung von Blautönen) und ob die Farben noch gut passen.

Dazu kommen situative Ereignisse, wie z.B. die Frage, ob ein Bildschirm in direktem Sonnenlicht steht.

whocanuse.com besuchen

Der Beitrag whocanuse.com – Mircosite für Farbkombinationen erschien zuerst auf berylune.de.

HTMHell.dev – schlechte Praktiken im Frontend

Webmaster — Wed, 27 Nov 2019 16:33:03 +0000

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.

Tesla Cybertruck meets CSS

Webmaster — Tue, 26 Nov 2019 19:03:39 +0000

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.