CSS: Die Nutzung von System-Fonts

Web Fonts zu nutzen ist nett, aber manchmal ist es sinnvoll, eine Schriftart zu nutzen, die bereits auf dem System installiert ist. So kannst du die Perfomance etwas verbessern, weil der Browser so nicht mehr die Font-Datei laden muss. Außerdem kannst du dem Nutzer so einen gewohnten Look präsentieren, wenn die Schriftart auf der Webseite zu dem seinen Betriebssystems passt.

There’s also an english version of this article on my Medium site. Beitragsbild: mali maeder, Quelle: Pexels

„CSS: Die Nutzung von System-Fonts“ weiterlesen

UI Design – Die Herausforderung eines Dark Themes

Entwickler lieben sie schon seit Ewigkeiten, nun werden sie immer salonfähiger: dunkle UI Themes. Viele empfinden sie als augenfreundlicher. Ob das wirklich stimmt, kann ich nicht beurteilen. Zu mindest kann dunkles UI-Design aber zu einer besseren Energieeffizienz bei Geräten mit OLED-Displays beitragen, da hierfür schwarze Pixel nicht mit Strom versorgt werden müssen.
Abgesehen davon kann dunkles Design auch einfach ästhetisch besser aussehen.

„UI Design – Die Herausforderung eines Dark Themes“ weiterlesen

Code snippet: The easiest way for a parallax background with CSS and JavaScript

Here is the JavaScript part:

window.addEventListener("scroll", event => {
    document.body.style.backgroundPosition = "0px -" + (window.pageYOffset / 2) + "px";
});

Here is how the CSS part may look like:

body {
    background-image: url(./images/bg1.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed; // this is important
}

 

Here is an example of the result: