CSS – Beispiele

Lesedauer: 2 Minuten

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));
  }
}

Farbe des Textes

Obwohl es sich hier um CSS handelt und standardmäßig color zur Farbangabe verwendet wird, gibt es bei SVG (Scalable Vector Graphics) eine Besonderheit: Dort wird das Attribut stroke (engl. „Strich“) zur Definition der Farbe von Linien verwendet. Dieses Attribut steuert allerdings nur die „Umrissfarbe“. Besser, man verwendet fill, wie im nächsten Absatz.

.text_rot {
     stroke: red;
}

Farbe der Füllung eines Rechtecks, Kreises oder Textes

Auch hier greift das normale Attribut background-color nicht, da sich dieser auch auf HTML Elemente bezieht. Stattdessen verwenden wir fill.

.fuellung_rot {
    fill: red;
}

Elemente ausblenden

Um ein Element auszublenden, kann man mehrere Methoden in CSS verwenden.

Opacity (Deckkraft) kann verwendet werden, um das Element „durchsichtig“ zu machen. Die Abstufung ist 0 (keine Deckkraft – durchsichtig) – 1 (volle Deckkraft) ; Schritte: 0.1 – 0.9(1). Allerdings ist das Element so immer noch vorhanden und reagiert auf Änderungen.

.elm_sichtbar {
    // Element voll sichtbar
    opacity: 1;
}

.elm_unsichtbar {
    // Element nicht sichtbar
    opacity: 0;
}

.elm_halb {
    // Element halb durchsichtig
    opacity: .5; /* Führende 0 kann weggelassen werden */
}

Besser ist es, das Attribut display zu nutzen, welches das Element vollständig ausblendet und es somit auch keine Aktionen mehr im Browser nutzt.

.elm_hide {
    // Element nicht mehr sichtbar
    display:none;
}

.elm_show {
    // Element sichtbar
    display:inline-block; /* inline-block sorgt für den ursprünglichen Textfluss bei mehrzeiligen Elementen */
}