Reverse ellipsis multiline: mostrar las últimas líneas de texto con ellipsis al inicio

Reverse ellipsis multiline: mostrar las últimas líneas de texto con ellipsis al inicio

Por 2 Comentarios
Reverse ellipsis multiline: mostrar últimas líneas con ellipsis inicial

El mostrar los típicos puntos suspensivos para indicar que hay más texto del mostrado es algo sencillo de lograr utilizando sólo Css. Todo se reduce al uso de la declaración text-overflow: ellipsis; en una caja con tamaños fijado e impidiendo su desborde.

Por si eres nuevo en el blog, lo veíamos allá por Mayo de 2012 en el artículo Guiones - y puntos suspensivos... automáticos con Css en los cortes de palabras.

Con posterioridad también publicaba algunas variaciones con sus demos a este recurso: Text-overflow:ellipsis en cualquier línea elegida a voluntad y sólo en ella. Otro post fue el dedicado a rellenar con puntos o guiones el espacio libre de la última línea.

Leer: Reverse ellipsis multiline: mostrar las últimas líneas de texto con ellipsis al inicio

Cómo evitar el salto lateral del contenido al aparecer el scroll vertical

Por 0 Comentarios
Cómo evitar el movimiento lateral entre páginas con y sin scroll vertical

Centrar en la horizontal una página con margin: 0 auto; tiene un pequeño efecto poco grato en una circustancia: en algunos navegadores fuerza un pequeño salto o desplazamiento lateral del contenido a la izquierda al aparecer la barra de scroll vertical.

Esto ocurre tanto al navegar entre páginas (al pasar de una página "corta" sin scroll a otra que sí lo tenga) o en la misma página si el scroll-Y aparece después de cargada y dibujada la página.

Este efecto de salto o desplazamiento horizontal es especialmente molesto si el scroll aparece al realizarse alguna transformación (transform) por ser el salto cíclico o intermitente: "ahora sí ahora no, ahora sí ahora no..."

Leer: Cómo evitar el salto lateral del contenido al aparecer el scroll vertical

No llamarás "responsive type" al uso de "viewport units" si sabes de lo que hablas

Por 4 Comentarios
No llamarás "responsive type" al uso de viewport units si sabes de lo que hablas

De un tiempo a esta parte y cada vez con más frecuencia se está utilizando la expresión responsive type asociada al uso de las unidades relativas al "viewport" para declarar el tamaño de las tipografías o fuentes en la declaración font-size

No son pocos los artículos en los que cuelan la expresión responsive type de forma tan alegre y acrítica. Igual que en demos y ejemplos.

Gran descubrimiento para los "setólogos" del Css. Ya tienen un nuevo especimen para su comercialización. ¡Hurra!

Leer: No llamarás "responsive type" al uso de "viewport units" si sabes de lo que hablas

Bordes giratorios: caminitos de hormigas

Por 1 Comentario
Jugando con bordes: caminito de hormigas

Sigamos jugando con bordes. En esta ocasión una demo en la que los segmentos de los cuatro bordes van desplazándose alrededor del elemento.

En esta ocasión, como estamos jugando con un único elemento y los bordes no son suceptibles de desplazar (animar) a lo largo de su lado hay que recurrir a simularlos. Lo que ves no son realmente bordes.

Los falsos bordes están construidos realmente con fondos aprovechando que algunas de las propiedades del grupo background admiten múltiples valores y animaciones se consigue el efecto visual que puedes ver en el siguiente pen.

La ventaja de usar fondos para "crear" los bordes es que podemos dimensionarlos y colocarlos para que el resto de la caja permita ver lo que hay debajo de ella.

Leer: Bordes giratorios: caminitos de hormigas