Nenhum produto encontrado nessa seleção.
Recentemente, um cliente me pediu para criar um tema para um site de poemas. Nele não haveria barra lateral, apenas texto e imagens, e um menu superior simples. Então ele me pediu para ver o que eu podia fazer para dar um toque a mais nesse layout tão simples.
Meu primeiro pensamento foi focar na tipografia, ou seja, escolher uma fonte agradável para leitura, que funcione bem tanto em dispositivos móveis quanto em desktops.
Depois de alguns testes, percebi que ainda faltava algo, o site parecia realmente muito simples, sem emoção nenhuma.
Foi aí que tive a ideia de fazer com que as imagens ficassem na largura da página, porém, manter o texto em um tamanho fixo alinhado ao centro da tela.
Achei muito interessante o resultado, veja um exemplo que fiz no Codepen para entender sobre o que estou falando.
Depois de alguns testes, achei que a solução acima ficou mais simples, direta, e sem nenhum truque (leia-se gambiarra).
No tutorial abaixo vou explicar o que foi que fiz com o CSS. Você vai ver que não tem nenhum segredo.
Imagem com largura máxima dentro do post
Normalmente, quando temos posts em qualquer plataforma (seja Blogger, WordPress, Joomla, Drupal, site criado por você mesmo), a estrutura HTML é mais ou menos assim:
<div class="texto"> <h1>Título principal</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id auctor nibh, non euismod sem. Aenean vehicula mattis mauris vitae malesuada. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id auctor nibh, non euismod sem. Aenean vehicula mattis mauris vitae malesuada. </p> <div class="pai_imagem"> <img src="http://www.todoespacoonline.com/w/wp-content/uploads/2014/07/cookies-em-php.jpg" alt="titulo"> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id auctor nibh, non euismod sem. Aenean vehicula mattis mauris vitae malesuada. </p> </div>
Ou seja, nada mais do que um elemento pai envolvendo tudo o que está no artigo. Parágrafos, títulos, imagens e o resto.
Se você conseguir capturar a classe do elemento que envolve as imagens, melhor ainda, assim não terá que alterar nada no texto.
Para que as imagens fiquem com 100% da largura da tela, e o texto alinhado ao centro utilizando CSS, podemos definir a largura do elemento pai em 100%, e o que estiver dentro dele em 50%. (Lembre-se de utilizar box-sizing: border-box;).
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: #333;
}
.texto{
width: 100%;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 21px;
line-height: 1.5;
padding: 20px 0;
margin: 20px 0;
}
.texto * {
max-width: 50%;
margin: 0 auto;
}Agora é só acertar a imagem e seu elemento pai para a largura de 100%, sobrescrevendo a regra anterior.
@media only screen
and (max-width : 767px) {
.texto * {
max-width: 90%;
margin: 0 auto;
}
}
.texto img {
max-width: 100%;
margin: 1em auto;
}
.texto .pai_imagem {
max-width: 100%;
}Neste caso, estamos confiando na especificidade CSS.
Veja novamente um exemplo do que foi descrito no artigo acima:
Caso tenha melhores soluções, deixe nos comentários. Será de grande utilidade para todos.
