Articles of css3

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:

¿Alguna manera de limitar la longitud del borde?

¿Hay alguna manera de limitar la longitud de un borde? Tengo un que tiene un borde inferior, pero quiero agregar un borde a la izquierda del que solo se extiende hasta la mitad del camino. ¿Hay alguna manera de hacerlo sin agregar elementos adicionales en la página?

¿Por qué no funciona el selector h3: nth-child (1): contains (‘a’)?

Reviso este selector: h3:nth-child(1):contains(‘a’) selector no funciona? Compruebo esto en firefinder y no devuelve nada (no hay información de que hay cero elementos) Luego revisa esto: h3:nth-child(1) y devuelve h3, por lo que el selector es casi bueno, pero algo con este texto (h3 tiene texto ‘a’) sale mal.

Bootstrap: cómo astackr divs de diferentes alturas?

Esta pregunta es similar a esta , pero quiero saber si hay una solución de CSS pura que sea compatible con Bootstrap. Básicamente, tengo el siguiente diseño: Este es el HTML de esa página: CategoryLorem ipsum.€ 0.00 Lorem ipsum.€ 0.00 Lorem ipsum.€ 0.00 Lorem ipsum.€ 0.00 Lorem ipsum.€ 0.00 Lorem ipsum.€ 0.00 Lorem ipsum.€ 0.00 […]

¿Cómo puedo seleccionar un enésimo hijo sin conocer el elemento padre?

No puedo encontrar una manera de seleccionar el enésimo elemento, el último elemento o el primer elemento en los casos en que no conozco el elemento principal. nth-child existe, pero solo para niños, por ejemplo: One Two p:last-child selecciona el párrafo “Two”, y p:first-child selecciona el párrafo “One”. Pero, ¿qué pasa cuando tengo un código […]

Formateo de números (decimales, separadores de miles, etc.) con CSS

¿Es posible formatear números con CSS? Es decir: lugares decimales, separador decimal, separador de miles, etc.

Triángulo CSS receptivo con porcentaje de ancho

El siguiente código creará una flecha justo debajo de un elemento : JSFiddle .btn { position: relative; display: inline-block; width: 100px; height: 50px; text-align: center; color: white; background: gray; line-height: 50px; text-decoration: none; } .btn:after { content: “”; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-width: 10px 50px 0 50px; border-style: solid; […]

¿Cuáles son las reglas para la superposición de consulta de medios CSS?

¿Cómo espaciamos las consultas de los medios con precisión para evitar la superposición? Por ejemplo, si consideramos el código: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } ¿Qué pasará, en todos […]

Transiciones CSS3: ¿La “transición: todo” es más lenta que la “transición: x”?

Tengo una pregunta sobre la velocidad de reproducción para la propiedad de transición css3. Supongamos que tengo una serie de elementos: div, span, a {transition: all} div {margin: 2px} span {opacity: .5} a:hover {background-position: left top} div:hover {margin: -100px} span:hover {opacity: 1} a:hover {background-position: -5px top} Es mucho más eficiente segmentar todas las transiciones para […]

Gradientes en Internet Explorer 9

¿Alguien sabe el prefijo del proveedor para degradados dentro de IE9 o se supone que todavía debemos usar sus filtros de propiedad? Lo que tengo para los otros navegadores es: background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′, EndColorStr=’#999999′); /* IE6,IE7 */ -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′, […]