Marcos para fotos

    Después vamos a EDICIÓN HTML y con Ctrl+F abrimos el buscador y buscamos .post-body img, nos saldrá algo como esto:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img
{padding: $ (image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); }




Empezamos con el marco, vamos hasta la línea donde dice:



border: 1px solid $(image.border.color);

     

    Aquí podemos aumentar los valores px (pixels) de border para aumentar el tamaño del marco o ponerlo a 0 para quitarlo. Y "solid" define el estilo del borde que puede ser:

SOLID

DOTTED

DOUBLE

DASHED

GROOVE

RIDGE

INSET

OUTSET

    Podemos hacer infinidad de combinaciones cambiando los valores de esta línea y los colores de fondo y de borde en PERSONALIZAR PLANTILLA>>AVANZADO>>IMÁGENES 

O podemos añadir nuevas líneas de código como esta (cada valor corresponde a un borde) que hace que los bordes queden redondeados:

border-radius: 10px 10px 10px 10px ;


O podemos escribir una línea de código para cada lado (superior, inferior, derecho, izquierdo) por separado donde #999999 corresponde al color expresado en forma hexadecimal:





border-top: 1px solid #999999 (image.border.color);
border-bottom: 1px solid #999999 (image.border.color);
border-right: 1px solid #999999 (image.border.color);
border-left: 1px solid #999999 (image.border.color);

     

  
    Vamos ahora con la sombra. Estas tres líneas son las que definen las características de la sombra, en realidad es sólo la tercera, las otras dos llevan los mismos valores y se añaden para que la sombra sea compatible con todos los navegadores. Para quitar la sombra ponemos todos los valores a 0.



-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);

    Si lo que queremos es modificarla jugamos con los valores seguidos de px: el rosa en positivo la coloca a la derecha y en negativo a la izquierda, el verde en positivo abajo y en negativo arriba y los números que asignemos indican el ancho. El azul nos marca el grado de difuminado (va de 0 transparente, a 1 opaco). ¿Y qué pasa si queremos sombra por los 4 lados de la imagen? Pues ponemos a 0 los dos primeros valores o podemos añadir un cuarto valor seguido de px.

Y con los valores de rgba cambiamos el color y la intensidad, los tres primeros números marcan el color y el cuarto la intensidad, va de 0 (transparente) a 1 (opaco). Este es el código que corresponde a la siguiente imagen:




box-shadow: 0px 0px 15px 15px rgba(0, 0, 0, .5);




Bien, ya sabemos cómo quitar y modificar la sombra ( y el marco) a las imágenes del blog, ¿pero qué pasa si lo que queremos es quitarla en algunas imágenes del blog y en otras no?
Lo primero es seguir los pasos para quitar todas las sombras, después vamos a
PERSONALIZAR PLANTILLA>>AVANZADO>>AÑADIR CCS y añadimos este código:




#sombraimg{
-webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,.1);
-moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0,.1);
box-shadow: 0px 0px 15px 5px rgba(0,0,0,.1);
}


Ahora sólo tendremos que añadir id='sombraimg' en cada imagen a la que queramos añadir la sombra. Un ejemplo:

Yo quiero poner sombra a la foto de mi entrada pero no a la imagen de la firma. Edito mi entrada y voy a HTML arriba a la izquierda, busco con Ctrl+F "img" para que me aparezcan resaltadas todas las imágenes de mi entrada y localizo la foto a la que quiero poner sombra. Añado id='sombraimg' de la siguiente manera:

<img id='sombraimg' border="0" src="URL DE MI FOTO" />


Y este es el resultado:



http://mientrascuchufletaduerme.blogspot.com/2014/10/tutorial-quitar-poner-y-modificar-marco-y-sombra-en-una-o-varias-fotos-de-blogger.html