CSS Tricks

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

ggLottery läuft!

Den ganzen Februar spielen wir am BG BRG Gmunden – als Aspekt unseres heurigen Safer Internet Months zum Thema Online-Suche – Lotterie!

Programmiert mit ReactJS, JSX, HTML, CSS und PHP von den Schülern des WPG Inf 6 läuft unsere Lotterie!

Modernste Frontend-Entwicklung mit react.js

Im WPG Informatik der 6. Klassen starten die Vorbereitungen zum diesjährigen Safer Internet Month 2019: Noch können wir nicht sehr viel verraten, aber wir beschäftigen uns mit der zur Zeit modernsten Library der Frontend-Entwicklung: react.js.

Mit derselben Bibliothek werden Webseiten wie die von Airbnb, Cloudflare, Dropbox, Facebook, Netflix, Tesla, WhatsApp und Instragram programmiert.

Hier ein paar Code-Impressions nach wenigen Übungsstunden:

Stadtmeisterschaft im Turnen & Informatik

Was haben die 2. Gmundner Stadtmeisterschaften im Geräteturnen mit unserer Infromatik am BG BRG Gmunden zu tun? Ganz einfach: Im vergangenen Schuljahr haben die Schüler des WPG 8. Klasse eine App zur zentralen Erfassung der Punkte, die die KampfrichterInnen vergeben, programmiert.

Heuer, bei der 2. Stadtmeisterschaft, ging quasi Version 2.0 der App für die Informatik an den Start – und das mit riesen Erfolg! Kaum Schwierigkeiten, nur ein paar falsch eingetippte Punkte, die rasch korrigiert waren, sammelten wir innerhalb weniger Stunden fast 500 Punktewertungen in unserer zentralen Datenbank. Und wozu? Damit konnten die knapp 100 Urkunden nur wenige Minuten nach der letzten Wertung ausgedruckt werden und die Siegerehrung konnte zeitnah erfolgen!

Heuer nutzten Prof. Krejci und Felix Kainz, 7cr, die Zeit währenddessen, um über Felix’ VWA sehr (!) ausführlich zu besprechen. Felix wird mittels modernster FrontEnd Technolgien – ReactJS und Redux – eine App für die ARGE Bewegung und Sport des BG BRG Gmunden programmieren. Diese soll zur Erfassung sportlicher Leistungen und wenn gewünscht auch zur Analyse dienen. Alles Gute dafür!

Headstart @ Informatics

Zum ersten Mal bewirbt sich ein Schüler aus dem BG BRG Gmunden für das Headstart@Informatics Programm an der Johannes Kepler Universität!

Felix Kainz aus der 6cr wagt schon jetzt den Schritt an die Universität, und möchte ab dem nächsten Jahr Informatik-Vorlesungen an der JKU besuchen. Auf dem Programm stehen die Lehrveranstaltungen “Digitale Schaltungen” im Wintersemester und “Softwareentwicklung 1” im Sommersemester.

Felix hat seine Bewerbung mit Motivationsschreiben bereits eingereicht – wir sind sehr (!) gespannt, wie es weitergeht und halten euch auf dem laufenden!

Safer Internet Aktion 2018 der 5. Klassen

Für die diesjährige Safer Internet Aktion 2018 haben die Schüler/innen der 5. Klassen Audioclips zu verschiedenen Aspekten rund um das Thema Sicherheit, Gefahren und Potenzial im Internet erstellt. Täglich stellten wir einen neuen Clip online – insgesamt wurden die Clips über 500 Mal angeklickt!

Hier gibt’s nochmals alle Clips im Überblick:

Solarcar 2.0

Es ist wieder so weit – vor zwei Wochen startete das Team 2017 in die Solarcar-Saison! Hier die Bildergeschichte :-)…

EDV-Saal 3 bekommt neuen Anstrich!

Und hier noch weitere Pics von unserer Starfotographin Kathi!