RWD droUpDown Menu animado puro Css

RWD droUpDown Menu animado puro Css

Por 0 Comentarios

Tarde fría de Febrero y sin nada mejor que hacer. ¿Qué tal si vemos cómo construir el típico Dropdown. O dicho en español: un contenedor oculto por defecto y que se despliega a voluntad del visitante. Normalmente ahí irá alojada información secundaria.

En esta demo el menú se compone de una serie de imágenes. Pero su contenido es lo de menos. Puede ser una larga lista de enlaces u opciones de lo más variado.

Este tiene la particularidad que ocupa todo el viewport y en el caso de que su contenido sea mayor cuenta con scroll vertical para acceder a él.

Leer: RWD droUpDown Menu animado puro Css

Flexible cover images; dos formas de lograrlo

Por 0 Comentarios
 Flexible cover images

La imágenes tienen una relación de aspecto (anchura y altura) que si se modifican sin respetarla da como resultado la distorsión de la escena.

En ocasiones se necesita que la imagen a ser mostrada ocupe toda una superficie variable sin sobresalir de ella y sin que haya tales distorsiones.

Si la imagen es introducida vía Css y como fondo del elemento no hay problema. Hace tiempo que background-size: cover; se puede utilizar sin mayores problemas.

La dificultad estriba cuando la imagen es contenido, no es ornamental, y por lo tanto forma parte del Html introducida con el elemento <img src='.../>

Leer: Flexible cover images; dos formas de lograrlo

Recorte y centrado automático de imagen con object-fit: cover

Por 7 Comentarios
Recorte y centrado automático de imagen con 1 declaración Css

En Diciembre de 2013 publicaba el artículo Dimensionado de imágenes y objetos en CSS. Básicamente la traslación al español del documento del W3c CSS Image Values and Replaced Content.

Este documento proporciona herramientas (propiedades) Css para un mejor control de los elementos reemplazados, tales como las imágenes, los vídeos, iframes... étc.

Una aplicación práctica y muy visual de las posibilidades de estas "novedades" es que una imagen al declararle tamaños sin tener en cuenta su relación de aspecto en vez de deformarse se escala y recorta respecto a su centro manteniendo su aspect ratio.

La propiedad que lo hace posible es object-fit y el valor cover

Leer: Recorte y centrado automático de imagen con object-fit: cover

Selectores Css: las nuevas pseudoclases aplicadas a la validación de campos

Por 4 Comentarios
Selectores Css de estados: las nuevas pseudoclases aplicadas a la validación de campos

Como respuesta a todas la novedades habidas tanto por la ampliación que el lenguaje Html5 ha traído como por el propio desarrollo de los aparatos con los que se visualiza la web, el Css se ha ido haciendo cada vez más complejo y completo.

Uno de los aspectos en los que se nota este efecto es en el aumento de los conocidos como pseudoelementos y pseudoclases recogidos en los distintos documentos del consorcio.

Es tal ésta variedad de ellos que en algunos casos la clasificación como pseudoclase o pseudoelemento es un tanto sutil. Bien podría calificarse como uno y otro.

Pero lo que sí queda claro es que con tanta diversidad de ellos es fácil perder de vista a alguno.

Leer: Selectores Css: las nuevas pseudoclases aplicadas a la validación de campos