3 Tricks für eine einzigartige Website

Emanuel Wittmann

27.9.2023

•

7 min Lesezeit

Du entwickelst bereits richtig coole Seiten? Baust über Stunden hinweg aufwendige Animationen ein um die Seite mit Leben zu füllen? Aber irgendwie denkst du, es könnte noch besser sein? Hier gibt's die Lösung ⤵

Vielleicht hilft einer dieser Kniffe dabei die letzten Prozente rauszuholen, damit das geschaffene Meisterwerk selbst deinem kritischen Blick standhält 😉

Benutzerdefinierte Scrollbar

Ja genau, das eckige graue Ding an der rechten Seite deines Browsers kannst du anpassen.

Anpassbar sind dabei: Farbe, Hintergrundfarbe und Breite

Im Code sieht das zum Beispiel so aus:

scrollbar-color: #009E94 #e7e7e7;
scrollbar-width: thin;

Für optimale Browserunterstützung siehst du dir am besten diesen Link an:

zu Stack Overflow

Das Markieren von Texten

Wenn du einen Text markierst, erscheint ja für gewöhnlich ein hellblauer Hintergrund und der Text färbt sich weiß.

Auch das kannst du an dein Branding anpassen. Cool,oder?

Anpassbar sind dabei: Farbe und Hintergrundfarbe

Im Code sieht das so aus:

::selection {
color: #FFF;
background: #00949E;
}

Für optimale Browserunterstützung, fügst du einfach zusätzlich folgenden Code ein:

::-moz-selection {
color: #FFF;
background: #00949E;
}

Theme Color

Meiner Erfahrung nach am wenigsten genutzt. Und doch sehr mächtig 🙌🏽

Daher Spoiler: Diese Funktion ist aktuell noch nicht browserübergreifend verfügbar. Aber auf Safari und Chrome für Android wertet es die Website mit Sicherheit bereits auf.

Du fragst dich, wo die Theme Color überhaupt dargestellt wird? Schau mal genau auf das Bild ⤵

Um das zu erreichen musst du nur den folgenden Codeschnipsel in den <head> tag deiner Website einbauen: