CSS – Beispiele

Lesedauer: < 1 Minute

Schatten für Punkte, Linien oder Elemente

Erstelle eine Klasse ‚dot_outline‘ unterhalb der ‚Stile‘ und füge dies zum Element hinzu.

.dot_outline {
    /* Filter with the blue shadow */
    filter: drop-shadow(0px 0px 4px blue);
}

Blinkendes Icon/Text

Erstelle eine Klasse ‚blink_icon‘ und eine Animations-Klasse ‚pulse-ani-blink‘ unterhalb der ‚Stile‘ und füge diese zum Element hinzu.

.blink_icon {
    /* Color of the Icon - use stroke, if you want to change the color of text */
    color: rgb(161,211,67)!important;

    /* Name of the animation for the filter/shadow */
    animation: pulse-ani-blink 3s linear infinite;
}

/* Animation timing for the shadow of the Icon/Text */
@keyframes pulse-ani-blink {
  50% {
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, .175)) drop-shadow(0px 0px 4px rgba(0, 0, 0, .175)) drop-shadow(0px 0px 4px rgba(0, 0, 0, .175));
  }

  0%,
  100% {
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, .175));
  }
}