Pesquisar na Comunidade
Mostrando resultados para as tags ''pinterest''.
Atualmente, o índice de pesquisa está sendo processado. Os resultados atuais podem não estar completos.
Encontrado 1 registro
-
css Tuturial de fazer um site tipo Pinterest
kaway404 postou um tópico no fórum em Desenvolvimento Web
Olá pessoal , vou ensinar a como fazer uma div centralizar e ter um tanto de div por linha! Você cria uma <section> Dentro dessa section você poe as div e a img e um p E agora vamos pro css [/center] <section> <div> <img src="[Hidden Content]; <p>Não é possível esperar a criatividade chegar. Por isso, este infográfico vai te ajudar a conceber ideias com mais naturalidade.</p> </div> <div> <img src="[Hidden Content]; </div> <div> <img src="[Hidden Content]; <p>Não é possível esperar a criatividade chegar. Por isso, este infográfico vai te ajudar a conceber ideias com mais naturalidade.</p> </div> <div> <img src="[Hidden Content]; </div> <div> <img src="[Hidden Content]; </div> <div> <img src="[Hidden Content]; <p>Não é possível esperar a criatividade chegar. Por isso, este infográfico vai te ajudar a conceber ideias com mais naturalidade.</p> </div> <div> <img src="[Hidden Content]; <p>Não é possível esperar a criatividade chegar. Por isso, este infográfico vai te ajudar a conceber ideias com mais naturalidade.</p> </div> <div> <img src="[Hidden Content]; </div> <div> <img src="[Hidden Content]; <p>Não é possível esperar a criatividade chegar. Por isso, este infográfico vai te ajudar a conceber ideias com mais naturalidade.</p> </div> <div> <img src="[Hidden Content]; </div> <div> <img src="[Hidden Content]; </div> <div> <img src="[Hidden Content]; <p>Não é possível esperar a criatividade chegar. Por isso, este infográfico vai te ajudar a conceber ideias com mais naturalidade.</p> </div> </section> [center] <style>[/center] body { background: #F6F9FC; margin: 20px; } section { max-width: 600px; margin: 0 auto; column-count: 3; } @media (max-width: 400px) { section { column-count: 2; } } div img { display: block; max-width: 100%; } div { background: white; margin-bottom: 20px; border-radius: 4px; box-shadow: 0 2px 6px rgba(50,50,90,.1); break-inside: avoid-column; overflow: hidden; } div p { padding: 10px; font-family: sans-serif; color: #6B7C93; font-size: .875em; line-height: 1.4em; } [center]</style> Exemplo: comumn-count = quantidade de div por linha margin:0 auto = centralizar no meio O tuturial não é totalmente meu! Mas é apenas para o entendimento da nova propriedade de CSS Agradeça por favor :3
