Text 3d hover

by Lazaro Contreras

HTML

<h1 class="elemento" style='transform: translateY(0px);text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;'>Lázaro
Contreras</h1>

CSS

html{
  background: #333;
  overflow: hidden;
}
h1{
	position: absolute;
	margin: auto;
	height: 80px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	color: white;
  font-family: helvetica;
  text-align: center;
	font-size: 80px;
	font-weight: bold;
  transition: all .5s linear;
}

JavaScript

var elemento = document.querySelector('.elemento');
elemento.onmouseover = function(){
	this.style = 'transform: translateY(7px);text-shadow: 0px 0px 0px #999, 0px 0px 0px #888, 0px 0px 0px #777, 0px 0px 0px #666, 0px 0px 0px #555, 0px 0px 0px #444, 0px 0px 0px #333, 0px 0px 0px #001135;'
}
elemento.onmouseleave = function(){
	this.style = 'transform: translateY(0px);text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;';
}