TESTI con effetti

Testo 1: stile per sfondo scuro Spice up your type with CSS Animated text fill — no JavaScript required ...

Testo 1: stile per sfondo scuro

Spice up your type with CSS Animated text fill — no JavaScript required —

HTML Testo 1

<div style="background-color:#777777!important; margin:20px 0px 20px 0px;"> <br /> <div> <p class="lpp" style="text-align:center;"> Spice up your type with CSS <span> Animated text fill </span> — no JavaScript required — </p> </div> <br /> </div>

CSS Testo 1

.lpp { text-transform: uppercase; letter-spacing: .5em; display: inline-block; border: 4px double rgba(255,255,255,.25); border-width: 4px 0; padding: 1.5em 0em; position: relative; top: 18%; left: 50%; width: 40em; margin: 0 0 0 -20em;} .lpp span { font: 700 4em/1 "Oswald", sans-serif; letter-spacing: 0; padding: .25em 0 .325em; display: block; margin: 0 auto; text-shadow: 0 0 80px rgba(255,255,255,.5); /* Clip Background Image */ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFiCrdbrr1WYrjnVonVRU5ma6nsTDuFv8Z37rNb7-KQEa3GczO1LEdI1YNMRYZDCt-XfpeikB0AI9VJ2XFYl4kKBKHtgfxoFevJ3m8CyMnBKn8ds414zAdht-ulqhrXH13kS-bi_wcNGiI2b2VN47YtEWxUx_Mlet54rRO813xzJ3QuKmn56FpkSElkPgQ/s1600/animated-text-fill4.png) repeat-y; -webkit-background-clip: text; background-clip: text; /* Animate Background Image */ -webkit-text-fill-color: transparent; -webkit-animation: aitf 80s linear infinite; /* Activate hardware acceleration for smoother animations */ -webkit-transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; } /* Animate Background Image */ @-webkit-keyframes aitf { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }