







Traducciones de textos con el API de Google |
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<div id="idiomas">
<a id="L_es" class="lenguajeactual" href="javascript:void(0);" onclick="traduce('es');">Español</a>
<a id="L_en" class="" href="javascript:void(0);" onclick="traduce('en');">Inglés</a>
<a id="L_it" class="" href="javascript:void(0);" onclick="traduce('it');">Italiano</a>
<a id="L_fr" class="" href="javascript:void(0);" onclick="traduce('fr');">Francés</a>
<a id="L_pt" class="" href="javascript:void(0);" onclick="traduce('pt');">Portugués</a>
</div>
<div id="miejemplo">
....... el texto .......
</div><style>
#idiomas {
background-color: #000;
border: 1px solid #444;
margin: 0 auto;
padding: 5px 10px;
width: 500px;
}
#idiomas a {
border-radius: 5px;
color: #DDD;
display: inline-block;
font-size: 17px;
padding: 5px 15px;
}
#idiomas a:hover { color: #FFF; }
.lenguajeactual { background-color: #444; }
#miejemplo {
border: 1px solid #444;
border-top:none;
color: #EEE;
font-size: 16px;
padding: 10px 20px;
margin: 0 auto;
width: 480px;
}
</style><script>
var lenguaje = "es"; // es el lenguaje por defecto
google.load("language",1); // cargamos el API
// definimos la función que ejecutará el API
var callback = function(result) {
if(result.translation) {
var translateDiv = document.getElementById("miejemplo");
translateDiv.innerHTML=result.translation;
}
}
// ejecutamos la función
function traduce(traducir) {
document.getElementById("L_" + lenguaje).className = ""; // cambiamos al clase del enlace anterior
var translateDiv = document.getElementById("miejemplo"); // es el DIV donde está el texto
google.language.translate(translateDiv.innerHTML,lenguaje,traducir,callback); // ejecutamos la función del API
lenguaje = traducir; // preservamos el lenguaje actual
document.getElementById("L_" + traducir).className = "lenguajeactual"; // cambiamos la clase del actual
}
</script>Este es un párrafo en español.
Puede ser traducido haciendo un click en el enlace anterior.
Utilizando el API de Google y es relativamente fácil de implementar.
Columnas con CSS: Introducción |
<style>
.demo {
background-color:#000;
line-height:0;
margin:0 auto;
width: 600px;
.demo img {
outline: 1px solid Turquoise;
width: 200px;
}
</style>
<div class="demo">
<img src="URL_IMAGEN_1"/>
.......
<img src="URL_IMAGEN_7"/>
</div>





.demo img { vertical-align: top; } o bien .demo img { vertical-align: middle; }.demo { height:398px; }
.demo img { float: left; } o bien .demo img { float: right; }.demo {
.......
-moz-column-count:3;
-moz-column-gap:0;
-webkit-column-count:3;
-webkit-column-gap:0;
column-count:3;
column-gap:0;
}















Blogger: La nueva interfaz será obligatoria |

Imágenes y CSS: Todo depende del navegador |
<img src="URL_IMAGEN"/>

<img style="border-radius:20px" src="URL_IMAGEN"/>

<img style="border-radius: 20px;border: 5px solid #FFF;" src="URL_IMAGEN"/>

<img style="border-radius: 20px;border: 5px solid #FFF;padding: 10px;" src="URL_IMAGEN"/>

<img style="border-radius:100px;padding: 0 50px;" src="URL_IMAGEN"/>

<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;" src="URL_IMAGEN"/>

<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 10px #DEF;" src="URL_IMAGEN"/>

<img style="background-color: #678;border: 5px solid #FFF;border-radius: 100px;padding: 10px 50px;box-shadow:0 0 15px #000000 inset,0 0 10px #DEF;" src="URL_IMAGEN"/>

Si todo falla: Hay que borrar la caché del navegador |
Navegación con círculos |
<a class="circulo" href="javascpit:void(0);"> <span style="background-image: url(IMAGEN_VISIBLE);"></span> <div style="background-image:url(URL_IMAGEN_OCULTA);"></div> </a>
<style>
/* los enlaces pueden tener cualquier dimensión */
a.circulo {
display: inline-block;
height: 46px;
position: relative;
width: 75px;
}
/* la etiqueta SPAN contiene la imagen visible */
a.circulo span {
background: #00BE98 url() no-repeat 50% 50%; /* la imagen es un fondo */
display: block;
cursor: pointer;
/* la dimensión de la imagen */
height: 46px;
width: 46px;
border-radius: 23px; /* se ve como círculo con un radio que es la mitad de su tamaño */
/* la posicionamos de manera absoluta en el centro */
position: absolute;
top: 50%;
left: 50%;
/* le ponemos márgenes negativos arriba y a la izquierda para centrarla */
margin: -23px 0 0 -23px;
/* la animación */
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/* la imagen oculta */
a.circulo div {
background: transparent url() no-repeat center center;
height: 0;
left: 50%;
margin: 0;
overflow: hidden;
position: absolute;
top: 50%;
width: 0;
z-index: 100;
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/* al poner el cursor encima del enlace */
/* la etiqueta SPAN se "agranda" */
a.circulo:hover span {
border-radius: 75px;
height: 150px;
margin: -75px 0 0 -75px;
opacity: 0.6;
width: 150px;
}
/* la etiqueta DIV se hace visible */
a.circulo:hover div {
border-radius: 75px;
height: 150px;
margin: -75px 0 0 -75px;
width: 150px;
}
</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 |
|
