Si creiais que ya lo habiais visto todo lo que se puede hacer con CSS3, olvidadlo, porque las posibilidades y el juego que da para el diseño son muchas y variadas. En esta ocasion vamos a aplicarselo a un simple texto para transformarlo en un letrero de neon. Añadiendole varias propiedades conseguimos que al hacer click en el boton conectar este se encienda igualito que los neones de toda la vida.
conectarREDEANDO blog
<div class="contenidoneon"><span id="switch">conectar</span><center><neontexto id="lights">ESCRIBE AQUI EL TEXTO</neontexto></center></div>
<style>
@import url(http://fonts.googleapis.com/css?family=Advent+Pro:700);
@-webkit-keyframes turnonlights {
0% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
1% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
4% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
7% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
8% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
12% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
22% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
23% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
26% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
28% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
34% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
36% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
42% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
55% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
60% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
63% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
67% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
72% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
73% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
76% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
78% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
84% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
86% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
96% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
100% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
}
@-moz-keyframes turnonlights {
0% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
1% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
4% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
7% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
8% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
12% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
22% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
23% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
26% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
28% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
34% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
36% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
42% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
55% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
60% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
63% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
67% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
72% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
73% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
76% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
78% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
84% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
86% { color: #6d5669; text-shadow: 0 0 3px #635861, 0 0 5px #635861; }
96% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 17px #ff00de, 0 0 38px #ff00de}
100% { color: #ff55de; text-shadow: 0 0 5px #ff99de, 0 0 10px #ff99de, 0 0 15px #ff99de, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; }
}
.contenidoneon #switch {
background: #b5bdc8;
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b));
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%);
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%);
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%);
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 );
color:#ffffff;
position: absolute;padding:3px;
top: 5px;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
left: 5px;font-family:Verdana;
cursor: pointer;
}
.contenidoneon #switch:hover {
background: #b5bdc8;
background: -moz-linear-gradient(left, #b5bdc8 0%, #828c95 36%, #28343b 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b));
background: -webkit-linear-gradient(left, #b5bdc8 0%,#828c95 36%,#28343b 100%);
background: -o-linear-gradient(left, #b5bdc8 0%,#828c95 36%,#28343b 100%);
background: -ms-linear-gradient(left, #b5bdc8 0%,#828c95 36%,#28343b 100%);
background: linear-gradient(to right, #b5bdc8 0%,#828c95 36%,#28343b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=1 );
}
.contenidoneon {
position: relative;
width: 580px;
padding: 2em;
margin: 1em auto;
background-color: #222;
border-radius: 12px;
}
neontexto {
text-align: center;
font-family: "Advent Pro";
margin: 0.5em auto;
letter-spacing: 0.15em;
font-family: "Advent Pro";
font-weight: 700;
font-size: 4.6em;
text-transform: uppercase;
color: #6d5669;
text-shadow: 0 0 3px #635861, 0 0 5px #635861;
}
.animate {
-webkit-animation-name: turnonlights;
-webkit-animation-duration: 3.0s;
-webkit-animation-fill-mode: both;
-webkit-animation-timing-function: steps(2, start);
-moz-animation-name: turnonlights;
-moz-animation-duration: 3.0s;
-moz-animation-fill-mode: both;
-moz-animation-timing-function: steps(2, start);
}
</style>
<script>
var tswitch = document.getElementById('switch');
tswitch.onclick = function() {
this.style.display = 'none';
document.getElementById('lights').className = 'animate';
};
</script>
