Articles of css3

¿Puedes hacer que una sección de un div sea transparente y afecte a su caja de sombra?

He logrado que una parte de mi div sea transparente siguiendo este ejemplo: http://jsfiddle.net/5VDLX/144/ HTML (JSFIDDLE) CSS (JSFIDDLE) body{ background: yellow; } .shape { width: 500px; height: 75px; background-color: transparent; background-image: -webkit-radial-gradient(50% 100%, circle, transparent 50px, black 0); background-image: radial-gradient(50% 100%, circle, transparent 50px, black 0); } .circle { width: 100px; height: 100px; background-color: transparent; […]

CSS: diseño de columna vertical sin

Ok, me apoyé en html & css en 2001. Estaba acostumbrado a hacer algo como esto (para crear un sitio web con un diseño de “columna vertical”): Vertical-column layout Fácil, todo se alinea automáticamente de la forma que quiero, sin dolor de cabeza, etc. La vida era buena en ese entonces. SIN EMBARGO, no hace […]

¿Cómo hacer que la extensión de chrome esté en pantalla completa?

Estoy tratando de hacer que la extensión de Chrome esté en pantalla completa, pero lo máximo que puedo hacer es la mitad del ancho. Más que solo me da una barra de desplazamiento en la parte inferior … ¿Cómo puedo hacer que esté en pantalla completa? Es decir, todo el ancho del navegador Chrome? ¡Gracias!

¿Cómo pueden los divs múltiples (de tamaño dynamic) compartir 100% de ancho?

Tengo la siguiente estructura html: element with unknown width Lo que me gustaría lograr es lo siguiente: (Requisito) El div exterior debe usar el 100% del ancho de la pantalla (Requisito) Los tres divs internos deben compartir estos 100% entre ellos. (Requisito) El segundo div, entre los otros dos, ocupa una cantidad desconocida de espacio […]

Desplazamiento horizontal con ejes verticales estáticos en google charts

Estoy usando google chart en mi aplicación y quería implementar scroll. Podría hacerlo diseñando el div contenedor. Pero el problema es que desplaza todo el gráfico con el eje. ¿Cómo desplazar horizontalmente solo el área del gráfico y mantener el eje vertical estático?

Dos css3 columnas de texto con una imagen en medio

Me gustaría lograr este resultado. Hay muchos tutoriales de este tipo, pero funcionan con un texto y columnas fijos. Imprimo un texto de longitud variable dentro de mi diseño de dos columnas de esta manera #cols { column-count: 2; column-gap: 20px; } Lorem Ipsum…. así que no puedo usar una técnica como esa, ¿cómo puedo […]

Ancho de efecto de borde CSS al redimensionar el navegador

Hice dos simples menús de navegación usando ul y li . Uno sin borde y otro con borde. El ancho de ambos menús se fija con 400px. En el primer menú, le di a cada li un ancho fijo de 100px y en el segundo menú de acuerdo con el cálculo del ancho, di un […]

¿Contenedor CSS de cuadrícula que se desplaza horizontalmente cuando los niños usan la cuadrícula-columna?

CODEPEN: https://codepen.io/matthewharwood/pen/ywKNVg Estoy tratando de lograr este diseño en GridCSS: Problemas: Tengo problemas para hacer que los elementos .elements desborden su .elements principal cuando se utiliza grid-column: span 4; . Nota: Los niños alcanzarán su punto máximo en el móvil La cuadrícula tendrá barras de desplazamiento si los niños se desbordan Los niños siguen perfectamente […]

Área de elementos inconsistente seleccionable con radio de borde

jsFiddle HTML CSS body { background-color: blue; } div { background-image: url(http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg); background-size: cover; } div, img { width: 100px; height:100px; border-radius: 50%; } img Cuando se aplica un border-radius en una imagen, aún se puede hacer clic en las áreas que se redondearon. Si hace clic y arrastra el área justo fuera del círculo, […]

luchando con una cuadrícula flexbox anidada

Intenté lograr un patrón de cuadrícula con un sistema de cuadrícula basado en un margen negativo (susy) y fallí. Intenté usar flexbox, pero no estoy seguro de si es realmente posible, pensé que el mejor enfoque sería 2 columnas (lado A y B) y le daría a las cajas (1) la altura de flexión del […]