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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3pr6aqOTs3pL0VhkGR2sH5AwMoviIc6sntxlgt8gvHunumePSPLVnoiRfOJP5vVGOxHH3py51pwkNOqlKrzI9L620Vcr7Ro3wOeI62RwhGwAAAGgYZtFqIfd_UxygMWK20s-iP5AKD_I/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ_uwxm6Jjy7y4wl6IFLdw4OtmkkC1USQIhn89OqTdBBT1X42lcEEqRoK91E39d6Oh7JxDVken9aS16tdfUPxFMDEuiiu430ljSD_1rjicFg7X7FzhS_eLVualwvXW7R-_WRkuekprRoM/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
Publicaciones Relacionadas
trucos blog
