CSS de impressão no fechaTag

Acabo de criar um CSS de impressão para este blog. Levei uns dez minutos.

O código ficou assim:

form,#sidebar,iframe,#otop,#respond,.navigation,.rec6,.linkk{
display:none;
}
h2{
margin:0;
}
.entry{
line-height: 150%;
}
#header h1{
margin:0;
padding:0;
font-size:24px;
}
#header .description{
padding:0;
}
h2{
padding:40px 0 0;
margin:0;
}

E o resultado:

Em suma: você esconde tudo o que não pode ser usado ou não faz sentido no papel (menus, formulários, etc.) e tenta não atrapalhar o usuário. Aliás, não dá para fazer muito mais do que isso. Os mecanismos de impressão dos navegadores foram feitos para simplificar as páginas e economizar tinta.

Fácil, não?


15 respostas para “CSS de impressão no fechaTag”

  1. Avatar de Junior

    E akela parada no topo? página 1 de 1.. dá pra tirar?

  2. […] Vendo um post no blog fechaTag, resolvi explicar como fazer um estilo CSS que será usado apenas na hora da impressão. […]

  3. Avatar de Adriano Bonat

    Mandei imprimir para arquivo aqui e não funcionou, olhei no código da página e também não existe CSS para impressão.
    Outra coisa, não seria melhor usar pt (points) ao invés de px (pixel)?

    Até mais.

  4. Avatar de Davis

    Cara, você salvou minha vida! 😀

    Muito bacana, gostei e já vou aplicar!

  5. Avatar de JulioGreff

    Nunca tinha pensado em fazer isso, embora parecesse muito fácil… Belo trabalho, vou me basear nele pra implementar algo parecido no meu blog. Muio legal.

  6. Avatar de Yalli Oliveira

    Bacana bacana… qualquer dia desses eu implemento algo com um css só para o print.

  7. Avatar de Vinícius de Figueiredo

    É sempre uma boa. Vou fazer isso para meus sites!

  8. Avatar de Carlos Eduardo

    Talvez eu só tirasse o visual dos links, ou seja, cor azul e o sublinhado…

    Outra questão estaria na unidade utilizada para as fontes, pois acho mais ‘seguro’ utilizar “pt” mesmo, já que o tamanho em pixels pode variar no resultado da impressão… Utilizando pontos nós temos certeza do modo pelo qual será impresso 🙂

  9. Avatar de Thiago Machado

    É prático, muito prático!

  10. […] YouTube Link to Article firefox CSS de impressão no fechaTag » Posted at fechaTag – XML, XHTML, CSS, Tableless, Desenvolvimento Web, Python, Linux on Friday, July 06, 2007 Acabo de criar um CSS de impressão para este blog. Levei uns dez minutos. O código ficou assim: form,#sidebar,iframe,#otop,#respond,.navigation,.rec6,.linkk{ display:none; } h2{ margin:0; } .entry{ line-height: 150%; } #header h1{ margin:0; padding:0; font-size:24px; } #header .description{ padding:0; } h2{ View Entire Article » […]

  11. Avatar de Aguinelo Pedroso

    Perfeito Élcio, muito bom mesmo, simples e rápido.

  12. Avatar de camilo vitorino da costa
    camilo vitorino da costa

    nossa, não sabia que tão poucas pessoas sabiam desse esquema de CSS para impressão…..

    enfim, todo Site tem de ter 2 coisas fundamentais: CSS para apresentação e CSS para impressão 🙂

    Agora sim seu site tem os dois!! abraço

  13. Avatar de Fill

    AUhUAh a ultima informação que eu tinha é que isso so funcionava no IE… O FF ta com suporte agora? Gostei do meu coment ali na imagem =)

  14. Avatar de silici0

    Fica a dúvida!!!

    Faz isso como? Gera uma outra página so com esse estilo ou tem algum comando que desabilita o estilo padrão!?

    Abraços

  15. Avatar de silici0

    Poxa, adorei a idéia de montar tudo isso pelo css, adorei a idéia, vou utiliza-la para meus sistemas.

    hehehe

    Valeuz 😛

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *