Mira ma, estoy buscando! Animaciones en los "inputs search"

Mira ma, estoy buscando! Animaciones en los "inputs search"

Campo y botón de búsqueda animado
Mira ma, estoy buscando! Una demo.

Entre esos detalles que marcan la diferencia y la singularidad de una página están los elementos con los que el usuario puede interactuar y los efectos visuales y comportamientos asociados a ellos.

En otras ocasiones he traído al blog algunos ejemplos, como estos efectos al :hover en los enlaces. Hoy toca un vistazo a los campos de búsqueda input type='search' (o cualquier otro) para hacerlos más notorios en sus distintos estados.

Simple rwd gallery powered by Css: rotando posiciones

Simple rwd gallery powered by Css: rotando posicionesUna sencilla galería "responsive" en puro css. Sencilla y ordenada en cuanto a su visualización. Los items van rotando posiciones a medida que se selecciona el adyacente y el que se visualizaba en grande pasa a ocupar la última posición.

Esta sencillez en su funcionamiento tiene detrás un Css un poco más complejo. Especialmente la parte de los selectores.

Como otras muchas demos del blog, todo se basa en técnicas ya explicadas con anterioridad: uso o más bien abuso de la pseudoclase :checked y una pizca de transiciones para animar el intercambio de posiciones de las imágenes.

Enredando con Css: esquina plegada interactiva y headline triangular

Un encabezado un tanto particularLo que hoy te propongo es símplemente el resultado de enredar (en el sentido de jugar sin finalidad alguna y por lo general haciendo perder el tiempo a otros al hacerlos partícipes contra su voluntad en el juego) con un par de realizaciones de terceros.

El primer pasatiempos es el que puedes ver en la imagen adyacente: un encabezado o "headline" con un par de triángulos simétricos antes y después del texto. El segundo en base a una propuesta de Chris Coyier.

Text-overflow:ellipsis en cualquier línea elegida a voluntad y puntos suspensivos sólo en ella

Corte de texto en la línea elegida avoluntad y puntos suspensivos sólo en ellaHola Buenos días. Quisiera hacer un párrafo de texto que tenga espacio para poner 4 lineas de texto. Lo que necesito es que el texto muestre puntos suspensivos si la cantidad de caracteres supera esas 4 lineas. No se si se entendió.
Con la propiedad 'text-overflow:ellipsis' los puntos suspensivos aparecen pero solo generando una linea de texto.
¿Es posible hacer un párrafo de 4 lineas y que recién ahi aparezcan los puntos suspensivos?

Muchas gracias. Paola.

Slaiders, galerías y pestañas o tabs en puro Css. Recopilación de demos propias de Ksesocss

Diamantes Css en la noche de reyes para los lectores del blogAMPLIADO: Hay un post que sin ser el más popular por visitas o comentarios sí está entre los que más consultas genera. Es el titulado Sistema de pestañas (tabs) Css con :target sin salto y RWD

Consultas que en la mayoría de ocasiones me es imposible dar una respuesta como la que se pretende. La mayoría de las veces no se aporta una información mínima y lo fiáis todo a mis dotes adivinatorias (que no tengo) y otras veces símplemente no se puede hacer lo que alguno pretende sin profundos cambios en su estructura html y el correspondiente Css. Cambios que nunca se sabe si han realizado ni cómo llevarlos a cabo en el marcado html del consultante por la misma razón: se desconoce todo lo relativo a ella.

Selectores Css de pseudoclases y pseudoelementos. Qué son. Todos los existentes

Selectores Css de pseudoclases y pseudoelementos. Qué son. Todos los existentesCon las continuas ampliaciones de todos los documentos del W3c que desarrollan el corpus de Css llega un momento que hay aspectos que se escapan y otros de los que directamente podemos llegar a no enterarnos ni de su existencia.

La parte fundamental de Css sin la que sería imposible su aplicación a los documentos destino son los selectores. Y dentro de éstos, los selectores Css, hay un par de subgrupos que han visto ampliado su número de forma más que notoria:

  1. Pseudoelementos
  2. Pseudoclases

Bordes transparentes: background-clip y background-origin. Relación entre fondos y bordes

bordes transparentes con cssEntre los bordes y los fondos de los elementos hay una relación y comportamiento un tanto dispar. Dispar según qué usemos de fondo. Y disparidad que lleva aparejada en ocasiones resultados inesperados y no deseados a los usuario no prevenidos.

Fíjate en la imagen de aquí al lado. Un caja con un backgroound en color sólido y un border en valor rgba para obtener cierta transparencia en él.

Escalado inverso de elementos con puro Css

Esto es el típico ejemplo de aquello que a priori parece un imposible Css y sin embargo tras verlo sólo cabe darte una palmada en la frente y exclamar: ¡C**ñ!

Me refiero a lograr sólo con puro Css que un elemento vaya ajustando su tamaño de forma inversa a cómo lo haga su padre: mayor al achicar la ventana o menor a medida que la ventana crece.

¿Que no?. Mira lo sencillo que resulta.