ir arriba
Google

Insertar imagen detrás del texto de una entrada del blog

Si queréis redactar un post especial o remarcar una parte de un post de una forma especial aqui os traigo un recurso para hacer de esa entrada algo diferente a lo que teneis acostumbrados a vuestros visitantes, un aspecto muy importante es que utiliceis imágenes en las que la legilibidad del post no resulte alterada, un post que no se pueda leer es un visitante que se va sin saber lo que habeis escrito.


Aquí podeis ver el resultado del efecto que os voy a explicar a continuación





Si queréis redactar un post especial o remarcar una parte de un post de una forma especial aqui os traigo un recurso para hacer de esa entrada algo diferente a lo que teneis acostumbrados a vuestros visitantes, un aspecto muy importante es que utiliceis imágenes en las que la legilibidad del post no resulte alterada

Analicemos el código; El código tiene las siguiente variables que podeis utilizar para personalizar el post;
  • Widht--->Ancho del post (os recomiendo utilizar 600 px, ya que normalmente es el ancho de los posts)
  • height--->Altura del post (personalizar según la altura del post)
  • barckground---> Url de la imagen (la imagen que vayais a utilizar alojada en cualquier servicio de alojamiento de imagenes y el código que nos proporcionan en forma de url en estos servicios", podeis utilizar imageshack para este fin (entre otros)
  • bgcolor---> Si quereis utilizar el color como fondo del post lo debereis indicar aqui en forma de código (ej. #ffffff) y dejar el campo background, osea omitir el paso anteior que hemos explicado.
  • Border y bordecolor---> Es el "borde" del post podéis darle valores de 1 a lo que queráis y el siguiente valor el color de este (deberéis añadir según código de colores, ya sabéis #valor alfanumerico como #ffffff que pertenece al color blanco.Es importante destacar que estas propiedades no son visibles en navegadores como mozilla firefox.
¿Que imagen podemos usar?
Si utilizais una imagen pequeña comoun icono por ejemplo os puede quedar así
escribir aqui un texto

o el ejemplo anterior que utilizamos la siguiente imagen estas imágenes pequeñas se repetiran hasta rellenar todo el espacio, por lo que unas imágenes muy a tener en cuenta en este tipo de post son las que nos ofrece el servicio everyday icons
Por el contrario si utilizais imagenes de mayor tamaño el efecto que os queda es tal que así;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vel tellus eu mauris tempor fermentum. Nunc ipsum. Pellentesque sodales commodo lacus. Integer turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam suscipit, mauris at adipiscing interdum, erat tellus faucibus risus, sed lacinia odio libero nec leo. Suspendisse potenti. Quisque eu turpis et dui viverra aliquam. Fusce et metus. Vivamus sollicitudin urna sagittis lectus pretium ultricies. Integer rhoncus viverra pede. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vel libero. Vivamus vehicula bibendum orci. Suspendisse sit amet mi eget lorem congue cursus.

Sed porta neque non odio ullamcorper gravida. Fusce nisl augue, fringilla eu, eleifend nec, iaculis in, magna. Proin non enim. Etiam tempus vestibulum diam. Morbi sagittis. Maecenas dictum lacus. Curabitur ultricies erat eu felis. Sed ut mi. Sed congue, massa lacinia molestie cursus, justo dui tristique erat, sit amet facilisis nisi lacus varius erat. Ut ac libero consectetuer enim imperdiet porta. Aenean vel velit vitae nunc vestibulum tincidunt. Cras enim risus, aliquam venenatis, commodo ac, tincidunt et, felis. Integer ornare eleifend elit. Etiam eleifend, leo nec auctor scelerisque, augue velit accumsan nunc, id porta lorem ante sed libero. Nam ullamcorper dui et quam. Proin metus risus, tempor at, iaculis a, dictum nec, ligula. Nullam ultricies.
Nam ante neque, lobortis eu, fringilla adipiscing, ullamcorper nec, arcu. Curabitur eget enim ut dui pulvinar tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id augue. Praesent ultrices, pede quis eleifend placerat, mi dui imperdiet ipsum, dignissim aliquam nibh justo ac ligula. Nam justo metus, adipiscing eget, fringilla id, porttitor ornare, orci. Maecenas metus est, vestibulum vel, laoreet eu, feugiat vitae, nisl. Nam tincidunt. Nulla non nisl porttitor nunc vestibulum interdum. Nam mi nulla, dapibus vel, vestibulum vitae, egestas vel, enim. Nulla eu odio pharetra nisl tempus tristique. Sed blandit. Mauris ac mi. Etiam rutrum iaculis sapien.




  • Como último consejo a tener en cuenta tener en cuenta al usar este recurso que la legilibidad para el lector sea óptima. Usar esta relación, fondo oscuro, fuente clara; fondo claro, fuente oscura.

Enlaces que puedes necesitar para realizar es truco;

2 comentarios:

jhose dijo...

hey, su sitio ya está en mis favoritos, es muy útil para ir empezando con esto de html. ahora necesito digerir todo esto, voy a recomendar su blog.

;0) dijo...

Poco a poco, ya verás como dentro de poco haces cosas que ni te imaginabas...Saludos y gracias por tu visita

Ultimos Posts

Enlazáme

O puedes tambier copiar y pegar las siguientes opciones; elige la que mas te guste!! Trucos blog ( Esta última simplemente selecciona el enlace y copia y pega en tu espacio )