23 junio 2012

Gadget de próximos partidos

De nuevo vengo con otro gadget y en este vamos a mostrar con un pequeño slider los "Próximos Partidos" que el Sevilla FC disputará.

Está creado sin ningún tipo de script (todo en CSS) por lo que la carga del Blog no se verá ralentizada bajo ningún concepto.

Los colores como no.....son en rojo y blanco y el slider es muy fácil de manipular, de momento os dejo el código y abajo os explico su funcionamiento.

<style>
#slider {
width: 240px;
height: 140px;
margin: 0px auto 0;
overflow: visible;
background-color: #8E0808;
border: 10px solid #8E0808;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
position: relative;}
#mask {
overflow: hidden;}
#slider:hover {
background-color: #000;
border: 10px solid #000;}
#slider:hover #pause {
opacity: 1;}
#slider:hover #progress {
background-color: rgba(255,255,255,0.0);}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;}
#pause {
width: 250px;
height: 140px;
position: absolute;
top: 0;
opacity: 0;
background-image: url(http://4.bp.blogspot.com/-McXB4t7-Yic/T-SJM7gabwI/AAAAAAAACBI/lKDrkN-M-Z8/s1600/helperblogger.com-paused.png);
background-position: 210px 20px;
background-repeat: no-repeat;
pointer-events: none;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;}
#progress {
width: 3px;
height: 3px;
background-color: #FFF;
-moz-animation: progress 18s infinite;
-webkit-animation: progress 18s infinite;
position: relative;
top: -1px;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;}
#slider ul {
width: 1000px;
list-style: none;
padding: 0;
margin: 0;
-moz-animation: slide-animation 18s infinite;
-webkit-animation: slide-animation 18s infinite;
position: relative;
left: 0px;}
#slider li {
display: inline;
width: 250px;
height: 125px;
margin: 0;
padding: 0;
float: left;
position: relative;
background-image: url(http://4.bp.blogspot.com/-yKmATamNi5A/T-SJK85LUvI/AAAAAAAACA4/ZfhUPC0hYM0/s1600/helperblogger.com-loader.gif);
background-position: 50% 50%;
background-repeat: no-repeat;}
#slider li a {
display: block;
text-decoration: none;}
#slider li span {
display: block;
width: 240px;
padding: 0px 0px;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba(54,44,48,0.6);
pointer-events: none;
text-align: left;}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-250px; opacity:1;}
45% {left:-250px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-500px; opacity:1;}
70% {left:-500px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1000px; opacity:1;}
95% {opacity:1;}
98% {left:-1000px; opacity:0;}
100% {left:0px; opacity:0;}}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-250px; opacity:1;}
45% {left:-250px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-500px; opacity:1;}
70% {left:-500px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-750px; opacity:1;}
95% {opacity:1;}
98% {left:-750px; opacity:0;}
100% {left:0px; opacity:0;}}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:250px; opacity:1;}
22.5% {width:250px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:250px; opacity:1;}
47.5% {width:250px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:250px; opacity:1;}
72.5% {width:250px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:250px; opacity:1;}
98% {width:250px; opacity:0;}
100% {width:0px; opacity:0;}}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:250px; opacity:1;}
22.5% {width:250px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:250px; opacity:1;}
47.5% {width:250px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:250px; opacity:1;}
72.5% {width:250px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:250px; opacity:1;}
98% {width:250px; opacity:0;}
100% {width:0px; opacity:0;}}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}}
#slider ul li span h2 {
font-size: 12px;
line-height: 1px;
color: #fff;
font-weight: normal;
font-family: 'Communist-Regular';
text-shadow: 1px 1px 1px #FFF;}
</style>
<div id="slider-shadow">
<div id="slider">
<center style="color: White;"><b>PROXIMOS PARTIDOS</b></center>
<div id="mask">
<ul>
<li>
<img src="http://i40.servimg.com/u/f40/13/20/23/83/rota10.gif" WIDTH=250 HEIGHT=100/><span><h2>13/JULIO: UD ROTENA-SEVILLA FC</h2></span>
</li>
<li>
<img src="http://i40.servimg.com/u/f40/13/20/23/83/arcos10.gif" WIDTH=250 HEIGHT=100/><span><h2>21/JULIO: ARCOS CF-SEVILLA FC</h2></span>
</li>
<li>
<img src="http://i40.servimg.com/u/f40/13/20/23/83/girona12.gif" WIDTH=250 HEIGHT=100 /><span><h2>25/JULIO: GIRONA CF-SEVILLA FC</h2></span>
</li>
<li>
<img src="http://i40.servimg.com/u/f40/13/20/23/83/boru10.gif" WIDTH=250 HEIGHT=100 /><span><h2>04/AGOSTO: BORUSSIA-SEVILLA FC</h2></span>
</li>
</ul>
</div>
<div id="progress">
</div>
<div id="overlay">
</div>
<div id="pause">
</div>
</div>
</div>

Copiamos todo el código y lo pegamos en un gadget HTML/JAVASCRIPT.

Configuración para próximos partidos:

Rojo: Estas son las imágenes de los distintos partidos, tan solo deberéis cambiarla por el siguiente partido.

Negro: Aquí va el título del partido.

Como véis es facilísimo, no os preocupéis por el tamaño que coloquéis a las imágenes ya las he redimencionado en el slider para que todas salgan con las mismas medidas.


Cuando comienze la Liga este gadget será automatico pero ahora por motivos de tiempo y la llegada de las vacaciones no tendré tiempo de ir actualizándolo, así que lo dejo manual para que vosotros lo utilizéis de momento.

!!!! A DISFRUTARLO !!!!
VER DEMO

PROXIMOS PARTIDOS

  • 13/JULIO: UD ROTENA-SEVILLA FC



  • 21/JULIO: ARCOS CF-SEVILLA FC



  • 25/JULIO: GIRONA CF-SEVILLA FC



  • 04/AGOSTO: BORUSSIA-SEVILLA FC


5 comentarios

Eres mu grande Antonio! Enrome. No dejas de sorprenderme ;)

Cada cual es grande grande en lo suyo, unos por unas cosas, otros por otras.

Saludos monstruo.

gracias Antonio,pero el tamaño del Slider se podria encoger aun mas?.

!Correcto!, cambias la tercera línea: width: 240px; por la que necesites,ejemplo:width: 200px; y al final del código cambia por el mismo valor todas las imágenes.

Si tienes algún problema, ya sabes, comentario y nueva explicación.
Saludos.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"