WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Um código por ytr3d3
1026
ytr3d3
Abrir no Editor
Publique Seu Código
Recomendado
13 December 2025
Código WebGL HTML Canvas do Super Mario 64
26 May 2025
Um Código de Liamgilles76
14 January 2025
Exemplo de página da Web do portfólio
HTML
Copy
CodePen - GSAP JS: multiple text-shadow : hover
3d Hover Effect
animated
with multiple
text-shadows
CSS
Copy
body { font-family: 'Source Sans Pro', Arial, sans-serif; background: #becccc; text-transform: uppercase; color: #fff; text-align: center; letter-spacing: -3px; padding:50px; } h2{ font-size:100px; position:relative; font-weight: bold; cursor: pointer; } /* text-shadow forked from: https://codepen.io/teetteet/details/dFICw#forkline */ .superShadow { text-shadow: 0 1px 0 hsl(174,5%,80%), 0 2px 0 hsl(174,5%,75%), 0 3px 0 hsl(174,5%,70%), 0 4px 0 hsl(174,5%,66%), 0 5px 0 hsl(174,5%,64%), 0 6px 0 hsl(174,5%,62%), 0 7px 0 hsl(174,5%,61%), 0 8px 0 hsl(174,5%,60%), 0 0 5px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.2), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.3); } strong{ font-size:200px; }
JS
Copy
$("h2").each(function(index, element){ var animation = TweenMax.to(this, 0.2, { className: '+= superShadow', marginTop: '-10px', marginBottom: '10px', ease: Power1.easeIn, paused:true }); element.animation = animation; }) $('h2').hover(function(){ this.animation.play() }, function(){ this.animation.reverse(); })