Muchas de las técnicas para hacer hojas de estilo que permitan imprimir correctamente nuestra web producen una salida que no se parece en nada a lo que se muestra en pantalla. Esto suele confundir al usuario y le produce la impresión de que ha imprimido una pagina distinta.
En ErraticWidsom nos enseñan a hacer hojas de estilo para impresión mantiendo la lÃnea de diseño que se ve en pantalla.
VÃa / Digg
We’re already familiar with the 12- and 16-column variants of 960.gs, but did you know that a 24-column alternative exists too? In this article, you’ll master the 960 grid system by dissecting the 24-column version demo. If you’ve only used 960gs before for Photoshop mockups, consider this your lucky day. By the end of this article, you’ll be able …
Cal Henderson, desarrollador jefe de Flickr, nos hace una serie de recomendaciones para agilizar nuestra web. Iré explicándolas e intentando aportar mi propio punto de vista sobre ellas, de todas formas, es algo muy recomendable para leer.
Las hojas de estilos son importantes tanto para mostrar en una pantalla común, como para mostrarlos en otros dispositivos, por ejemplo al imprimirlos.
A la hora de imprimir una página web es necesario para que la lectura sea más cómoda, pensar en los saltos de página. Para lo cual existe la propiedad page-break-before, la cual nos permite saltar de página antes del elemento.
Para ello deberemos añadir en nuestras hojas de estilo:
@media all {
.page-break { display:none; }
}
@media print {
.page-break { display:block; page-break-before:always; }
}Y en nuestra página web lo siguiente:
<div class="page-break"></div>Advanced CSS Printing — Using CSS Page Breaks
VÃa / Posh CSS
Tener un grid con todas las filas al mismo tamaño puede ser algo difícil de conseguir. El problema viene con que CSS grid toma el tamaño de las filas según el tamaño máximo de sus celdas.
Para conseguir ello es necesario que el contenido de la celda tenga posicionamiento absoluto, y jugar con ::before para simular contenido vacío que rellene la celda:
.grid {
margin: 0 auto;
width: 60vw;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
grid-auto-rows: auto;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.grid--same-height .cell {
position: relative;
}
.grid--same-height .cell::before {
content: "";
display: inline-block;
padding-bottom: 100%;
}
.grid--same-height .content {
height: 100%;
position: absolute;
margin-top: -100%;
}
Teniendo en cuenta que el HTML sería:
<div id="grid" class="grid">
<div class="cell">
<div class="content">
<img src="https://picsum.photos/500/500"/>
</div>
</div>
...
</div>Para el ejemplo uso picsum.photos, un lorem ipsum para fotos que permite indicar distintos tamaños de imágenes.
Podéis ver un ejemplo en este pen
Un efecto llamativo que se suele hacer con Flash es realizar una transición entre dos imágenes cuando se posiciona sobre ella.
El efecto es sencillo, disponemos de una cabecera (H1) en el que hay un elemento con posicionamiento absoluto y que contiene la imagen final, y un enlace (el que se suele usar para ir al home) que tiene la imagen original mediante estilos.
El proceso es el siguiente: cuando se posiciona el ratón sobre el enlace se crea efecto fadeout y cuando se sale se crea el efecto fadein. Ambos efectos se hacen con tiempo de retardo para dar continuidad.
Todo el código en el post original.
Creating a fading header
Vía / CSS Globe
El que los navegadores antiguos o IE no acepten etiquetas HTML5 no suele ser un problema a la hora de mostrarlas, el problema viene a la hora de aplicar estilos e IE que no le aplica los estilos, ya que IE ignora las etiquetas.
header { /* sus estilos */ }
section { /* sus estilos */ }
footer { /* sus estilos */ }Para ponerle solución, se puede crear un elemento dinamicamente antes de aplicar los estilos, y por arte de magia (o desesperación) tendrá los estilos al elemento.