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 →

So, wie das alte geendet, beginnt das neue Kalenderjahr mit Fr. Prof. Mayer aus Vöcklabruck. Sie hält einige Stunden im WPG Inf8, zuerst über Sortieralgorithmen und im Speziellen über den max-heap-sort, sowie über das Thema Huffmancodierung – und beendet die Einheit mit einer kleinen schülerinternen Challenge:

Nach der Erstellung eines tenären Huffmanbaums für das ganze Alphabet inklusive Umlauten und Leerzeichen (Beamerbild) haben die Schüler 12 min Zeit, vorgegebene Botschaften zu verschlüsseln. Alle schaffen genau vier Codierungen. Beim Entschlüsseln dann die Überraschungen 🙂 Wer hat fehlerfrei kodiert?

Hier sind die ersten Action Videos von unserem selbst programmierten Racecar-Game aus Informatik!

Diese Woche im WPG Inf 7:

Heute beschäftigten wir uns mit der Verschlüsselung. Wir klären die Begriffe Kryptologie, Kryptographie und Kryptoanalyse. Danach gabs einen historischen Überblick ausgehend von der Skytale von Sparta über den Cäsar-Code, das Vigenère-Quadrat und der Enigma (zweiter Weltkrieg) bis hin zum aktuellen RSA-Verfahren, dass auf jeder SIM-Karte, bei jedem Bankomaten etc. im Einsatz ist.

Detailliert beschäftigten wir uns an diesem Nachmittag mit dem Cäsar-Code sowie dessen Weiterentwicklung, dem Vigenère-Quadrat. Beide programmierten wir mit Excel nach. Nächste Woche geht’s dann dem RSA-Algorithmus auf die Spur!