Comparativa entre blogs y webs

4 comentaron

Todos o casi todos tenemos una idea de lo que es una web y de lo que es un blog. Pero para tenerlo un poco mas claro, os traigo esta infografia confeccionada por la pagina VerLaCiudad, en la que con cierta simplicidad nos dan los conceptos basicos necesarios.






leer articulo ➨

.

Sobre animado de contacto para mostrar tu email

18 comentaron

Para que muestres tu email de contacto de una forma diferente en tu blog o web, aqui te traigo este genial diseño. Como podeis observar, se trata de un sobre realizado integramente con codigo CSS3 (no contiene ninguna imagen) que al pasar el cursor sobre el, este se abre y aparece una hoja con tu correo electronico impreso. Situa el cursor encima del sobre azul de abajo y veras su animacion.






redeandoblog@gmail.com






Si quieres ponerlo en tu pagina, copia el siguiente codigo y pegalo alli donde quieras mostrarlo. Sustituye lo que esta en color rojo por la direccion de tu email. Para modificar el tamaño de la fuente, hazlo donde esta indicado en color azul.

ver codigo
<center><div class="contact"><div class="envelope"><div class="top"><div class="outer"><div class="inner"></div></div></div><div class="bottom"></div><div class="left"></div><div class="right"></div><div class="cover"></div><div class="paper"><a style="font-size: 13px;font-family: Verdana;" class="mail">aquituemail@mail.com</a></div></div></div></center>

<style>
.contact {
  position: relative;cursor:pointer;
  border-radius: 2px;
  -ms-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  -webkit-border-radius: 2px;
}
.contact .envelope {
  position: absolute;
  height: 93px;
  width: 165px;
  left: 50%;
  margin-left: -83px;
  top: 50%;
  margin-top: -50px;
  background: #F9F9F9;
 
  transition: margin-top 300ms;
  -ms-transition: margin-top 300ms;
  -moz-transition: margin-top 300ms;
  -o-transition: margin-top 300ms;
  -webkit-transition: margin-top 300ms;
}
.contact:hover .envelope {
  transition-delay: 150ms;
  -ms-transition-delay: 150ms;
  -moz-transition-delay: 150ms;
  -o-transition-delay: 150ms;
  margin-top: -20px;
}
.contact .envelope .top {
  position: absolute;
  top: -3px;
  left: 0px;
  width: 100%;
  height: 73px;
  z-index: 30;
  overflow: hidden;
    
  transform-origin: top;
  -ms-transform-origin: top;
  -moz-transform-origin: top;
  -o-transform-origin: top;
  -webkit-transform-origin: top;
   
  transition: transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
  -ms-transition: -ms-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
  -moz-transition: -moz-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
  -o-transition: -o-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
  -webkit-transition: -webkit-transform 300ms 150ms, z-index 0ms 150ms, height 300ms 0ms, top 300ms 0ms;
}
.contact:hover .envelope .top {
  transition: transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
  -ms-transition: -ms-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
  -moz-transition: -moz-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
  -o-transition: -o-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
  -webkit-transition: -webkit-transform 300ms 0ms, height 300ms 150ms, top 300ms 150ms;
 
  height: 10px;
  top: -60px;
 
  transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
}
.contact .envelope .outer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  border-left: 83px solid transparent;
  border-right: 82px solid transparent;
  border-top: 70px solid #EEE;
}
.contact .envelope .outer .inner {
  position: absolute;
  left: -81px;
  top: -73px;
  border-left: 81px solid transparent;
  border-right: 80px solid transparent;
  border-top: 68px solid #70BBFE;
}
.contact .envelope .bottom {
  position: absolute;-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  z-index: 20;
  bottom: 0px;
  left: 2px;
  border-left: 81px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 45px solid #70BBFE;
}
.contact .envelope .left {
  position: absolute;
  z-index: 20; top: 0px;
  left: 0px;
  border-left: 81px solid #70BBFE;
  border-top: 45px solid transparent;
  border-bottom: 45px solid transparent;
}
.contact .envelope .right {
  position: absolute;
  z-index: 20;
  top: 0px;
  right: 0px;
  border-right: 80px solid #70BBFE;
  border-top: 45px solid transparent;
  border-bottom: 45px solid transparent;
}
.contact .envelope .cover {
  position: absolute;
  z-index: 15;
  bottom: 0px;
  left: 0px;
  height: 55%;
  width: 100%;
  background: #EEE;
}
.contact .envelope .paper {
  position: absolute;
  height: 83px;border:1px solid #cccccc;
  padding-top: 10px;
  width: 99%;
  top: 0px;
  left: 0px;
  background: #F9F9F9;
  z-index: 10;
  transition: margin-top 300ms 0ms;
  -ms-transition: margin-top 300ms 0ms;
  -moz-transition: margin-top 300ms 0ms;
  -o-transition: margin-top 300ms 0ms;
  -webkit-transition: margin-top 300ms 0ms;
}
.contact:hover .envelope .paper {
  margin-top: -60px;
  transition: margin-top 300ms 150ms;
  -ms-transition: margin-top 300ms 150ms;
  -moz-transition: margin-top 300ms 150ms;
  -o-transition: margin-top 300ms 150ms;
  -webkit-transition: margin-top 300ms 150ms;
}
.contact .envelope .paper a {
  position: relative;
  display: block;cursor:default;
  color: #000000 !important;
  margin: 5px;-webkit-text-shadow: 2px 1px 2px #71BCFF;-moz-text-shadow: 2px 1px 2px #71BCFF;text-shadow: 2px 1px 2px #71BCFF;
  margin-bottom: 0px;font-weight: bold;
  text-align: center;
  text-decoration: none;
 }
