Placehold de imagens com o placehold.it

Criado em: 02/07/2014

Quando estamos fazendo o nosso Front-end é comum ter momentos onde ainda não termos o upload de imagem funcionando por exemplo e temos que exibir uma imagem padrão. Para evitar o processo de criar uma imagem no Photoshop com as medidas exatas podemos utilizar o placehold.it que gera uma imagem para nós.

Para termos um resultado como o:

Placeholder de 350x150

Simplesmente criamos uma imagem utilizando o placehold.it da seguinte maneira.

<img alt="Placeholder de 350x150" src="http://placehold.it/350x150">

Por padrão o formato é gif, podemos alterar simplesmente passando o formato.

<img alt="Placeholder de 350x150" src="http://placehold.it/350x150.png">

Podemos passar um texto qualquer para ser renderizado, passando o parametro text.

<img alt="Placeholder de 350x150" src="http://placehold.it/350x150.png&text=Mauro">

Podemos customizar a cor do background e do texto, passando os paramêtros nessa ordem.

<img alt="Placeholder de 350x150" src="http://placehold.it/350x150.png/ffffff/000000&text=Mauro">

As cores devem ser definidas sempre depois das dimensões.

Fica aí com mais uma ferramenta para ajudar no desenvolvimento Front-end.

RSpec: Crie especificações executáveis em Ruby
Aprimore as suas habilidades enquanto escreve testes com o meu livro RSpec: Crie especificações executáveis em Ruby

Comentários

Comentários powered by Disqus