<div id="container">
<div class="block">
<div class="snow"></div>
<div class="snow-person">
<div class="eyes">
</div>
<div class="carrot">
</div>
<div class="arm-right">
</div>
<div class="arm-left">
</div>
<div class="buttons">
</div>
</div>
<h2>seasons greetings</h2>
<h3 class="sig">from Chuky<h3/>
<span><span/>
</block>
</div>
@import url('https://fonts.googleapis.com/css2?family=Agu+Display&family=Oxanium:wght@200..800&family=Rubik+Mono+One&display=swap');
@property --start-col-1 {
syntax:'<color>';
initial-value: #9198e5;
inherits: false;
}
@property --start-col-2 {
syntax:'<color>';
initial-value: #e66465;
inherits: false;
}
@property --end-col-1 {
syntax:'<color>';
initial-value: #304529;
inherits: false;
}
@property --end-col-2 {
syntax:'<color>';
initial-value: #4a6741;
inherits: false;
}
$font: "Agu Display", serif;
$primary:#FF0072;
$blue: radial-gradient(var(--start-col-1), var(--start-col-2));
$blue-two: radial-gradient(#9198e5, #000);
$yellow: linear-gradient(var(--end-col-1), var(--end-col-2));
$red:#ff3628;
$star: radial-gradient(rgb(208,154,0) 35%, rgb(243,255,0) 100%);
$d: 70; // density
$w: 600; // grid size
$s: 3s; // speed
$bs: 8px;
// Generate the snow image using radial gradients
$grad: ();
@for $i from 0 to $d {
$v: random(4) + 2;
$a: random(5) * .1 + .5;
$grad: $grad, radial-gradient(
$v+px $v+px at
(random($w - $v * 2) + $v)+px
(random($w - $v * 2) + $v)+px,
rgba(255,255,255,$a) 50%,
rgba(0,0,0,0)
) !global;
}
.snow, .snow:before, .snow:after {
position: absolute;
top: -$w + px;
left: 0;
bottom: 0;
right: 0;
background-image: $grad;
background-size: $w + px $w + px;
animation: snow $s linear infinite;
content: "";
}
.snow:after {
margin-left: -$w/3 + px;
opacity: .4;
animation-duration: $s*2;
animation-direction: reverse;
filter: blur(3px);
}
.snow:before {
animation-duration: $s*3;
animation-direction: reverse;
margin-left: -$w/2 + px;
opacity: .65;
filter: blur(1.5px);
}
@keyframes snow {
to {
transform: translateY($w + px);
}
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body{
height:100%;
width: 100%;
}
body {
padding:0px;
margin:0;
font-family:$font;
background: #24252A;
-webkit-font-smoothing: antialiased;
}
#container{
display:flex;
min-height:100vh;
align-items:center;
justify-content:center;
}
.block{
width:400px;
height:230px;
overflow:hidden;
position:relative;
cursor:cell;
border: 0.5px dashed white;
&:after{
transition: 250ms all ease-in-out;
width: 250px;
height: 250px;
position: absolute;
right: -100px;
bottom: -100px;
content:'';
display:inline-block;
background:$yellow;
-webkit-clip-path:
xpolygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
&:before {
transition:250ms all ease;
background:$blue;
content:'';
width:100%;
height:100%;
position:absolute;
}
.snow-person{
position:absolute;
bottom:-10px;
left:25px;
width:60px;
height:60px;
background-color: #bbb;
border-radius: 50%;
display: flex;
z-index:99999;
&:before {
content:'';
position:absolute;
bottom:40px;
left:10px;
border-radius:50%;
width:40px;
height:40px;
background-color: #bbb;
display:inline-block;
border-radius: 50%;
z-index:99999;
}
&:after {
content:''; //integral in allowing appearance before and after
position:absolute;
bottom:70px;
left:15px;
border-radius:50%;
width:30px;
height:30px;
background-color: #bbb;
display:inline-block;
border-radius: 50%;
z-index:99999;
}
.buttons{
position:absolute;
color:black;
background-color: black;
z-index:999999;
top: -10px;
left: 30px;
height:$bs;
width:$bs;
border-radius:50%;
&:before {
content:"";
position:absolute;
color:black;
background-color: black;
z-index:999999;
top:12px;
left:0px;
height:$bs;
width:$bs;
border-radius:50%;
}
&:after{
content:"";
position:absolute;
color:black;
background-color: black;
z-index:999999;
top:24px;
left:0px;
height:$bs;
width:$bs;
border-radius:50%;
}
}
.carrot{
position:absolute;
z-index: 999999;
top: -30px;
left: 37px;
width: 0;
height: 0;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left:20px solid orange;
}
.eyes{
position:absolute;
z-index:999999;
top: -37px;
left: 23px;
width:10px;
height:10px;
border-radius: 50%;
background-color:blue;
&:before{
content:"";
z-index:-999;
position:absolute;
top: 0;
left: 16px;
width: 6px;
height: 10px;
border-radius: 50%;
background-color:blue;
}
}
.arm-right{
position:absolute;
left: 43px;
top: -15px;
z-index:999999;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 40px solid brown;
transform: rotate(-10deg);
}
.arm-left {
position:absolute;
left: -10px;
top: -15px;
z-index:999999;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-right: 30px solid brown;
transform: rotate(10deg);
}
}
.sig{
display:block;
transition: 2s ease-in-out;
position: absolute;
content:attr(data-text);
// justify-content:right;
// align-items:bottom;
height:100%;
width:100%;
bottom:-220px;
right:-350px;
z-index: 99999;
color: white;
font-size:8px;
opacity:0;
p{
font-size:8px;
}
}
span{
display:flex;
position: absolute;
width: 44px;
height: 44px;
top:-300px;
right:-100px;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
background: $star;
}
h2 {
display:flex;
align-items:center;
font-size:25px;
justify-content:center;
content:attr(data-text);
color:#FFF;
position:absolute;
left:0;
right:0;
height:100%;
width:100%;
top:0;
bottom:0;
font-family:$font;
font-weight:500;
margin:0;
z-index:99;
opacity: none;
&:hover{
transition: 1s color ease-in-out;
color: yellow;
opacity: 1;
}
}
&:hover {
&:before {
transition: all 1s ease-in-out; transform:scale(0.8);
background: $blue-two;
}
&:after {
right:-40px;
bottom:-70px;
}
span{
transition: 500ms all ease;
top:30px;
right: 63px;
z-index:9999;
}
body{
background: #fff;
}
.sig{
opacity:1;
}
}
}
View Compiled
//inspired by kitsune
//https://codepen.io/kitsune/pen/ZKjQOm
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.