Direction-aware text-shadow

direction-aware-text-shadow.markdown

Direction-aware text-shadow

Direction-aware text-shadow, use of css variables to create perspective and 3D light effect on text

A Pen by Martin Picod on CodePen.

License.

index.html

    <section class="error_section">
      <p class="error_section_subtitle">Thanks. You just broke it all !</p>
      <h1 class="error_title">
        <p>404</p>
        404
      </h1>
      <a href="#" class="btn">get me out of here</a>
    </section>

script.js

 
const title = document.querySelector('.error_title')


//////// Light //////////
document.onmousemove = function(e) {
  let x = e.pageX - window.innerWidth/2;
  let y = e.pageY - window.innerHeight/2;
  
  title.style.setProperty('--x', x + 'px')
  title.style.setProperty('--y', y + 'px')
}

////////////// Shadow ///////////////////
title.onmousemove = function(e) {
  let x = e.pageX - window.innerWidth/2;
  let y = e.pageY - window.innerHeight/2;

  let rad = Math.atan2(y, x).toFixed(2); 
  let length = Math.round(Math.sqrt((Math.pow(x,2))+(Math.pow(y,2)))/10); 

  let x_shadow = Math.round(length * Math.cos(rad));
  let y_shadow = Math.round(length * Math.sin(rad));

  title.style.setProperty('--x-shadow', - x_shadow + 'px')
  title.style.setProperty('--y-shadow', - y_shadow + 'px')

}

style.scss

$primary-color: #32C983;
$secondary-color: #25F193;
$black: #343434;
$dark-black: #1A1A1A;
$gradient: linear-gradient(to top, $primary-color, $secondary-color);
$black-gradient: linear-gradient(-225deg, $dark-black, $black);
*{margin:0;padding:0;}
a{
  text-decoration: none;
}
body{
  font-family: 'Source Sans Pro', sans-serif;
	font-weight: 600;
	color: $black;
}
.error_section{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100vh;
	background-image: $black-gradient;
	&_subtitle{
		color: $secondary-color;
		text-transform: uppercase;
		letter-spacing: 5pt;
		font-weight: 500;
		font-size: 0.8rem;
		margin-bottom: -5em;
	}
	.error_title{
		--x-shadow: 0;
		--y-shadow: 0;
		--x:50%;
		--y:50%;
		font-size: 15rem;
		transition: all 0.2s ease;
		position: relative;
    padding: 2rem;
		&:hover{
			transition: all 0.2s ease;
			text-shadow: var(--x-shadow) var(--y-shadow) 10px $dark-black;
		}
		  p{
			position: absolute;
			top: 2rem;
			left: 2rem;
			background-image: radial-gradient(circle closest-side, rgba(white, 0.05), transparent);
			background-position: var(--x) var(--y);
			background-repeat: no-repeat;
			text-shadow: none; 
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;  
			transition: all 0.1s ease;
		  }
	}
}
.btn{
	padding: 0.8em 1.5em;
	border-radius: 99999px;
	background-image: $gradient;
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2), inset 0px -2px 5px 0px rgba(0,0,0,0.2);
	border: none;

	cursor: pointer;


	text-shadow: 0px 1px $black;
	color: white;
	text-transform: uppercase;
	letter-spacing: 1.5pt;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;

	transition: ease-out 0.2s all;

	&:hover{
		text-shadow: 0px 1px 1px $black;
		transform: translateY(-5px);
		box-shadow: 0px 4px 15px 2px rgba(0,0,0,0.1), inset 0px -3px 7px 0px rgba(0,0,0,0.2);
		transition: ease-out 0.2s all;
	}
}