Troceado de imagen con javascript y manejo de cada parte

-
mosaico

Retomamos los efectos con imágenes. Aunque no sean más que una excusa para ensayar métodos y técnicas que alguna vez nos van a servir para proyectos más útiles.

Hace un tiempo hablamos en la comunidad Puro CSS sólo demos de las máscaras aplicadas sobre elementos simulando "cortes" o "calados" para ver el fondo (12. Text mask); y una versión que parece cortar imágenes en partes circulares podría ser ésta:

See the Pen Decomposed image in circles. (Simulation with opaque masks.) by solipsistaCP (@solipsistacp) on CodePen.

Aquí tenemos un primer ejemplo con una máscara sobre una img y otro con una hecha en el background-image del figure contenedor.

Pero al cambiar el BGColor del documento ya le vemos los piolines. El color negro solamente "parece" ser el fondo, así que si tenemos un diseño detrás, el método no sirve.

Más tarde publiqué una versión que sí transparenta una parte del elemento usando CSS blend ( Imagen con degradado...) que aún no funciona en los navegadores de Microsoft. Un equivalente a la demo anterior sería:

Troceado de imagen con javascript y manejo de cada parte | Opiniones: 1
Troceado de imagen con javascript y manejo de cada parte

Textos truncados con Css

-
Textos truncados con Css

Para Css todos los elementos del documento al que aplica generan/son una caja que los encierra o contiene y sobre el que actúan los estilos. Así es desde una simple letra en medio de la página hasta el viewport en el que se representa.

Lógicamente las particularidades de cada caja varían en función del tipo de elemento de que se trate así como también las propiedades Css que admiten y el cómo se relacionan o influyen con las otras cajas adyacentes.

Esta concepción es la base de Css y se conoce como el modelo de caja o Css box-model.

Este modelo también es de aplicación a los elementos textuales. Así, cada vez que escribes un texto, lo que estás haciendo, para css, es poner unas cajas anónimas al lado de otras:

█ ⌷ ☐ ⌷ ⌷ ☐ ⌷ ☐ ⌷ ☐ ⌷ ☐
Textos truncados con Css | Opiniones: 0
Textos truncados con Css

CSS para mejorar rendimiento del navegador: CSS containment

-
CSS para mejorar rendimiento del navegador

Verdad de perogrullo: CSS tiene declaraciones para todos los gustos. Principalmente de dos grandes tipos: estructurales y de adorno.

Y hay propiedades que para funcionar necesitan de algún tipo de recurso, por lo general ajenos al propio CSS, como archivos externos de imágenes, svg, tipográficos... étc.

Y el uso de ambas (declaraciones y recursos) inciden en el proceso de conformar la página en el lado del cliente (máquina del usuario que visita la web). Lo que se conoce como carga de la web ('carga' en el sentido de cosas transportadas).

Al aumento de esta "carga" contribuyen no sólo los archivos CSS con todo lo que contienen (su llamada y descarga, acceso a los recursos, aplicación de ellos) y el resto de elementos contenidos en la página (objetos como imágenes, vídeos..., recursos como scripts, étc). Además de ésto otro factor determinante es la aplicación de los mismos en la composición de la web y sus alteraciones a medida que el navegador los va teniendo disponibles y procesando.

Básicamente dos efectos son más que notorios y molestos a medida que aumenta "la carga": demoras y bloqueos y repaints y reflows.

CSS para mejorar rendimiento del navegador: CSS containment | Opiniones: 6

El filtro SVG feColorMatrix y su matriz: imágenes duotono o monocromáticas

- El filtro SVG feColorMatrix: cómo crear su matriz para obtener los tonos deseados

Si has seguido los artículos que he dedicado a los filtros, especialmente el dedicado a los filtros equivalentes de SVG con los de Css que usan una palabra clave habrás observado que algunos filtros nativos de SVG usan lo que se conoce como matriz de color.

Son los filtros conocidos como feColorMatrix por ser el elemento del SVG en el que se declara la matriz de color a usar por el filto.

