;  MY LIFE: EFECTOS EN IMÁGENES CON CSS POLAROID

10 mayo 2015

EFECTOS EN IMÁGENES CON CSS POLAROID


Para darle a tus fotos un  EFECTO POLAROID en una única entrada tendremos que hacer lo siguiente:







1. En primer lugar, en las Opciones de Configuración de la Entrada, tendremos que seleccionar "Interpretar el HTML escrito" y, para evitar posibles problemas, en Saltos de línea seleccionaremos "Pulsar Intro para los saltos".

2. Una vez hecho esto simplemente tendremos que añadir desde la parte HTLM de la entrada el siguiente código.

.post-body img{
background-color:white;
padding:10px 10px 50px 10px;
border:1px solid #BFBFBF;
box-shadow:10px 10px 30px rgba(0, 0, 0, 0.8);

Entre las etiquetas STYLE: ponemos al principio el style entre < > y al final la etiqueta de cierre que es el style entre </ >.


3. Subimos las imágenes que queramos del modo habitual

4. Para ver el efecto tendremos que ir a Vista previa porque aunque pasemos a Redactar el efecto no se ve.


Podéis encontrar más opciones para este tipo de imagen, como rotar o poner texto, aquí.



A tener en cuenta:

1. Si el fondo de vuestro blog es blanco se verá sombra pero el efecto perderá. Podéis cambiar el color del marco eligiendo  el color  que queráis y poniéndolo en background-color (es decir modificaremos white). Si no modificamos el color del border recordar que seguirá saliendo como en el ejemplo e igual no queda bien con el nuevo color de fondo que habéis dado. Simplemente modificar el código HTML de color y ya está.

2. Si queremos darle más grosor al marco modificaremos el padding, siempre teniendo en cuenta que para que el efecto quede bien debemos seguir mismas proporciones que en el código, todos los lados del mismo tamaño menos el de abajo que es mucho mas ancho para que quede como una foto Polaroid.

Hacer vuestras pruebas y ya me contáis.

Un saludo.