iamfrontend
Eta
Redactor
Verificación en dos pasos activada
Verificado por Whatsapp
Hoy les quiero mostrar algo que uso mucho, al momento de trabajar, ya que soy Desarrollador Web.
Cuando estamos haciendo una página web, a veces necesitamos llenar espacios, por ejemplo el de un bloque de adsense que irá en cierta zona de nuestra web, pero es muy tedioso, creo yo, ir a photoshop y hacer una imagen de ciertas dimensiones para llenar dicho espacio.
Existen muchas formas de hacer esto en solo segundos, librerías para crear imágenes del lado del cliente o servicios que generan automáticamente la imagen con tan solo usar una url con parámetros.
Holder.js // Es una librería de Javascript.
¿Cómo funciona?
Simplemente debemos escribir en el apartado del src="" de nuestra imagen holder.js/300x200, las dimensiones en ancho y alto de nuestra imagen y listo.
Ejemplo: <img src="holder.js/300x200">
Página oficial
Placehold.it // Es un script que funciona por parámetros, en el cual no debemos agregar librería algúna a nuestro código.
¿Cómo funciona?
Placehold, funciona mediante parámetros que nos permiten agregar texto, color, tamaño y formato.
Definir tamaño de imagen
Simplemente agregamos a la url las dimensiones como parámetro, primero ancho y después alto.
Ejemplo: Placehold.it - Quick and simple image placeholders350x150
Agregar texto a la imagen
Para añadirle texto a la imagen, demos agregar como parámetro: &text=nuestro+texto
Ejemplo: http://placehold.it/350x150&text=nuestro+texto
Definir formato de imagen
Podemos definir un formato de imagen, ya sea JPG, PNG, GIF, JPEG. Añadiengo al final &.formato
Ejemplo: http://placehold.it/350x150&text=nuestro+texto&.png
Añadir color
El script también nos permite añadir color a nuestra imagen, agregando después de las dimensiones /primercolor/segundocolor
Ejemplo: http://placehold.it/350x150/ffffff/000000&text=nuestro+texto
Página oficial
:encouragement: Saludos a todos, espero les sirva 😛8:.
Cuando estamos haciendo una página web, a veces necesitamos llenar espacios, por ejemplo el de un bloque de adsense que irá en cierta zona de nuestra web, pero es muy tedioso, creo yo, ir a photoshop y hacer una imagen de ciertas dimensiones para llenar dicho espacio.
Existen muchas formas de hacer esto en solo segundos, librerías para crear imágenes del lado del cliente o servicios que generan automáticamente la imagen con tan solo usar una url con parámetros.
Holder.js // Es una librería de Javascript.
¿Cómo funciona?
Simplemente debemos escribir en el apartado del src="" de nuestra imagen holder.js/300x200, las dimensiones en ancho y alto de nuestra imagen y listo.
Ejemplo: <img src="holder.js/300x200">
Página oficial
Placehold.it // Es un script que funciona por parámetros, en el cual no debemos agregar librería algúna a nuestro código.
¿Cómo funciona?
Placehold, funciona mediante parámetros que nos permiten agregar texto, color, tamaño y formato.
Definir tamaño de imagen
Simplemente agregamos a la url las dimensiones como parámetro, primero ancho y después alto.
Ejemplo: Placehold.it - Quick and simple image placeholders350x150
Agregar texto a la imagen
Para añadirle texto a la imagen, demos agregar como parámetro: &text=nuestro+texto
Ejemplo: http://placehold.it/350x150&text=nuestro+texto
Definir formato de imagen
Podemos definir un formato de imagen, ya sea JPG, PNG, GIF, JPEG. Añadiengo al final &.formato
Ejemplo: http://placehold.it/350x150&text=nuestro+texto&.png
Añadir color
El script también nos permite añadir color a nuestra imagen, agregando después de las dimensiones /primercolor/segundocolor
Ejemplo: http://placehold.it/350x150/ffffff/000000&text=nuestro+texto
Página oficial
:encouragement: Saludos a todos, espero les sirva 😛8:.
Última edición: