- for (i = 0; i < 50; i++) div(class="snowflake") See how this drawing was made html, body { padding: 0; margin: 0; width: 100vw; height: 100vh; position: relative; overflow: hidden; background: linear-gradient(#123, #111); } .snowflake { --size: 1vw; width: var(--size); height: var(--size); background: white; border-radius: 50%; position: absolute; top: -5vh; } @keyframes snowfall { 0% { transform: translate3d(var(--left-ini), 0, 0); } 100% { transform: translate3d(var(--left-end), 110vh, 0); } } @for $i from 1 through 50 { .snowflake:nth-child(#{$i}) { --size: #{random(5) * 0.2}vw; --left-ini: #{random(20) - 10}vw; --left-end: #{random(20) - 10}vw; left: #{random(100)}vw; animation: snowfall #{5 + random(10)}s linear infinite; animation-delay: -#{random(10)}s; } } /* added small blur every 6 snowflakes*/ .snowflake:nth-child(6n) { filter: blur(1px); } /***/ #youtube { z-index: 2; display: block; width: 100px; height: 70px; position: absolute; bottom: 20px; right: 20px; background: red; border-radius: 50% / 11%; transition: transform 0.5s; } #youtube:hover, #youtube:focus { transform: scale(1.1); } #youtube::before { content: ""; display: block; position: absolute; top: 7.5%; left: -6%; width: 112%; height: 85%; background: red; border-radius: 9% / 50%; } #youtube::after { content: ""; display: block; position: absolute; top: 20px; left: 40px; width: 45px; height: 30px; border: 15px solid transparent; box-sizing: border-box; border-left: 30px solid white; } #youtube span { font-size: 0; position: absolute; width: 0; height: 0; overflow: hidden; }
top of page

STUDIO MEMORIES

We’ve always got new projects and workshops cooking that we love to share with you all about it! Read up on latest news, updates, projects and happenings going on in our ComXnaut community here now.

 

We’d love for you to get involved!

Contact us if you have any inquiries on anything you find here.

Check out what's buzzing now!

bottom of page