.contact .envelope .paper a.call .i {
  position: absolute;
  top: 2px;
  left: 20px;
  display: inline-block;
  width: 3px;
  height: 5px;
  border-width: 5px 0 5px 2px;
  border-style: solid;
  border-color: #555;
  background: transparent;
 
  transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);

  border-top-left-radius: 3px 5px;
  border-bottom-left-radius: 3px 5px;
  -moz-border-radius-topleft: 3px 5px;
  -moz-border-radius-bottomleft: 3px 5px;
  -webkit-border-top-left-radius: 3px 5px;
  -webkit-border-bottom-left-radius: 3px 5px;
                                  
  transition: border-color 300ms;
  -ms-transition: border-color 300ms;
  -moz-transition: border-color 300ms;
  -o-transition: border-color 300ms;
  -webkit-transition: border-color 300ms;
}
.contact .envelope .paper a {
  color: #333;

  transition: color 200ms;
  -ms-transition: color 200ms;
  -moz-transition: color 200ms;
  -o-transition: color 200ms;
  -webkit-transition: color 200ms;
}
.contact .envelope .paper a:hover {
  color: #EEE;
}
.contact .envelope .paper .i {
  border-color: #DDD;
}
.contact .envelope .paper a.mail .i {
  position: absolute;
  top: 0px;
  left: 17px;
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
}
</style>


leer articulo ➨

. , ,

Cancion "El Internet"

comentar

Hace un tiempo, escuchando el genial programa nocturno de radio "La parroquia del monaguillo" en Onda Cero, escuche esta cancion. La interpreta un duo mexicano (chica y chico) llamado Los Alguiens con dos mascaras verdes y con un videoclip casero. Lo busque, lo encontre y aqui lo tienes para que escuches esta oda a internet.


leer articulo ➨

.

341 millones de puntos

comentar



Parece de locos, pero alguien se lo ha propuesto y, lo que es mas, lo ha hecho: colocar en un mapa a todos y cada uno de los habitantes de un pais. En realidad, son dos las naciones -Estados Unidos y Canada- asi representadas, con sus 341.817.095 ciudadanos, segun el ultimo censo. El autor de la gesta cartografica, Brandon Martin-Anderson, es un estudiante del instituto Tecnologico de Massachusetts que pretendia mostrar las concentraciones de los asentamientos al margen de las fronteras administrativas. En esta web llamada bmander.com, en el apartado del mapa en cuestion (Census Dotmap), puedes navegar por esta representacion interactiva de los habitantes de Norteamerica.


visitar Census Dotmap



leer articulo ➨

. ,

Blogger incorpora (por fin) un formulario de contacto

