Múltiples labels por cada input y un input para controlarlas a todas. Slide demo

Múltiples labels por cada input y un input para controlarlas a todas. Slide demo
Por Rev: 4 Comentarios

Hace unas fechas compartía con todos una pequeña realización basada en el hecho de que no es necesario que el input y sus label sean adyacentes para que mantengan su funcionalidad inherente.

En concreto es el artículo "Tabs o pestañas puro css para una landing page. Inputs y sus labels separados".

En esta ocasión vamos a ir un paso más allá y romper otra de las presunciones o creencias no cuestionadas: que cada input sólo puede tener asociada un label. Craso error. En ninguna parte he encontrado que se restrinja el número de ellas por cada input. Además, si así lo haces y pasas el html por el validador verás que pasa la prueba del algodón sin problemas.

Por lo tanto, nada impide romper las dos presunciones, que sólo haya una por cada uno y que estén adyacentes, para crear una galería, slider o pestañas que hasta ahora era terreno exclusivo de js o que de hacerlo con puro Css obligaba a crear un montón de enlaces internos o anclas diferentes para ir de cada cuadro al siguiente o al anterior. Resumiendo gráficamente, lo que ves en la imagen anterior.

Leer artículo Múltiples labels por cada input y un input para controlarlas a todas. Slide demo

Revirado de imágenes por cada canal de color con el filtro SVG feComponentTransfer

Por Rev: 0 Comentarios
Revirado de imagen por cada canal de color con el filtro SVG feComponentTransfer

Este artículo está dedicado a otro de los filtros SVG "clásicos" o primitive filters que llama la especificación. En concreto al filtro SVG feComponentTransfer.

El filtro feComponentTransfer realiza una corrección del color por cada uno de los tres canales RGB. Tiene un cuarto para la opacidad o transparencia del elemento al que se aplica.

En su funcionamiento y uso es de los sencillos, pues sólo se necesita modificar un único valor en cada uno de los tres canales de color (rojo, verde, azul) para aumentar o disminuir cada uno de ellos.

Leer artículo Revirado de imágenes por cada canal de color con el filtro SVG feComponentTransfer

Javascript con Furoya: control del scroll. Eventos y efectos al desplazar la página

Por Rev: 2 Comentarios
Javascript con Furoya: control del scroll. Eventos y efectos al desplazar la página

Ya mencionamos (y usamos) algunos eventos de javascript. Aunque no los describimos con mucho detalle. Hay demasiado escrito en manuales y tutoriales, así que sólo vamos a darle un repaso somero antes de ver el próximo ejemplo para destripar.

Los eventos son detectados por el javascript de los navegadores cuando se produce un cambio en la página, generalmente por mano del usuario. Aunque hay algunos que podría decirse que son autónomos, como el caso de onload que se dispara cuando se carga un archivo, y en una página web puede ser el mismo documento o una img. En principio son atributos a incluir en las etiquetas de apertura del elemento, pero más tarde vamos a ver que pueden ubicarse en otras partes del código.

El mecanismo se parece mucho a las pseudoclases de CSS, pero tienen una diferencia básica: el CSS detecta un cambio de "estado" mientras que JS sólo ve el evento cuando se produce.

Leer artículo Javascript con Furoya: control del scroll. Eventos y efectos al desplazar la página

Las propiedades Css outline y outline-offset a fondo

Por Rev: 0 Comentarios
La propiedad outline y outline-offset a fondo

El documento "la interfaz gráfica de usuario", del que ya comenté a fondo los cursores, define la propiedad outline y su asociada outline-offset.
Nota al margen: en la especificación de Css2.1 se englobaba bajo el epígrafe "Contornos dinámicos". Título que en la actualidad ha desaparecido.

El outline se puede equiparar a un contorno del elemento similar al borde, pero con unas particularidades y una carga de accesibilidad que lo hacen radicalmente diferente de ellos (de los bordes).

Outline:

La propiedad outline define un cortorno alrededor del elemento al que se declara. Esta propiedad es la forma resumida (shorthand) de otras tres propiedades individuales.

Leer artículo Las propiedades Css outline y outline-offset a fondo