Preguntas etiquetadas con css

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 …

9 html  css 

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 poco. Solución portátil El conjunto de imágenes mostradas …

9 css  flexbox  image-gallery 

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 …

9 javascript  jquery  html  css 

He creado una animación de mapa del tesoro, primero, mostrará el camino en gris claro, pero a medida que comience la animación, me gustaría que los guiones grises claros desaparezcan o se vuelvan de color negro a medida que la animación de relleno ".road" comienza. luchando para que los guiones …

9 css  svg 

Necesito construir un carrusel con 12 elementos que simulan una rueda 3d que gira infinitamente. Para ser claro, necesito crear precisamente este efecto: https://codepen.io/SitePoint/pen/yXWXaw (encontrado aquí ) pero con estas características adicionales (especialmente en computadoras de escritorio y dispositivos móviles): las diapositivas deben seguir paso a paso el deslizamiento, es …

9 javascript  css  carousel  swiper 

Tengo una aplicación en la que estoy usando Material UI y su proveedor de temas (usando JSS). Ahora estoy incorporando fullcalendar-react , que en realidad no es una biblioteca React completa, es solo un delgado contenedor de componentes React alrededor del código original de fullcalendar. Es decir, que no tengo …

9 css  reactjs  fullcalendar  jss 

Tengo una tabla "ordenable" donde el encabezado de la columna actualmente ordenada muestra un icono: El icono de clasificación se mostrará al final del texto (es decir, admitimos LTR / RTL). Actualmente estoy usando display:flex. Sin embargo, si el ancho de la tabla se reduce y el texto del encabezado …

9 html  css  layout  html-table  alignment 

Tengo algunos problemas reales al intentar que mi barra lateral / contenido de navegación (usando Bootstrap) se muestre (se expanda) de forma predeterminada en el escritorio y se cierre de forma predeterminada en el móvil y que el icono se muestre solo en el móvil. Parece que no puedo hacer …

9 javascript  html  css  bootstrap-4  responsive-design 

Estoy buscando construir un editor con Slate o ProseMirror y veo un comportamiento extraño con Chrome alrededor de la posición de intercalación y el área de selección cuando utilizo un elemento en línea. El problema 1 se muestra en la primera imagen a continuación. Cuando la posición del cursor de …

8 html  css  contenteditable  slatejs  prose-mirror 

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 class="fullscreen-bg"> …

8 html  css  ios  cordova  ionic-framework 

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 este …

8 javascript  html  css  swift  wkwebview 

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> <clipPath id="header-clip-svg"> <path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path> </clipPath> </defs> </svg> <!-- clipped image--> <img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/> </div> Ejecutar fragmento de códigoOcultar resultadosExpandir fragmento Quiero aumentar las …

8 css  svg  clip-path 

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 react-beautiful-dndinstalado para permitir arrastrar Cartas entre las Filas, y también para reordenar …

8 css  reactjs  animation  react-transition-group  react-beautiful-dnd 

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 escalados, …

8 html  css 

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) , utilizado en alguna página HTML …

8 jquery  html  css  linux  html5-canvas