3 comentaron

Los usuarios lo llevabamos esperando mucho tiempo y al fin ha llegado. Blogger ha incorporado un gadget nuevo, un formulario para que nuestros lectores/visitantes puedan ponerse en contacto con nosotros sin necesidad de depender de servicios externos. Esta pensado para ponerlo en la sidebar de nuestro blog como cualquier otro gadget, se adapta al diseño de nuestro blog automaticamente y de momento cuenta con 3 casillas a rellenar, la del nombre, la de la direccion de correo y otra para el mensaje. Por el momento no nos deja manejar opciones ni subir archivos, aunque mas adelante puede que si.


Para acceder al formulario, te diriges a Diseño > Añadir un gadget y, en el menu de la parte izquierda seleccionas Mas gadgets y ahi te aparecera como puedes ver en la imagen de abajo. Como he dicho antes, este formulario esta preparado para ponerlo en la sidebar, pero si quieres añadirlo en una pagina estatica y personalizarlo un poco con CSS, te recomiendo que leas este articulo de Oloblogger.




leer articulo ➨

. ,

Widget de clasificaciones de Moto GP

comentar

¿Eres seguidor/a de las carreras de motos? Si es asi, este widget te interesara para ponerlo en tu blog o web. Se trata de la clasificacion de la competicion de motociclismo mas importante del mundo: Moto GP. Este panel te muestra las posiciones y los puntos, se actualiza automaticamente en cada carrera, y si pinchas en uno de los nombres de los pilotos, se abrira una ventana nueva dandote informacion sobre el.






Si quieres ponerlo en tu pagina, copia el siguiente codigo y pegalo alli donde quieras mostrarlo.






leer articulo ➨

.

Darle la vuelta a una imagen con CSS3

3 comentaron

Seguramente much@s de vosotr@s habreis visto como mover, rotar o animar imagenes a base de codigo CSS3. Pero quizas, tal vez no sepais que con los estilos tambien podemos darles la vuelta, o sea, digamos que las 'giramos del reves' utilizando las propiedades filter: FlipH y transform: scaleX.

Y como se suele decir, mas vale una imagen que 1000 palabras, en este caso tres. 3 Ejemplos en los que podeis ver lo que os he contado. Las imagenes de la izquierda son las originales y las de la derecha las 'volteadas'.







Si quereis utilizar este metodo con alguna imagen, tan solo teneis que copiar y pegar el siguiente codigo, añadiendo la direccion URL de la imagen donde esta indicado en color rojo.

<img class="vuelta" src="URL DE LA IMAGEN">

<style>
.vuelta {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}
</style>


leer articulo ➨

. ,

Iconos sociales 'Soft Gray'

comentar



De la mano de Red Kite Creative nos llega este pack de elegantes iconos sociales gratuitos con un tono plateado gris difuminado. Este paquete consta de 56 iconos en formato PNG en 5 tamaños diferentes de practicamente la totalidad de las redes mas importantes del panorama en internet.


descargar los iconos ⇩


leer articulo ➨

.

Feliz dia de la Madre 2013

comentar



Como todos los años, el primer domingo de mayo celebramos el dia de la madre. Sin duda un bonito homenaje a todas las madres que se desviven y preocupan por sus hijos e hijas. Desde aqui y con miles de besos desde el corazon, felicidades mama.



leer articulo ➨

.

Web que te muestra como seras dentro de 20 años

comentar



In20years es una web en la que puedes subir tu foto y con el detector de rostros avanzado y tecnologia de morphing que cuenta, automaticamente apareceras envejecido unos 20 años. Basicamente, la aplicacion lo que hace es cambiar la tonalidad del color de la foto, arrugar la piel, aumentar las sombras y otras funciones mas que nos permite saber como nos veremos dentro de dos decadas. Para acceder no necesitas registro alguno, tan solo tienes que marcar si eres hombre o mujer, si tienes mas de 20 o mas de 30 años, si tomas drogas o no (curiosa opcion) y hacer click en el boton ➨ .......................................................... para subir tu foto. A los pocos segundos aparecera tu imagen lista para descargar.


visita In20years

leer articulo ➨

.

Menu con forma de cartel giratorio

2 comentaron

Aprovechando las virtudes y posibilidades que ofrece el CSS3, os traigo este menu con un original diseño y sin necesidad de utilizar ninguna imagen. Como ya he indicado en el titulo de esta entrada y podeis observar, este menu tiene forma de cartel urbano, con su barra de metal correspondiente. Cuando lo vemos aparece con una perspectiva como si lo vieramos 'de lado' y al pasar el cursor del raton sobre el, gira hacia nosotros viendolo completamente 'de frente'. El resultado lo teneis aqui aqui abajo, pasad el raton y vereis el efecto giratorio a ver si os mola.
Menu
Enlace
Enlace
Enlace
Enlace
Si te gusta y quieres ponerlo en tu blog o web, tan solo tienes que copiar el siguiente codigo y pegarlo alli donde quieras mostrar el menu. Sustituye donde pone LINK por las urls que desees, y donde pone TEXTO ENLACE por el texto a mostrar en cada enlace. Si quieres añadir mas, escribe la la linea <a href="LINK">TEXTO ENLACE</a><br /> tantas veces como quieras a continuacion de las otras, por el contrario si deseas poner menos enlaces, elimina las lineas correspondientes.
ver codigo
<div class="wrap"><div class="sb"><div class="cartel"><div class="box">Menu<hr>
    <a href="LINK">TEXTO ENLACE</a><br />
    <a href="LINK">TEXTO ENLACE</a><br />
    <a href="LINK">TEXTO ENLACE</a><br />
    <a href="LINK">TEXTO ENLACE</a><br />
    <a href="LINK">TEXTO ENLACE</a><br />
</div></div></div></div><div class="barra"></div>

<style>
.barra {
background: #070405;
background: -moz-linear-gradient(left, #070405 0%, #29b0df 50%, #070405 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#070405), color-stop(50%,#29b0df), color-stop(100%,#070405));
background: -webkit-linear-gradient(left, #070405 0%,#29b0df 50%,#070405 100%);
background: -o-linear-gradient(left, #070405 0%,#29b0df 50%,#070405 100%);
background: -ms-linear-gradient(left, #070405 0%,#29b0df 50%,#070405 100%);
background: linear-gradient(to right, #070405 0%,#29b0df 50%,#070405 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#070405', endColorstr='#070405',GradientType=1 );
width: 10px;height: 420px;
position: relative;z-index:1;
bottom: 220px;left: 70px;
border-top: 3px solid #000000;border-bottom: 3px solid #000000;
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
.wrap {
top: 10%;
right: 5px;
height: 80%;
}
.sb{
position: relative;
top: 50px;
perspective:800px;
}
.cartel{
width: 150px;padding-bottom:10px;
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.8) 98%, rgba(0,0,0,0) 99%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.65)), color-stop(98%,rgba(0,0,0,0.8)), color-stop(99%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.8) 98%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%);
background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.8) 98%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%);
background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.8) 98%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%);
background: radial-gradient(ellipse at center,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.8) 98%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
color: #d9d9d9;
text-align: center;
border: 1px solid #000000;
border-radius: 7px;z-index:2;
box-shadow: 0 0 9px #04E9FA inset;
transform: rotateY(95deg) ;
transition: transform 0.5s;
}
hr{
  width: 100%;
  border: 1px solid rgba(41,276,223,.3);
}
.cartel:hover{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.cartel a:hover{
color:#A9F5F2 !important;}
.cartel a {
color:#F5F6CE !important;}
.selected:after {
content: "";
color: #ff0;
display: block;
position: absolute;
left: 40%;
top: 90%;
}
.box{
  margin: 15px;
  font-size: 1.5rem;
}
</style>
leer articulo ➨

. ,

Pon el canal Euronews en tu blog

comentar

Si te gusta seguir toda la informacion y noticias de ultima hora que se producen en Europa y en el resto del mundo, el canal de television Euronews (en ingles) es una de las mejores opciones. Ademas, si quieres ponerlo en tu blog o web, la pagina Streamago nos proporciona el codigo listo para copiar y pegar para que incrustemos el reproductor en nuestro sitio.












leer articulo ➨

. ,