Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                main.halloctober.p-flex
	.halloctober__banner.p-flex
		h1.typo Spooky
		.fog.p-circle
//- If you change the h1 word, don't forget to also replace it in the CSS before/after pseudo elements created for the text-shadow effects.
              
            
!

CSS

              
                :root {
	// COLOR CSS VARIABLES
	--color_base: #191919; // Black 
	--color_pen: #fff; // White
	
	// SIZE VARIABLES
	--size: 20vmin; // Resize typo by only editing this variable
	--fog: calc(var(--size) / 1.2);
	--scale: 4.8; // Increase/decrease fog's size animation effect. Specially if you change the HTML h1, you might need to tweak this value.
}

// MIXINS
@mixin size($w, $h: $w) {
	width: $w;
	height: $h;
}

// PATTERNS
.p-flex {
	display: flex;
}

.p-circle {
	border-radius: 50%;
}

// LAYOUT
body {
	height: 100vh;
	background-color: var(--color_base);
	margin: 0;
	overflow: hidden;
}

::selection {
	background-color: transparent;
}

.halloctober {
	@include size(100%);
	
	&__banner {
		margin: auto; // Center magic after parent's display flex
		padding: 3%;
		position: relative; // To place fog
		overflow: hidden;
	}
}

// TYPOGRAPHY
.typo {
	color: var(--color_pen);
	cursor: default;
	font-family: 'Fredoka One', sans-serif;
	font-size: var(--size);
	font-weight: normal;
	letter-spacing: 0.1rem;
	margin: auto; // Center magic
	outline: none;
	position: relative; // To place text-shadows
	
	&:hover {
		+ .fog {
			animation-play-state: paused;
		}
	}
	
	$red: #b30808; 
	$blue: #1A237E; 
	$anim: 2s ease-in-out infinite;

	// Text Shadow Effects
	// We add them here to improve animation's performance
	&::before,
	&::after {
		color: transparent;
		content: 'Spooky'; // Same word as in HTML h1
		position: absolute;
		top: 0;
		left: 0;
		z-index: -10;
	}
	
	// Upper Shadow
	&::before {
		animation: move_upper_shadow $anim;
		opacity: 0;
		text-shadow: 
			6px 0 2px rgba($red, 0.4),
			12px 0 2px rgba($blue, 0.3);
	}
	
	// Bottom Shadow
	&::after {
		animation: move_bottom_shadow $anim;
		text-shadow: 
			2px 4px 2px rgba($red, 0.4),
			4px 8px 2px rgba($blue, 0.3);
	}

	transform: skew(10deg, 2deg);
	animation: float $anim;
	@at-root {		
		@keyframes move_upper_shadow {
			0%, 90%, 100% {
				opacity: 0;
				transform: translateX(-2%);
			}
			30% {
				opacity: 1;
				transform: translateX(0);
			}
		}
		@keyframes move_bottom_shadow {
			0%, 90%, 100% {
				opacity: 1;
				transform: translate(0, 0);
			}
			30% {
				opacity: 0;
				transform: translateY(-3.5%);
			}
		}
		@keyframes float {
			50% {
				transform: scaleY(1.01) skew(-10deg, -2deg);
			}
		}
	}
	@media (prefers-reduced-motion: reduce) {
		animation: none;
		transform: none;
		
		&::before,
		&::after {
			animation: none;
		}
	}
}

.fog {
	--fog_neg: calc(var(--fog) * -1);
		
	@include size(var(--fog));
	background-color: var(--color_base);
	position: absolute;
	top: var(--fog_neg);
	left: var(--fog_neg);
	
	transform: translate3d(0, 0, 0); // Fixes Safari mouseover flickering bug
	transform-origin: 0 50%; // Fixes Firefox laggy animation bug and smooths animation across Browsers
	animation: move_fog 13s 2s ease-in-out alternate infinite;
	@at-root {
		@keyframes move_fog {
			50% {
				transform: scale(var(--scale));
			}
		}
	}
	@media (prefers-reduced-motion: reduce) {
		animation: none;
	}
	
	// Blurry Effect
	&::after {
		--blur: calc(var(--fog) * 2);
		--blur_neghalf: calc(var(--blur) / -2);
		--filter: calc(var(--fog) / 30);
		
		@extend .p-circle;
		
		@include size(var(--blur));
		content: '';
		background-color: var(--color_base);
		filter: blur(var(--filter));
		margin-top: var(--blur_neghalf);
		margin-left: var(--blur_neghalf);
		position: absolute;
		top: 50%;
		left: 50%;
	}
}
              
            
!

JS

              
                /* 
 * PURE CSS SPOOKY TYPO
 * Yet another Spooky Pen :)
 *
 * Experimenting with a CSS blur filter, text-shadow, and transform skew effects animated. Pause the animation on typo mouseover, not fog. 
 * On mobile touch typo to pause and touch anywhere else on the screen to run it again.
 * Firefox mouseover/touch is not as smooth x.x
 *
 * Prefers-reduced-motion is applied. To test it:
 * Windows 10, Settings > Ease of Access > Display > Show animations.
 * MacOS, System Preferences > Accessibility > Display > Reduce motion.
 *
 * #halloctober
 * #018 - #100DaysOfCode
 * By ilithya | 2019
 */
              
            
!
999px

Console