Tutorial Efecto Sencillo Para Tus Imágenes

tutorial_efecto_sencillo_para_tus_imagenes

Hola, hola como siempre antes de comenzar espero que se encuentren muy bien. Para la primera entrega de la semana va a tratar sobre un tutorial con un efecto muy sencillo para tus imágenes.

Recordarán que hubo una entrega donde explico un poco sobre como aplicar un efecto de opacidad a todas sus imágenes, aquí dejo enlace para que lo exploren un poco si lo quieren aplicar a su blog.


TUTORIAL EFECTO SENCILLO PARA TUS IMÁGENES


gif_efecto_sombreado

El tutorial es muy sencillo,y para ver el efecto sombra en la imagen de aquí arriba es un ejemplo y este efecto se aplica a todas las imágenes en general de su blog, el código es el siguiente:

 img:hover {
box-shadow: 10px 10px 10px #F5A9A9;
}



Solo se van a su área de trabajo en blogger, buscan "Tema", oprimen "Personalizar" y "Avanzado" después de avanzado buscan  "Añadir CSS" y pegan su código y con un enter hacia abajo el botón "Aplicar al blog" estará listo para guardar y para ver el proceso lo podrán ver aquí en este enlace.

captura_de_pantalla_codigo
Clic sobre la imagen para ver en tamaño real.


En las nuevas plantillas de blogger que ya vienen son totalmente responsivas y se adaptan a cualquier pantalla ofrecen características muy diferentes, son cuatro categorías. El análisis muy detallado de estas plantillas lo encontrarán en el siguiente enlace y aquí una muestra en imagen:

nuevas_plantillas_en_blogger

Para aplicar son los mismos pasos lo único que cambia es el diseñador de plantillas que en estas plantillas solo viene con 4 pestañas o secciones solo es ir explorando un poco los cambios. Oprimen "Avanzado" y buscan "Añadir CSS" y pegan su código y oprimen "Aplicar al blog": 

captura_de_pantalla_de_blogger
Clic sobre la imagen para ver en tamaño real.


Los cambios que se pueden hacer en el código son los siguientes:

img:hover { → por → post-body img:hover {
10px→ Podrán cambiar el número 10 por el número que ustedes elijan siempre que sean todos iguales.
#F5A9A9→ El color hexadecimal de su preferencia. 


Pero hay una pregunta en el aire ¿Dónde encuentro colores? es muy fácil y sencillo encontrar colores hexadecimales en la página HTML COLOR CODES encontrarán una gran variedad de colores y si no comprenden esta página, aquí en esta entrega encontrarán una pequeña guía sobre esta herramienta o en la página glosario encontrarán una gran variedad de temas en colores en las paletas de colores.

Un tutorial muy sencillo y fácil de aplicar en cualquier blog. No me enrollo más con el tema y si fue un acierto el resultado no se olviden en recomendar en sus redes sociales favoritas o suscribirse para recibir todo el contenido en su correo electrónico. Disfruten de la semana y yo los espero de este lado del blog hasta la próxima. Cuéntame....¿ Qué te pareció el tutorial?...


No hay comentarios.:

Publicar un comentario