code things


SPIN

@keyframes rotate{
0%{transform: rotate(0deg);} /* crying and torment*/
5%{transform: rotate(18deg);}
10%{transform: rotate(36deg);}
15%{transform: rotate(54deg);}
20%{transform: rotate(72deg);}
25%{transform: rotate(90deg);}
30%{transform: rotate(108deg);}
35%{transform: rotate(126deg);}
40%{transform: rotate(144deg);}
45%{transform: rotate(162deg);}
50%{transform: rotate(180deg);}
55%{transform: rotate(198deg);}
60%{transform: rotate(216deg);}
65%{transform: rotate(234deg);}
70%{transform: rotate(252deg);}
75%{transform: rotate(270deg);}
80%{transform: rotate(288deg);}
85%{transform: rotate(306deg);}
90%{transform: rotate(324deg);}
95%{transform: rotate(342deg);}
100%{transform: rotate(360deg);}
}

.rotate{
transform: rotate(0deg);
animation-duration: 2s;
animation-name: rotate;
animation-iteration-count: infinite;
}

NOTES: make sure to put display: inline-block; if you are making a SPAN tag spin!
the crying and torment comment is optional, but recommended.


🎈 🎈 🎈 🎈


PIXELLY

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0.1) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

NOTES: edited from this spacehey layout to improve visibility and remove flashing



BASIC BLOCK CHUNKS

THE HTML PART:
<div class="box"> P TAGS, IMAGES, WHATEVER GOES HERE </div>

THE CSS PART:
.box {
border: 5px solid purple;
background-color: pink;
width: 33%;
margin: auto;
}

the stuff in the class= quotes has to match the bit behind the dot ("box" and .box for example)
you can use anu colours, and various types of border -solid, dashed, dotted, groove.
this is just a BASIC box model. it is in no way the end-all be-all of boxes and shit.



SNOWFLAKES (sides)

THE HTML PART (can go anywhere):
<div class="snowflakes">
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
<div class="snowflake"> <img src="" height="48px"/> </div>
</div>


THE CSS PART:
@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}
@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}
@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}
@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}
.snowflake{position:fixed; top:-10%;z-index:9999; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;user-select:none; cursor:default; -webkit-animation-name:snowflakes-fall,snowflakes-shake; -webkit-animation-duration:12s,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,snowflakes-shake; animation-duration:12s,3s; animation-timing-function:linear,ease-in-out; animation-iteration-count:infinite,infinite; animation-play-state:running,running}
.snowflake:nth-of-type(1) {left:10%; -webkit-animation-delay:0s,0s; animation-delay:0s,0s}
.snowflake:nth-of-type(2) {left:10%; -webkit-animation-delay:1s,.5s; animation-delay1s,.5s}
.snowflake:nth-of-type(3) {left:10%; -webkit-animation-delay:2s,2s; animation-delay:2s,2s}
.snowflake:nth-of-type(4) {left:10%; -webkit-animation-delay:3s,2.5s; animation-delay:3s,2.5s}
.snowflake:nth-of-type(5) {left:10%; -webkit-animation-delay:4s,2s; animation-delay:4s,2s}
.snowflake:nth-of-type(6) {left:10%; -webkit-animation-delay:5s,3s; animation-delay:5s,3s}
.snowflake:nth-of-type(7) {left:10%; -webkit-animation-delay:6s,3.5s; animation-delay:6s,3.5s}
.snowflake:nth-of-type(8) {left:10%; -webkit-animation-delay:7s,3s; animation-delay:7s,3s}
.snowflake:nth-of-type(9) {left:10%; -webkit-animation-delay:8s,4s; animation-delay:8s,4s}
.snowflake:nth-of-type(10){left:10%; -webkit-animation-delay:9s,4.5s; animation-delay:9s,4.5s}
.snowflake:nth-of-type(11){left:10%; -webkit-animation-delay:10s,5s; animation-delay:10s,5s}
.snowflake:nth-of-type(12){left:10%; -webkit-animation-delay:11s,6.35s; animation-delay:11s,6.35s}

.snowflake:nth-of-type(13){left:90%; -webkit-animation-delay:0s,0s; animation-delay:0s,0s}
.snowflake:nth-of-type(14){left:90%; -webkit-animation-delay:1s,.5s; animation-delay1s,.5s}
.snowflake:nth-of-type(15){left:90%; -webkit-animation-delay:2s,2s; animation-delay:2s,2s}
.snowflake:nth-of-type(16){left:90%; -webkit-animation-delay:3s,2.5s; animation-delay:3s,2.5s}
.snowflake:nth-of-type(17){left:90%; -webkit-animation-delay:4s,3s; animation-delay:4s,3s}
.snowflake:nth-of-type(18){left:90%; -webkit-animation-delay:5s,3.5s; animation-delay:5s,3.5s}
.snowflake:nth-of-type(19){left:90%; -webkit-animation-delay:6s,3s; animation-delay:6s,3s}
.snowflake:nth-of-type(20){left:90%; -webkit-animation-delay:7s,4s; animation-delay:7s,4s}
.snowflake:nth-of-type(21){left:90%; -webkit-animation-delay:8s,4.5s; animation-delay:8s,4.5s}
.snowflake:nth-of-type(22){left:90%; -webkit-animation-delay:9s,4s; animation-delay:9s,4s}
.snowflake:nth-of-type(23){left:90%; -webkit-animation-delay:10s,5s; animation-delay:10s,5s}
.snowflake:nth-of-type(24){left:90%; -webkit-animation-delay:11s,6.35s; animation-delay:11s, 6.35s}

NOTES: edited from code given to me by lem to fix bugs and adjust position
You can adjust the left:XX% to be whatever you want! if you make it randomish they'll fall, well, somewhat randomly, though it does repeat.
You can also adjust the (-webkit-)animation-delay and (-webkit-)animation-duration to make them faster or slower. to add more you'll need to sorta... tile the nth of type stuff. add more numbers. all that jazz.


Youtube autoplay

<iframe width="0" height="0" src="https://www.youtube.com/embed/video id?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

NOTES: Edited from this spacehey blog post.
May be blocked by anti-autoplay on some browsers, including Firefox.
THIS embed has the size set to fit the <div> so you can pause it :)
TO GET THE VIDEO ID go to the youtube video, share embed, copy the code after the https://www.youtube.com/embed/ it may want to copy the entire thing, but you can just change the parts that don't match up to the base above :)
will not loop, i do not know how to make it loop :(

Home