CSS steht für Cascading Style Sheets und bezeichnet die Technologie, mit der Webanwendungen gestyled werden.

Manchmal gibt es ganz besondere Hacks, wie folgenden animierten Glow-Effekt:

Hier der Hack, falls es jemand nachbauen möchte 🙂

.text-effect-wrapper,
.text {
  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
}

.text-effect-wrapper {
  --spotlight-color: white;

  overflow: hidden;
  position: relative;

  &::before {
    animation: shining 5s infinite linear;
    background: 
      radial-gradient(circle, var(--spotlight-color), transparent 25%) 0 0 / 25% 25%,
      radial-gradient(circle, var(--spotlight-color), black 25%) 50% 50% / 12.5% 12.5%;
    inset-block-start: -100%;
    inset-inline-start: -100%;
    mix-blend-mode: color-dodge;
    z-index: 3;
  }

  &::after {
    backdrop-filter: blur(1px) brightness(90%) contrast(150%);
    z-index: 4;
  }
}

@keyframes shining {
  100% {
    transform: translate3d(50%, 50%, 0);
  }
}

.text {
  --background-color: black;
  --text-color: white;

  --color-1: goldenrod;
  --color-2: gold;

  color: transparent;
  text-shadow: 
    0 0 0.02em var(--background-color), 
    0 0 0.02em var(--text-color),
    0 0 0.02em var(--text-color), 
    0 0 0.02em var(--text-color);

  &::before {
    backdrop-filter: blur(0.013em) brightness(400%);
    z-index: 1;
  }

  &::after {
    background: linear-gradient(45deg, var(--color-1), var(--color-2));
    mix-blend-mode: multiply;
    z-index: 2;
  }
}

h1#solapp {
  --font-size: clamp(6.25rem, 3.25rem + 15vw, 13.75rem);

  font: 700 var(--font-size)/1 "Lato", sans-serif;
  text-transform: uppercase;
  text-align: center;
  margin: 0;

  &:empty,
  &:focus {
    border: 2px dotted white;
    min-width: 1ch;
    outline-offset: 5px;
  }
}

Lust auf eine Racecar-Challenge? Kein Problem: Die Schüler*innen der 5.Klassen programmierten in Informatik Racecar-Games und sie sind großteils wirklich super geworden! Die Programme wurden in Scratch erstellt, einer Freeware-Entwicklungsumgebung, das mit einer visuellen, schnell und einfach zu erlernenden Programmiersprache arbeitet. Programmierkonzepte wie Schleifen, Kontrollstrukturen, Arbeiten mit Variablen und das logische Denken für den Programmierablauf standen dabei im Vordergrund. Manche der Spiele sind außerordentlich toll geworden, mit eigener Programmlogik und Gimmicks versehen.

Und hier sind sie … die Spiele der Schüler*innen … viel Spaß!

… 5ABCr

… 5ABg

… 5ABr (Gruppe1)

… 5ABr (Gruppe2)

Nicht schrecken beim Eintreten in den EDV-Saal2. Seit dieser Woche baumeln das Innen- und Außenleben eines Computers von der Decke. Die Schülerinnen und Schüler der beiden 5.Klassen haben im Zuge des Informatikunterrichts das Thema “Hardware” einmal anders kennen gelernt und Prozessor, Netzteil, Graphikkarte, Festplatte, Arbeitsspeicher, Mainboard, Eingabegeräten wie einer Maus und Speichermedien wie einer CD, einem USB-Stick und der lieben alten Diskette ein neues Zuhause gegeben.

Diskette? Was ist denn das 😉 Kein Wunder dass sie die Jugend von heute nicht mehr kennt, findet auf den 1,44MB nicht einmal ein MP3-File Platz.

Hat viel Spaß gemacht und das Ergebnis sieht super aus!

Hier gehts weiter zu den Fotos. “Flying Hardware” weiterlesen →