| Web Cartoon" by shlyapnikova | |
| Contiene 40 íconos 48x48, en formato PNG. descargar | |
| Icons for Designers | |
| Contiene 10 íconos 64x64, en formato PNG. descargar | |
| Social snow by sultan-design | |
![]() | Contiene 18 íconos 256x256, en formato PNG. descargar |
![]() | |
2b02
Loading |
Tiny Circleslider para jQuery |
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>
<script type='text/javascript'> //<![CDATA[ ... aquí pegamos el contenido del archivo ... //]]> </script>
<style>
#rotatescroll { /* es el rectángulo contenedor */
height: 300px;
position: relative;
width: 300px;
}
#rotatescroll .viewport { /* es el rectángulo que contiene las imágenes */
height: 300px;
position: relative;
margin: 0 auto;
overflow: hidden;
width: 300px
}
#rotatescroll .overview { /* es la lista con las imágenes */
left: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
}
#rotatescroll .overview li { /* cada item de la lista */
float: left;
height: 300px;
position: relative;
width: 300px;
}
#rotatescroll .overlay { /* la imagen con el círculo se superpone a la lista */
background: transparent url(URL_bg-rotatescroll.png) no-repeat 0 0;
height: 300px;
left: 0;
position: absolute;
top: 0;
width:300px;
}
#rotatescroll .thumb { /* el círculo rojo que nos permite navegar */
background:transparent url(URL_bg-thumb.png) no-repeat 0 0;
cursor: pointer;
height: 26px;
left: 137px;
position: absolute;
top: -3px;
width: 26px;
z-index: 200;
}
#rotatescroll .dot { /* los puntos que indican ca posición de cada imagen */
background: transparent url(URL_bg-dot.png) no-repeat 0 0;
display: none;
height: 12px;
left: 155px;
position: absolute;
top: 3px;
width: 12px;
z-index: 100;
}
#rotatescroll .dot span { /* permanecen ocultos por defecto */
display: none;
}
</style><div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><img src="URL:imagen1" /></li>
<li><img src="URL:imagen2" /></li>
<li><img src="URL:imagen3" /></li>
<li><img src="URL:imagen4" /></li>
<li><img src="URL:imagen5" /></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div><script type="text/javascript">
$(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
</script>$('#rotatescroll').tinycircleslider({ interval: true });
Crear una galería de imágenes con JavaScript |
<style>
div.demoSW {
margin: 0 auto;
position: relative;
text-align: center;
width: 326px;
}
div.demoSW img {
background-color: #FFF;
border: 3px solid #BBB;
height: 190px;
outline: 1px solid #FFF;
padding: 10px;
width: 300px;
}
div.demoSW span {
color: #EEE;
display: block;
font-family: Georgia;
font-size: 20px;
letter-spacing: -1px;
outline: 1px solid #444;
padding: 5px 0;
}
div.demoSW div a {
color: #AAA;
font-family: Georgia;
text-decoration: none;
}
div.demoSW div {
margin:5px 0 0 0;
}
div.demoSW div a:hover {
color:#FFF;
text-decoration: none;
}
</style>
<div class="demoSW">
<img id="misfotos" src="URL_imagen_1" />
<span id="mistextos"> la primera de las imagenes </span>
<div>
<a href="#"> anterior </a> | <a href="#"> siguiente </a>
</div>
</div>var meses = new Array(); meses[0] = "enero"; meses[1] = "febrero"; meses[2] = "marzo";
var meses = new Array("enero","febrero","marzo");var foto = new Array(); foto[0] = "URL_imagen_1.png"; foto[1] = "URL_imagen_2.png"; foto[2] = "URL_imagen_3.png"; foto[3] = "URL_imagen_4.png"; foto[4] = "URL_imagen_5.png"; var texto = new Array(); texto[0] = "la primera de las imagenes"; texto[1] = "esta es la segunda"; texto[2] = "esta es al tercera"; texto[3] = "y casi vamos a terminar"; texto[4] = "la ultima de las imagenes";
var cantidad = foto.length;
var cualvemos = 0;
function mover(direccion) {
// accedemos al objeto que contiene la imagen
var laimagen = document.getElementById("misfotos");
// accedemos al objeto que contiene el texto
var eltexto = document.getElementById("mistextos");
// ¿cuál es el indice de la última imágenes en nuestra array?
var ultima = foto.length - 1; // en el ejemplo, será el 4
// antes de cambiar los datos, en un auxilar, verificamos cuál sería la imagen a mostrar
var auxiliar = cualvemos + direccion; // se sumará 1 o se restará 1 al índice
// si el resultado es menor que cero, le decimos que vaya al otro extremo y muestre la ultima
if(auxiliar < 0) { auxiliar = ultima; }
// si el resultado es mayor que la última, le decimos que vaya al otro extremo y muestre la primera
if(auxiliar > ultima) { auxiliar = 0; }
// listo, ahora ya podemos cambiar el dato sin problemas
cualvemos = auxiliar;
// ponemos la dirección URL de la imagen en la etiqueta IMG
laimagen.src = foto[cualvemos];
// ponemos el texto en la etiqueta SPAN
eltexto.innerHTML = texto[cualvemos];
}<a href="javascript:mover(-1);"> anterior </a> | <a href="javascript:mover(1);"> siguiente </a>
Algo más sobre expandir imágenes |

<img class="expa" src="URL_imagen_original" />
<style>
img.expa {
cursor: pointer;
max-width: 150px;
}
img.expa:hover {
max-width: none;
}
</style>
StreamPad: Una barra para reproducir audio |
Girando las cosas con CSS |
<div id="demoBG"> <h1><span>header</span></h1> <h2><span>dando vueltas y vueltas</span></h2> </div>
<style>
#demoBG { /* el rectángulo */
margin: 20px auto;
width: 600px;
}
#demoBG h1, #demoBG h2 { /* los títulos */
border-bottom: 10px solid rgba(0, 0, 0, 0.1);
border-top: 10px solid rgba(0, 0, 0, 0.1);
position: relative;
}
#demoBG h1 span, #demoBG h2 span { /* los textos */
display: block;
position: relative;
}
#demoBG h1 { /* el título superior */
background: #FFF;
margin: 0;
position: relative;
text-align: center;
z-index: 200;
/* lo rotamos en los diferentes navegadores */
-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9975640502598242, M12=0.0697564737441253, M21=-0.0697564737441253, M22=0.9975640502598242);
}
#demoBG h1 span { /* el texto en si mismo */
color: CornflowerBlue;
font-family: Garamond;
font-size: 100px;
line-height: 100px;
text-transform: uppercase;
}
#demoBG h2 { /* el título inferior */
background: DarkRed;
margin: 0;
z-index: 100;
/* lo rotamos en los diferentes navegadores */
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=-0.03489949670250097, M21=0.03489949670250097, M22=0.9993908270190958);
}
#demoBG h2 span { /* el texto en si mismo */
color: Tomato;
font-family: Comic Sans MS;
font-size: 50px;
line-height: 90px;
text-align: center;
}
#demoBG:hover > h1 { /* efecto hover sobre el título superior */
-moz-transform: rotate(4deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9975640502598242, M12=-0.0697564737441253, M21=0.0697564737441253, M22=0.9975640502598242);
}
#demoBG:hover > h2 { /* efecto hover sobre el título inferior */
-moz-transform: rotate(-2deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=0.03489949670250097, M21=-0.03489949670250097, M22=0.9993908270190958);
}
</style>Buenos Aires
Argentina
Nacido en el tercer mundo. Un santo varón. Buenos Aires. Los elefantes. Las golondrinas de Plaza de Mayo. Me chupo el dedo.
El tiempo es veloz. ¿No ves que ya no somos chiquitos? Despedida de la infancia. Todo es efímero. Juguetes perdidos. Dime quién me lo robó. Aprendizaje.
Soy un hippie. Rutas argentinas. Sobredosis de TV. Raros peinados nuevos. Más de cien mentiras. Delirium tremens.
Ciudad de pobres corazones. El karma de vivir al sur. Mundo de quimeras. Oh Dios, ¿Qué puedo hacer?
Cuando era más joven. Los mayores del mundo. Botas locas. Rejas electrificadas. Cerca de la revolución. Contra todos los males de este mundo. La casa desaparecida. Tumbas de la gloria. Vencedores vencidos. Carguen, apunten, fuego. Estás frito angelito. A lo mejor aún te acuerdas.
Ah, te vi entre las luces. Muchacha. Amor se llama el juego. Juego de seducción. Mi genio amor. Prométeme que nunca me dirás adiós. Pequeñas delicias de la vida conyugal. Toda la vida tiene música hoy. Es hora de levantare, querido (dormiste bien?).
Resumiendo.
Mi sueño de hoy. La sed verdadera. La búsqueda de la estrella. Todos juntos. ¡Ah! Basta de pensar.
Esto es to-to-todo amigos.
| CONTRAER ARCHIVOS |
|
