Hola amigos, quisiera saber si uno de ustedes tiene este código o donde lo puedo encontrar. Saludos.
http://i.imgur.com/XUcBTMD.png
http://i.imgur.com/XUcBTMD.png
¿Codigo para lograr este efecto?
- Autor Johanko
- Fecha de inicio
- Desde
- 26 Dic 2013
- Mensajes
- 523
Este es para las entradas de multi Reproductor de video
ahorita te paso el CSS
HTML:
<figure>
<img alt="TITULO" title="TITULO" src="URL DE LA IMAGEN"/>
<div class="mask"></div>
</figure>
<p>
CONTENIDO
</p>
<ul class="buttons">
<li class="b">
<a href="#">« Capítulo anterior</a>
</li>
<li class="b">
<a href="#">Ir al listado de capítulos</a>
</li>
<li class="b">
<a href="#">Siguiente capítulo »</a>
</li>
</ul>
<ul class="tabs">
<li><a class='tip' title="Servidor 1" href="#tab1">Opcion 1</a></li>
<li><a class='tip' title="Servidor 2" href="#tab2">Opcion 2</a></li>
<li><a class='tip' title="Servidor 3" href="#tab3">Opcion 3</a></li>
<li><a class='tip' title="Servidor 4" href="#tab4">Opcion 4</a></li>
<li><a class='tip' title="Servidor 5" href="#tab5">Opcion 5</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div align="center">
AQUI CODIGO REPRODUCTOR 1
</div>
</div>
<div id="tab2" class="tab_content">
<div align="center">
AQUI CODIGO REPRODUCTOR 2
</div>
</div>
<div id="tab3" class="tab_content">
<div align="center">
AQUI CODIGO REPRODUCTOR 3
</div>
</div>
<div id="tab4" class="tab_content">
<div align="center">
AQUI CODIGO REPRODUCTOR 4
</div>
</div>
<div id="tab5" class="tab_content">
<div align="center">
AQUI CODIGO REPRODUCTOR 5
</div>
</div>
</div>ahorita te paso el CSS
- Desde
- 10 Dic 2012
- Mensajes
- 2.692
Me lo podrías pasar? :encouragement:
- Desde
- 26 Dic 2013
- Mensajes
- 523
Perdon se me callo la net, bueno aqui esta el CSS
si te gusto mi ayuda visita mi blog de Android: Android adictivo | De Todo Poco Android
---------- Post agregado el 28-ene-2014 hora: 16:39 ----------
sale amigos ya está el CSS
HTML:
.mask {
background: url("http://i.imgur.com/mlBtcT2.png") no-repeat scroll left top transparent;
height: 140px;
left: 0;
position: absolute;
top: 0;
width: 250px;
z-index: 11;
}
.buttons {
color: white;
display: table;
padding: 15px 5px 0;
table-layout: fixed;
width: 100%;
}
.buttons .b {
display: table-cell;
text-align: center;
}
.buttons .b:first-child a {
border-radius: 4px 0 0 4px;
}
.buttons .b:last-child a {
border-radius: 0 4px 4px 0;
}
.buttons .b a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: linear-gradient(#AACC5A, #79992E) repeat scroll 0 0 transparent;
border-color: #669145 -moz-use-text-color #669145 #669145;
border-image: none;
border-style: solid none solid solid;
border-width: 1px 0 1px 1px;
box-shadow: 0 1px 0 0 #CAECAD inset, 0 1px 2px 0 #EEEEEE;
color: #FFFFFF;
display: block;
font-size: 11px;
height: 100%;
list-style: none outside none;
padding: 8px;
text-decoration: none;
text-shadow: 0 1px 0 #465A3C;
width: 100%;
}
.buttons .b a:hover {
background: linear-gradient(#9BBB4F, #668816) repeat scroll 0 0 transparent;
box-shadow: 0 1px 0 0 #ADD68A inset, 0 1px 2px 0 #EEEEEE;
color: #E4F5D3;
}
.buttons .b a:active {
background: linear-gradient(#79992E, #A2BE60) repeat scroll 0 0 transparent;
}
.buttons .b a.n {
background: linear-gradient(#C3D894, #DEECBB) repeat scroll 0 0 transparent;
border-color: #B1C5A7;
box-shadow: 0 1px 0 0 #ADD68A inset, 0 1px 2px 0 #EEEEEE;
cursor: default;
}
/* CSS Tabs Adictgs Tec ® jQuery */
.tab_container {
display: table;
margin: -10px 0 0;
padding: 10px 5px 5px;
table-layout: fixed;
width: 100%;
}
.tab_content {
background: url("http://dl.dropbox.com/u/6188287/files/template/load-cap.gif") no-repeat scroll 50% 325px black;
box-shadow: 0 1px 1px #BBBBBB;
height: 340px;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
height: 400px;
}
ul.tabs {
margin-left: 50px;
margin-right: -1px;
margin-top: 10px;
}
ul.tabs li:first-child:last-child{border-radius:4px 4px 0 0}
ul.tabs li:first-child{border-radius:4px 0 0 0}
ul.tabs li:last-child{
border-left:1px solid #4b6170;
border-right:1px solid #4b6170;
border-radius:0 4px 0 0;
}
ul.tabs li {
list-style:none;
padding:10px;
margin:0;
display:table-cell;
text-align:center;
box-shadow:inset 0 1px 0 0 #8da4b3,0 1px 2px rgba(0,0,0,0.2);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#6c899c),color-stop(1,#4b6170));
background:-moz-linear-gradient(center top,#6c899c 5%,#4b6170 100%);
background-color:#6c899c;
border-top:1px solid #4b6170;
border-bottom:1px solid #4b6170;
border-left:1px solid #4b6170;
border-right:0;
color:white;
font-family:arial;
font-size:9px;
text-transform:uppercase;
text-decoration:none;
text-shadow:0 1px 0 #354752;
opacity:.9;
line-height:8px;
cursor:pointer;
position:relative;
-webkit-transition:opacity 300ms ease-in-out;
-moz-transition:opacity 300ms ease-in-out;
width:128px;
}
ul.tabs li a {
text-shadow:0 -1px 0 #233641;
color:white;
}
ul.tabs li:hover {
color:white;
}
html ul.tabs li.active, html ul.tabs li.active {
background:-webkit-linear-gradient(#3e5664,#a7a7a7);
background:-moz-linear-gradient(#3e5664,#a7a7a7);
box-shadow:none;
opacity:1;
text-shadow:0 -1px 0 #233641;
border:0color:white;
}si te gusto mi ayuda visita mi blog de Android: Android adictivo | De Todo Poco Android
---------- Post agregado el 28-ene-2014 hora: 16:39 ----------
sale amigos ya está el CSS
- Desde
- 26 Feb 2014
- Mensajes
- 2.017
- Desde
- 26 Jul 2013
- Mensajes
- 1.051