La potencia y posibilidades que ofrecen los filtros SVG feColorMatrix basados en una matriz de color son bestiales. Pero obtener el efecto deseado primero hay que conocer el significado de cada valor de la matriz y cómo funciona.

El filtro SVG feColorMatrix y su matriz: imágenes duotono o monocromáticas | Opiniones: 0

CSS Intrinsic Sizes: tamaños en función del contenido

-
Intrinsic Sizes: El contenido de los hijos define la anchura del padre

width: min-contentCon los elementos con su display computado como "block" siempre ha habido pelea por su tendencia a ocupar todo el ancho que tengan a mano. Circunstancia que, según el caso, complica la vida del desarrollador. Más, si cabe, en la era del RWD y del mantra el contenido lo primero.

Con el tema de las anchuras de los padres y la relación que mantienen con su contenido o hijos hay unos comportamientos típicos en el modelo de caja tradicional y lo definido por la especificación CSS2.1:

  1. Si el padre es o está declarado como 'block' ocupara toda la anchura disponible, con independencia de su contenido.
  2. Esto se puede evitar si lo hacemos flotar o ser del tipo 'inline-block'. En esta situación su anchura viene definida por el elemento más ancho. O lo que es lo mismo: crecerá a medida que lo hace el hijo con mayor anchura.
  3. Recurrir al display: table/table-X
  4. Fijar la anchura del padre ya sea a un valor fijo (absoluto o relativo) o limitado con max/min-width.

Es obligado aclarar que este comportamiento (ocupación de todo el espacio disponible) es posible alterarlo con los nuevos desarrollos de CSS3 concernientes al display interior o display-inside como el flex layout, CSS Grid, Regiones CSS o incluso las multicolumnas CSS.

CSS Intrinsic Sizes: tamaños en función del contenido | Opiniones: 3

La propiedad CSS Display ¿Qué hay de nuevo, vieja?

-

Hoy te propongo un pequeño juego o reto antes de seguir leyendo este artículo. ¿Te atreves? ¿Sí? Pues vamos con él.

Pilla papel y bolígrafo o abre tu editor de textos favorito y a continuación escribe todos y cada uno de los valores que admite la propiedad de CSS DISPLAY. Pero no hagas trampas que nadie se enterará. Ni consultes documentación ni sigas leyendo antes de terminar tu lista.

TIC
TAC
TIC
TAC TicTac
¿Cuántos te salieron?

La propiedad CSS Display ¿Qué hay de nuevo, vieja?

Antes de hacer recuento de los valores posibles para la propiedad CSS display y que puedas comparar con tu respuesta un pequeño recordatorio sobre esta propiedad por si alguno lo necesita. ¿Vale?

El valor de la propiedad display es el que marca qué tipo de caja genera el elemento al que se le declara. Esto es, la naturaleza del elemento o lo que tradicionalmente se ha conocido como el Modelo de formato visual

Este valor de display influye o condiciona al elemento en varios aspectos, hacia su exterior y en su interior:

La propiedad CSS Display ¿Qué hay de nuevo, vieja? | Opiniones: 4

Creación de elementos y sus animaciones aleatorias con Js y Css

-
Creación de elementos y animaciones aleatorias con Js y Css

O el conocido efecto vintage Nieve cayendo por el documento remozado, actualizado y puesto al día. Ahora con animación CSS, y todavía algo de JS.

El efecto que vamos a ver a continuación es muy antiguo y muy conocido. Se hacía todo en javascript, porque una década y media atrás no existía el CSS transition. Hoy es un poco más fácil y por eso es la excusa de este artículo.

En el hemisferio sur ya es invierno, pero como en la ciudad donde vivo no nieva, se me ocurrió hacer el efecto en javascript y CSS para sentarme un rato a mirar el paisaje nevado que no encuentro desde la ventana. Y lo comparto con ustedes.

Ver el pen Falling snow. de Furoya (@solipsistacp) en CodePen.

Creación de elementos y sus animaciones aleatorias con Js y Css | Opiniones: 0