:hover guillotinado. Jugando con falsas diagonales

Una pizca de Css que no es el que aparenta, dos imágenes que simulan una, efectos que no son lo que parecen en un post en la que su finalidad, por supuesto, es otra que la que debería.

:hover guillotinado. Jugando con falsas diagonales

Por Kseso ✎ 3

:hover guillotinado. Jugando con falsas diagonalesDe esto que llegas a una galería fotográfica y piensas que tienes que compartirla, que algunas imágenes merecen la pena su disfrute.

Pero claro, hacerlo en un tuit, vía g+ o cualquier otra red lo hace cualquiera y eso no garantiza que nadie pinche el enlace.

Así que mejor hacer alguna cosilla con alguna de las fotos. ¿Probamos a integrar dos de ellas? que tu ojo y cerebro tengan sensaciones dispares. Un pequeño efecto óptico ¿es la misma foto o son dos?

Pero no es cuestión de liarse a picar código y que las intención primera quede eclipsada. Mejor algo sencillo. Colores discretos estarían bien. ¿Y una tipografía que se vea actual, trazos limpios, para otorgar créditos?

Bueno. Se ve bien. ¿Está todo? ¿Añado algo sin destrozarlo? ¿Una transición? Vale. Pero sigamos con los engaños visuales.

¿Recuerdas el Slider con bordes sesgados? No he vuelto a jugar con ese efecto de bordes oblicuos. Estaría bien. Pero simplifica. Sin transformaciones y contratransformaciones.

¿Ya? ¿Todo listo? Casi... falta un algo... ¡Eso! una transición. Pero desfasa el continente del contenido.

A ver... Sí. No necesita más. Repaso... Ok.

Ya puedo compartir en el blog las fotografías de Elena Shumilova mostrando 2 de ellas como anzuelo e incluyendo un enlace a su galería. Y sin romper con la naturaleza y temática de esta página.

See the Pen :hover guillotined by Kseso (@Kseso) on CodePen.

Ver Demo a full

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 3

  1. El efecto es muy bueno y está aún mejor aplicado; pero lo que más me impresionó fue el mashup.
    Te dio trabajo elegir las fotos ¿verdad?. No digo por la calidad (francamente sólo hubo algunas "que me gustaron un poco menos" en esa galería), sino porque tuvieron que calzar muuuy justo.

    ResponderEliminar
    Respuestas
    1. ¡uy! ¡Sí! Mucho, mucho, mucho... y más xD =P

      No. Lo cierto es que primero elegí la del chaval con el san bernardo y para completar la demo miré otra que le fuese bien en cuanto por los tonos de la fotografía y temática similar.

      Y coincidió esa falsa continuidad de líneas. Al darme cuenta de ello jugué un poco con 'opacity' en la pequeña y me gustó el efecto.

      Así que podría decirse que ese efecto es casual.

      Eliminar
  2. Muy buen aporte genio gracias

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap