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?
06/07/2007 at 12:20
Poxa, adorei a idéia de montar tudo isso pelo css, adorei a idéia, vou utiliza-la para meus sistemas.
hehehe
Valeuz
06/07/2007 at 12:22
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
06/07/2007 at 13:14
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 =)
06/07/2007 at 13:19
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
06/07/2007 at 13:21
Perfeito Élcio, muito bom mesmo, simples e rápido.
06/07/2007 at 14:45
[…] 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 » […]
06/07/2007 at 16:11
É prático, muito prático!
06/07/2007 at 16:52
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
06/07/2007 at 20:57
É sempre uma boa. Vou fazer isso para meus sites!
07/07/2007 at 0:39
Bacana bacana… qualquer dia desses eu implemento algo com um css só para o print.
07/07/2007 at 12:27
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.
07/07/2007 at 17:27
Cara, você salvou minha vida!
Muito bacana, gostei e já vou aplicar!
08/07/2007 at 15:30
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.
09/07/2007 at 8:34
[…] Vendo um post no blog fechaTag, resolvi explicar como fazer um estilo CSS que será usado apenas na hora da impressão. […]
18/07/2008 at 2:21
E akela parada no topo? página 1 de 1.. dá pra tirar?