Articles of css3

¿Cómo cambiar la envoltura de flexbox?

Tengo una caja flexbox receptiva con tarjetas renderizadas dinámicamente (de 1 a 10 tarjetas representadas por cada llamada api) en mi aplicación. Casi hace exactamente lo que yo quiero que haga, excepto la manera en que se envuelve. Digamos que rendericé 10 cartas, si cambio el tamaño de la pantalla para que se convierta, por […]

Sombra de cuadro en IE7 e IE8

Quiero implementar sombras de cuadro en IE7 e IE8. Lo he intentado todo sin tener éxito. Aquí está el CSS que estoy usando para aplicar sombra de color a un div: .bright{ position: absolute; z-index: 1; -moz-box-shadow: 0px -3px 55px 20px #147197; box-shadow: 0px -3px 55px 20px #147197; -webkit-box-shadow: 0px -3px 55px 20px #147197; behavior: […]

¿Ola (o forma?) Con borde en CSS3

Necesito implementar una forma de onda con CSS3, traté de implementar con formas CSS3, pero no he alcanzado el resultado deseado. * { margin: 0; padding: 0; } body { background: #007FC1; } .container, .panel { border-bottom: 4px solid #B4CAD8; } .container { background-color: #fff; } .container > .text { padding: 0.5em; } .panel { […]

Pedido de declaraciones de CSS específicas del proveedor

Creo que he escrito algo así como lo siguiente mil veces: .foo { border-radius: 10px; /* W3C */ -moz-border-radius: 10px; /* Mozilla */ -webkit-border-radius: 10px; /* Webkit */ } Pero solo ahora ¿he pensado si el orden de esos es importante? Sé que entre -moz-* y -webkit-* no importa, ya que como mucho uno de […]

Invierte la esquina redondeada en CSS

Tengo un código CSS: -moz-border-radius-topleft:50px; Obtengo el resultado: ¿Hay alguna posibilidad de dar como este?

¿qué es más rápido? ¿Transiciones CSS3 o animaciones jQuery?

Estoy trabajando en una aplicación iPad HTML5 y ya he implementado soporte ontouch para desencadenar eventos más rápido y estoy usando jQuery para dirigir los elementos más fácilmente, pero para las animaciones estoy usando transiciones CSS3 ¿Qué crees que es más rápido? usando animaciones jQuery ya que ya importé la biblioteca o usé transiciones CSS3 […]

Forma de triángulo con imagen de fondo

Estoy trabajando en un proyecto que requiere dos triangularjs para guardar imágenes de fondo y enlaces. Aquí está mi maqueta de cómo me gustaría los dos triangularjs. Actualmente, tengo solo dos divisiones que abarcan el 900×600 con cada triángulo como imagen de fondo. El problema que estoy teniendo ahora es que no puedo pasar el […]

Efecto de desplazamiento: expanda el borde inferior

Estoy tratando de obtener un efecto de desplazamiento de transición en el borde que el borde se expande al pasar el mouse. h1 { color: #666; } h1:after { position: absolute; left: 10px; content: ”; height: 40px; width: 275px; border-bottom: solid 3px #019fb6; transition: left 250ms ease-in-out, right 250ms ease-in-out; opacity: 0; } h1:hover:after { […]

Alternativa de CSS Calc

Estoy intentando cambiar dinámicamente el ancho de un div usando CSS y sin jquery. El siguiente código funcionará en los siguientes navegadores: http://caniuse.com/calc /* Firefox */ width: -moz-calc(100% – 500px); /* WebKit */ width: -webkit-calc(100% – 500px); /* Opera */ width: -o-calc(100% – 500px); /* Standard */ width: calc(100% – 500px); También quiero soportar IE […]

CSS 3 deslizable desde la transición izquierda

¿Hay una solución de navegador cruzado para producir una transición deslizante con CSS solamente, sin javascript? A continuación se muestra un ejemplo del contenido html: