Esto lo vi en Google Play, la tienda virtual de Google para aplicaciones Andriod. La descripción de la aplicación se puede mostrar u ocultar con un botón en la esquina inferior derecha. Esto es muy útil para mostrar resúmenes que pueden ser extendidos a gusto del lector.
En Google Play usan javascript pero se logra el mismo resultado utilizando sólo CSS. Lo que hacemos es camuflar un input de tipo checkbox en forma de botón utilizando la etiqueta label. Cuando el input esta activado, el contenido se exapande. Como no es posible utilizar transiciones con la propiedad height, utilizamos max-height.
See the Pen SlideToogle con CSS :checked by Lucas Maidana (@LucasMaidana) on CodePen.
Fuentes
- Slidetoogle sólo con CSS en el blog de Emilio Cobos, de aquí sacamos cómo realizar la transición utilizando la propiedad max-height.
- Efecto de texto con CSS en el blog de Emilio Cobos. Aquí explica cómo lograr el efecto de continuidad del texto.
Comentarios
Publicar un comentario