Ir al contenido principal

Entradas

Mostrando entradas de septiembre, 2012

Efecto Páginas detrás con box-shadow

Tips y Tutoriales para Blogger

Habrás visto en algunos sitios algo parecido a esto que te voy a mostrar. Puedes aplicar este efecto a cualquier cosa y en realidad le dejará un buen toque de originalidad. Se trata de simular sombras que están detrás del elemento, que parecen ser páginas. Esto lo podés aplicar tanto en imágenes como en contenedores, como el cuerpo de entradas de tu plantilla. Lo principal para aplicar el efecto es aplicar una clase al elemento, como las imágenes o contenedores, o buscar el ID del contenedor de tu plantilla que quieras aplicar el efecto, como Blog1 , que es el contenedor principal de las entradas. .imagen-sombra { box-shadow: 0 10px 0 -5px #E4E4E4,                      0 20px 0 -10px #D5D5D5; margin-bottom:15px; padding:0; } Debes reemplazar .imagen-sombra con un # seguido del ID del contenedor. Y en el HTML utilizamos (para una imagen) <img class='imagen-sombra' src=' url-imagen '/> Y ya lo obtenemos, pero si la imagen es más oscura, quisiéramos que la

Fondo con efecto Parallax para tu blog

Tips y Tutoriales para Blogger

Navegando por la web encontré este genial generador de fondos con efecto Parallax. Para comprender el aspecto de este efecto, mira este blog de pruebas . Es muy sencillo de aplicarlo en tu sitio, y para que no te sea tan dificil generar el código, acá te muestro el tutorial para utilizar este generador. Ingresa a Web Features - Parallax Background Builder  y elige la primera opción que permite crear un fondo general, es decir que se aplica al fondo principal. Para evitar conflictos con la imagen de fondo de tu blog, si es que la tienes, elige el color transparente para la capa del fondo. Para agregar más capas , utiliza el botón en la esquina: Se abrirá una ventana donde deberás insertar el URL de la imagen , o también puedes elegir una de la galería que te ofrece el generador. En la barra derecha, puedes elegir el modo de la imagen, puede ser pattern , para que la imagen se repita, o image , la imagen no se repite y puedes posicionarla hacia la izquierda o hacia el bottom.