He creado un contenedor en el que he animado el mismo efecto que Apple en su página de Airpods Pro . Básicamente es un video, cuando me desplazo el video se reproduce poco a poco. La posición del video es fija, por lo que el texto se desplaza muy bien sobre él. Sin embargo, el texto solo es visible...
Mostrar una galería de imágenes de diferentes tamaños y proporciones con las siguientes especificaciones: Sin espacios en blanco (márgenes) entre imágenes. Respetando la proporción original tanto como sea posible. Imágenes rodeadas por un enlace. Solución no JS. Las imágenes pueden recortarse un...
Me he desafiado a mí mismo para crear una experiencia visualmente dinámica e interactiva en HTML y CSS solamente (sin Javascript). Hasta ahora, no he encontrado ninguna característica que necesitara que no pudiera hacer en CSS y HTML puro. Este es quizás un poco más difícil. Tengo que evitar que...
He codificado un script (con la ayuda de un usuario aquí) que me permite expandir un div seleccionado y hacer que los otros div se comporten en consecuencia al estirarlo por igual para adaptarse al espacio restante (excepto el primero cuyo ancho es fijo). Y aquí hay una imagen de lo que quiero...
Tengo un elemento contenedor que contiene algunos otros elementos, pero dependiendo del tamaño de la pantalla, partes de ellos se cortan inexplicablemente en varias partes. Puede observar el comportamiento en el enlace de mi sandbox de código, cuando la página HTML se ajusta en ancho (haciendo clic...
Si bien la <meta name="viewport">etiqueta no está estandarizada, "es respetada por la mayoría de los navegadores móviles debido al dominio de facto". Una desventaja de que no es un verdadero estándar web es que la documentación detallada no está tan disponible como otros estándares. El Grupo...
Tengo un conjunto de cuatro colores y quiero aplicarlos a los div anidados, por lo que cada próximo hijo tiene un color diferente. Si hay un quinto nivel de anidamiento, quiero comenzar de nuevo con el primer color y tenerlo en curso, incluso si tengo niveles infinitos de anidamiento . ¿Es posible...
Luchando para que las cosas se comporten. Tengo una lista dinámica de imágenes en un sitio receptivo. El diseño se genera donde las imágenes pueden estar en filas / columnas o filas de columnas. Este ejemplo está cerca, pero las imágenes emparejadas no se alinean en la parte inferior a medida que...
En las notas de la versión de Safari 13 se afirma que ya no es necesario aplicar lo siguiente a un elemento para habilitar el efecto de desplazamiento de rebote: div { overflow-x: scroll; -webkit-overflow-scrolling: touch; /* No longer needed */ } Sin embargo, ahora ya no puedo desactivar este...
Actualmente estoy luchando con una forma de reemplazar los iconos de reproducción / pausa con texto mientras mantengo la animación de alternancia. Estoy tratando de entender exactamente qué código JS está representando los iconos, y en segundo lugar eliminarlos / ocultarlos, para que puedan ser...
Aprendí a usar animación en CSS usando @keyframe. Sin embargo, quiero escribir mi código de animación personalizado en mi proyecto de reacción (Uso de materialUI). Mi desafío es cómo puedo escribir el código javascript para personalizar mis animaciones usando makeStyle () en MaterialUI. Quiero...
Tengo un div que contiene una imagen y algo de texto (la imagen es de tamaño variable y el texto es de longitud variable). ¿Hay alguna forma de calcular la altura requerida para ajustar todo el contenido div, dado que el ancho exacto está predefinido? UPD obtiene el mismo resultado incorrecto al...
Tengo elementos en una página que son "enfocables" (botones, elementos con índice de tabla, etc.) y el lector de pantalla lee bien el contenido. Sin embargo, tengo algunos otros elementos que no son enfocables (debido al hecho de que hay muchos de ellos: resultados de la lista desplegable, etc.),...
En el siguiente ejemplo, el círculo se adapta al ancho de la cuadrícula y mantiene su relación de aspecto. A medida que el ancho del contenedor se reduce, los círculos se reducen con él ... Sin embargo, cuando la altura es menor que el ancho (segundo recuadro), el círculo no se contrae solapando...
Esto está dentro del proyecto Bismon (un software GPLv3 + financiado por proyectos europeos H2020), git commit0e9a8eccc2976f . Este borrador del informe describe el software. Esta pregunta da más contexto y motivaciones. Se trata del archivo webroot / jscript / bismon-hwroot.js (escrito a mano) ,...
Estoy buscando hacer una transición de imágenes con alejar a la segunda imagen, tercera imagen, etc. Intenté hacerlo yo mismo con algunos fotogramas clave a través de la imagen de fondo y la escala, y funcionó decentemente, excepto que hubo 2 problemas. 1. Mi texto y botones también fueron...
Video que muestra mi problema: https://i.imgur.com/L3laZLc.mp4 Tengo una aplicación simple donde puedes agregar tarjetas a 2 filas diferentes. Cuando se agrega una tarjeta a una fila, estoy usando react-transition-grouppara activar una animación "enter". Sin embargo, también lo he...
Tengo ese código: .img-container { width: 300px; height: 300px; background-color: lightgreen; overflow: hidden; } .clipped-img { clip-path: url('#header-clip-svg'); } <div class="img-container"> <!--clipping SVG--> <svg height="0" width="0"> <defs>...
Cuando un usuario realiza un gesto de tocar y mantener presionado para seleccionar una palabra y luego arrastra el dedo hacia los bordes superior o inferior de la pantalla, la página se desplaza automáticamente para acomodar la selección. aquí hay un breve clip que lo demuestra Me gustaría evitar...
Estoy tratando de obtener un fondo de video de pantalla completa para mi Ionicaplicación, funciona perfectamente bien en Android y el navegador, pero cuando ejecuto la aplicación en un iPhone en el simulador Xcode, es solo un fondo blanco y el video no se carga . Código HTML: <div...