cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              section#holiday
  // h1.greeting Happy Holidays!
  canvas#snow
  // div.ground
  div.platform
    div.snowman
      div.bulb
      div.hat
      div.face
        div.eyes
          span
          span
        div.nose
      div.scarf
      div.buttons
        span
        span
        span
    div.tree
      div.star
        div.halo
      div.triangles
        span
        span
        span
      div.bark
      div.gifts
        span
        span
        span
        span
        span
    div.snowman.santa
      div.bulb
      div.hat
      div.coat
        div.buttons
          span
          span
          span
        div.belt
      div.face
        div.eyes
          span
          span
        div.beard
          span
          span
          span
          span
          span
          span
          span
          span
          span
          div.cherry

            
          
!
            
              @import "lesshat";

@lightgray:		rgb(240,240,240);
@gray:			#DDDDDD;
@brown:			#9E6F51;

@sky:			#012935;
@land:			#0D544C;
@evergreen:		#28AE4B; // #88C254;
@glow:			yellow;

@accent:		#8F4293; //#28AE4B;
@santa:			#EE3837;

@bounce:		cubic-bezier(0.68, -0.55, 0.265, 1.55);

#holiday {
	background: @sky;
	color: white;
	text-align: center;
	padding-top: 100px;
	min-height: 100vh;
	overflow: hidden;
	#snow {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		height: 100% !important;
		width: 100%;
		z-index: 0;
	}
	.metropolis {
		position: absolute;
		// bottom: 0;
		margin-top: 385px;
		left: 0;
		min-height: 100px;
		height: 300px;
		width: 100%;
		background: @land;
	}
	.platform {
		background: lighten(@land, 5%);
		position: relative;
		margin: auto;
		max-width: 800px;
		border-radius: 50%;
		height: 90px;
		display: block;
		margin-top: 240px;
		animation: bounce-platform 3s @bounce;
	}
	.tree {
		position: absolute;
		// bottom: 45px;
		bottom: 90px;
		left: 50%;
		width: 120px;
		margin-left: -60px;
		height: 192px;
		transform: scale(1.5);
		animation: bounce-tree 3s @bounce;
		.star {
			position: absolute;
			top: -30px;
			left: 50%;
			width: 50px;
			height: 50px;
			margin-left: -25px;
			border-radius: 50%;
			color: @glow;
			vertical-align: middle;
			line-height: 24px;
			font-size: 48px;
			text-align: center;
			&:before {
				content: "\2605";
			}
			.halo {
				position: absolute;
				left: 0;	
				top: -12px;
				width: 48px;
				height: 48px;
				border-radius: 50%;
				background: @glow;
				opacity: 0.15;
				transform: scale(1.25);
				animation: star-halo 5s linear infinite;
			}
		}
		.bark {
			position: absolute;
			bottom: 0;
			left: 50%;
			margin-left: -10px;
			background: @brown;
			width: 20px;
			height: 54px;
		}
		.triangles {
			span {
				position: absolute;
				width: 0;
				height: 0;
				border-style: solid;
				&:first-of-type {
					bottom: 54px;
					left: 50%;
					margin-left: -60px;
					border-width: 0 60px 70px 60px;
					border-color: transparent transparent @evergreen transparent;
				}
				&:nth-child(2) {
					bottom: 92px;
					left: 50%;
					margin-left: -50px;
					border-width: 0 50px 70px 50px;
					border-color: transparent transparent @evergreen transparent;
				}
				&:last-of-type {
					bottom: 130px;
					left: 50%;
					margin-left: -40px;
					border-width: 0 40px 70px 40px;
					border-color: transparent transparent @evergreen transparent;
				}
			}
		}
		.gifts {
			animation: fade-gifts 3s ease;
			span:first-of-type {
				position: absolute;
				bottom: 0;
				left: -15px;
				width: 36px;
				height: 20px;
				background: #00BCD4;
			}
			span:nth-child(2) {
				position: absolute;
				bottom: 20px;
				left: -10px;
				width: 20px;
				height: 20px;
				background: #E91E63;
			}
			span:nth-child(3) {
				position: absolute;
				bottom: 5px;
				right: 75px;
				width: 18px;
				height: 40px;
				background: #FFC107;
			}
			span:nth-child(4) {
				position: absolute;
				bottom: 5px;
				right: -15px;
				width: 24px;
				height: 45px;
				background: #FF5722;
			}
			span:last-of-type {
				position: absolute;
				bottom: -4px;
				left: 75px;
				width: 32px;
				height: 32px;
				background: #9C27B0;
			}
		}
	}
	.snowman {
		position: absolute;
		// left: 50%;
		// margin-left: -45px;
		left: 120px;
		bottom: 45px;
		background: white;
		width: 90px;
		height: 200px;
		border-bottom-left-radius: 40px 30px;
		border-bottom-right-radius: 40px 30px;
		animation: bounce-snowman 3s @bounce;
		/* .body {
			span:first-child {
				width: 60px;
				height: 60px;
			}
			span:last-child {
				width: 90px;
				height: 90px;
			}
		} */
		.hat {
			position: absolute;
			top: -50px;
			left: 0;
			width: 100%;
			height: 60px;
			background: @accent;
			border-top-left-radius: 40px;
			border-top-right-radius: 40px;
			&:before {
				content: ' ';
				position: absolute;
				top: -15px;
				left: 50%;
				margin-left: -15px;
				width: 30px;
				height: 30px;
				background: @accent;
				border-radius: 50%;
				box-shadow: 0 0 2px rgba(0,0,0,0.5);
			}
			/* &:before {
				content: ' ';
				position: absolute;
				bottom: -10px;
				left: 0;
				height: 15px;
				background: @lightgray;
				width: 100%;
				border-radius: 50%;
			} */
			&:after {
				content: ' ';
				position: absolute;
				bottom: -10px;
				left: 0;
				height: 15px;
				background: white;
				width: 100%;
				border-radius: 50%;
				border-top: 5px solid @lightgray;
			}
		}
		.eyes {
			position: absolute;
			bottom: 170px;
			left: 50%;
			width: 40px;
			height: 6px;
			margin-left: -20px;
			span {
				height: 6px;
				width: 6px;
				background: black;
				border-radius: 6px;
			}
			span:first-child {
				float: left;
			}
			span:last-child {
				float: right;
			}
		}
		.nose {
			position: absolute;
			bottom: 140px;
			left: 50%;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10px 0 10px 30px;
			border-color: transparent transparent transparent #ff8c00;
		}
		.scarf {
			position: absolute;
			left: -15%;
			width: 130%;
			height: 25px;
			border-radius: 12px;
			background: @accent;
			bottom: 100px;
			box-shadow: 0 0 2px rgba(0,0,0,0.5);
			&:after {
				content: ' ';
				position: absolute;
				right: 0px;
				top: 12px;
				width: 25px;
				height: 40px;
				border-radius: 12px;
				background: @accent;
				transform: rotate(-20deg);
				box-shadow: 0 0 2px rgba(0,0,0,0.5);
			}
		}
		.buttons {
			position: absolute;
			bottom: 14px;
			left: 50%;
			margin-left: -7px;
			span {
				width: 14px;
				height: 14px;
				margin-bottom: 8px;
				background: black;
				border-radius: 50%;
				display: block;
			}
		}
	}
	.snowman.santa {
		// left: 50%;
		// margin-left: -45px;
		left: auto!important;
		right: 120px;
		animation: bounce-santa 3s @bounce;
		.hat {
			background: @santa;
			&:before {
				background: white;
			}
		}
		.beard {
			span {
				background: @gray;
				width: 20px;
				height: 20px;
				display: block;
				position: absolute;
				border-radius: 50%;
				&:first-of-type {
					left: -10px;
					top: 40px;
				}
				&:nth-child(2) {
					right: -10px;
					top: 40px;
				}
				&:nth-child(3) {
					width: 40px;
					height: 40px;
					left: 0px;
					top: 40px;
				}
				&:nth-child(4) {
					width: 40px;
					height: 40px;
					right: 0px;
					top: 40px;
				}
				&:nth-child(5) {
					left: -5px;
					top: 50px;
				}
				&:nth-child(6) {
					right: -5px;
					top: 50px;
				}
				&:nth-child(7) {
					left: 25px;
					top: 55px;
				}
				&:nth-child(8) {
					right: 25px;
					top: 55px;
				}
				&:last-of-type {
					left: 50%;
					width: 60px;
					height: 40px;
					margin-left: -30px;
					top: 30px;
				}
			}
			.cherry {
				position: absolute;
				top: 45px;
				left: 50%;
				width: 10px;
				height: 10px;
				margin-left: -5px;
				background: red;
				border-radius: 50%;
			}
		}
		.coat {
			position: absolute;
			bottom: 30px;
			left: 0;
			width: 100%;
			height: 120px;
			background: @santa;
			.buttons {
				span {
					background: white;
				}
			}
			.belt {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 10px;
				background: rgb(40,40,40);
			}
		}
	}
}
@keyframes star-halo {
  0%  {opacity: 0.18; transform: scale(1.25);}
  25% {opacity: 0.1; transform: scale(1.20);}
  50% {opacity: 0.15; transform: scale(1.35);}
  60% {opacity: 0.10; transform: scale(1.25);}
  70% {opacity: 0.25; transform: scale(1.35);}
  80% {opacity: 0.10; transform: scale(1.20);}
  100% {opacity: 0.18; transform: scale(1.25);}
}
@keyframes fade-in-up {
  0%  {opacity: 0; transform: scale(0.75) translateY(20px);}
  0% {opacity: 0; transform: scale(0.75) translateY(20px);}
  10% {opacity: 1; transform: scale(1) translateY(0px);}
}
@keyframes metropolis-appear {
  0%  {transform: rotateX(90deg);}
  25% {transform: rotateX(0deg);}
}
@keyframes bounce-platform {
	0%  {opacity: 0; transform: scale(0.75) translateY(-50px);}
	0% {opacity: 0; transform: scale(0.75) translateY(-50px);}
	25% {opacity: 1; transform: scale(1) translateY(0px);}
}
@keyframes bounce-snowman {
	0%  {opacity: 0; transform: translateY(-80px);}
	25% {opacity: 0; transform: translateY(-80px);}
	50% {opacity: 1; transform: translateY(0px);}
}
@keyframes bounce-tree {
	0%  {opacity: 0; transform: translateY(-125px) scale(1.75);}
	30% {opacity: 0; transform: translateY(-125px) scale(1.75);}
	55% {opacity: 1; transform: translateY(0px) scale(1.5);}
}
@keyframes bounce-santa {
	0%  {opacity: 0; transform: translateY(-80px);}
	35% {opacity: 0; transform: translateY(-80px);}
	60% {opacity: 1; transform: translateY(0px);}
}
@keyframes fade-gifts {
	0%  {opacity: 0;}
	60% {opacity: 0;}
	80% {opacity: 1; }
}
#holiday-message {
	background: @land;
	color: white;
	text-align: center;
	padding-top: 0px;
	span.string {
		opacity: 0.65;
	}
}

            
          
!
            
              	var snow = function () {
	// SNOW!
	// -> NOTE: Minification breaks it!
	// -@ http://thecodeplayer.com/walkthrough/html5-canvas-snow-effect
			//canvas init
			var canvas = document.getElementById("snow");
			var ctx = canvas.getContext("2d");
			//canvas dimensions
			var W = window.innerWidth;
			var H = window.innerHeight;
			canvas.width = W;
			canvas.height = H;
			//snowflake particles
			var mp = 45; //max particles
			var particles = [];
			for(var i = 0; i < mp; i++)
			{
					particles.push({
							x: Math.random()*W, //x-coordinate
							y: Math.random()*H, //y-coordinate
							r: Math.random()*4+1, //radius
							d: Math.random()*mp //density
					})
			}
			//Lets draw the flakes
			function draw()
			{
					ctx.clearRect(0, 0, W, H);

					ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
					ctx.beginPath();
					for(var i = 0; i < mp; i++)
					{
							var p = particles[i];
							ctx.moveTo(p.x, p.y);
							ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
					}
					ctx.fill();
					update();
			}
			//Function to move the snowflakes
			//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
			var angle = 0;
			function update()
			{
					angle += 0.01;
					for(var i = 0; i < mp; i++)
					{
							var p = particles[i];
							//Updating X and Y coordinates
							//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
							//Every particle has its own density which can be used to make the downward movement different for each flake
							//Lets make it more random by adding in the radius
							p.y += Math.cos(angle+p.d) + 1 + p.r/2;
							p.x += Math.sin(angle) * 2;

							//Sending flakes back from the top when it exits
							//Lets make it a bit more organic and let flakes enter from the left and right also.
							if(p.x > W || p.x < 0 || p.y > H)
							{
									if(i%3 > 0) //66.67% of the flakes
									{
											particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
									}
									else
									{
											//If the flake is exitting from the right
											if(Math.sin(angle) > 0)
											{
													//Enter fromth
													particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
											}
											else
											{
													//Enter from the right
													particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
											}
									}
							}
					}
			}
			//animation loop
			setInterval(draw, 100);
	};
	snow();

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console