💾 Archived View for gem.arisamiga.rocks › post › christmas.gmi captured on 2023-07-22 at 16:34:05. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

Merry Christmas Everyone!

2022-12-25

Merry Christmas Everyone! ❄️

It has started snowing at

arisamiga.rocks

aswell as

blog.arisamiga.rocks

Snowing [IMG]

The snow is made possible by utilizing the `@keyframes` and `@-webkit-keyframes` CSS properties as well as `animation` which can be found here

https://www.w3schools.com/css/css3_animations.asp

Example: This makes the snowflakes move from the top of the screen to the bottom.

@keyframes snowflakes-fall {
  0% {
      top: -10%
  }
  100% {
      top: 100%
  }
}

And then you can call that animation in the snowflake divs by using the `animation` property.

    .snowflake {
        -webkit-animation-name: snowflakes-fall;
        -webkit-animation-duration: 10s, 3s;
        -webkit-animation-timing-function: linear, ease-in-out;
        -webkit-animation-iteration-count: infinite, infinite;
        -webkit-animation-play-state: running, running;
        animation-name: snowflakes-fall;
        animation-duration: 10s, 3s;
        animation-timing-function: linear, ease-in-out;
        animation-iteration-count: infinite, infinite;
        animation-play-state: running, running
    }

Then it takes each snowflake's div and makes it move accordingly by the keyframes. So you don't even need any Javascript to make it snow!

<div class="snowflakes" aria-hidden="true">
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
  ❅
  </div>
  <div class="snowflake">
  ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
  <div class="snowflake">
    ❅
  </div>
  <div class="snowflake">
    ❆
  </div>
</div>

If you want to use it for yourself an example is made by

pajasevi

https://pajasevi.github.io/CSSnowflakes/

Also With Christmas, it's the end of

Advent of Code 2022

Unfortunately, I only managed to get up to Day **15** but I still had a lot of fun doing it! I learned a lot of new things about how I can use Python to solve problems and I can't wait for next year to do it again!

Hope you all have a great Christmas and a Happy New Year! ☃️ 🎄✨