Nützliche Code Snippets für CSS

Links mit Farbverlauf/Gradient versehen

Hier kommt der Code um alle Links auf der Webseite mit einem Gradient zu versehen. Die Farben bei # am besten noch anpassen.

a {
 background: linear-gradient(45deg, #007AAD, #038F78);
 -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-fill-color: transparent;
        }

CSS nur für Touch oder NICHT Touch Devices anwenden

Für NICHT Touch Devices

/* Apply hover styles only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
    .tipp-container:hover {
        z-index: 1; /* example CSS to be applied */
    }
}

Für Touch Devices

/* Apply styles only on touch devices */
@media (hover: none) and (pointer: coarse) {
    .tipp-container {
   z-index: 1; /* example CSS to be applied */
    }
}

Das wird noch laufend erweitert. Wieder rein schauen lohnt sich 🙂

Melde dich für unseren WordPress-Newsletter an

um aktuelle Webdesign-Trends, Erfolgsstrategien und inspirierende Fallstudien zu erhalten. Bleibe am Puls der Zeit mit WordPress.

Schritt für Schritt zur digitalen Barrierefreiheit