Articles of css3

Problema de CSS en Twitter Typeahead con Bootstrap 3

Con el lanzamiento de Bootstrap 3. Typeahead ha sido eliminado a favor de esto: https://github.com/twitter/typeahead.js Lo he integrado con éxito en la recuperación remota de datos pero estoy teniendo problemas con la autocompletación como puede ver, hay dos textos que aparecen en el cuadro de texto. Incluí el css ( https://github.com/jharding/typeahead.js-bootstrap.css ) como se dice […]

tamaño de fondo en propiedad taquigráfica de fondo (CSS3)

Intento mezclar las propiedades de la background-image background-size en una propiedad de background descuidada. Según la documentación del W3C background-size debe aparecer después background-position separar la propiedad de background-position con una barra inclinada ( / ). Ejemplo W3C: p { background: url(“chess.png”) 40% / 10em gray round fixed border-box; } es equivalente a: p { […]

Animación de agua de relleno

Estoy tratando de obtener una animación de limpieza para hacer que un círculo parezca estar lleno de agua . Me he encontrado con dos errores y no he podido abordar el tercero: Se llena de la manera incorrecta Se restablece a vacío (negro) después de que se haya llenado * Por ahora, estoy usando las […]

Animación de rotación continua CSS3 (como un reloj de sol de carga)

Estoy tratando de replicar un indicador de actividad de estilo Apple (icono de carga de reloj de sol) mediante el uso de una animación PNG y CSS3. Tengo la imagen girando y haciéndola continuamente, pero parece haber un retraso después de que la animación ha terminado antes de que haga la siguiente rotación. @-webkit-keyframes rotate […]

Etiquetas de encabezado / pie de página / nav: ¿qué sucede con estos en IE7, IE8 y navegadores que no son compatibles con HTML5?

Estoy ansioso por comenzar a usar Html5, en particular las tags / / / . ¿Qué sucede si el navegador no los admite? También necesito darles un estilo así: por ejemplo: el nav tiene bordes y márgenes, etc. Usted sabe cosas estándar de CSS. Entonces, si los estilo utilizando la etiqueta de nav entonces IE7 […]

¿Por qué la aceleración de hardware en CSS3 ralentiza el rendimiento?

Estoy moviendo 6000 elementos div pequeños en un experimento css3 usando una transición de la top: 0 a la top: 145px para probar el rendimiento. El uso de hardware sin aceleración funciona sin problemas en Google Chrome. Si habilito la aceleración de hardware a través de translateZ(0) rendimiento se vuelve horrible. ¿Por qué es así? […]

desbordamiento de firefox: no funciona con flexbox nested

Diseñé un diseño de 100% de ancho y 100% de altura con css3 flexbox, que funciona tanto en IE11 (y probablemente en IE10 si la emulación de IE11 es correcta). Pero Firefox (35.0.1), overflow-y no está funcionando. Como puede ver en este codepen: http://codepen.io/anon/pen/NPYVga Firefox no está desbordando correctamente. Muestra una barra de desplazamiento html, […]

Cómo crear un efecto de pulso utilizando -webkit-animation – anillos externos

Encontré este artículo: http://www.zurb.com/article/221/css3-animation-will-rock-your-world en css3 animations. Estoy intentando crear un efecto similar visto en el sitio anterior pero en el sitio personal en: www.imfrom.me Donde tengo el estado de Maine, está el cuadro de punta roja. Quiero crear un anillo de pulso con la flecha que indica la ubicación. ACTUALIZADO CON EL CÓDIGO: Se […]

¿Cómo puedo agregar una sombra de caja en un lado de un elemento?

Necesito crear una sombra de cuadro en algún elemento de block , pero solo (por ejemplo) en su lado derecho. La forma en que lo hago es envolver el elemento interno con box-shadow en uno externo con padding-right y overflow:hidden; por lo que los otros tres lados de la sombra no son visibles. ¿Hay alguna […]

¿Tenemos que usar prefijos de proveedores CSS no estándar / específicos del navegador?

Dado que realmente no me molesta la compatibilidad con versiones anteriores (estoy explorando el diseño basado en CSS3 y HTML5, en lugar de depender de gráficos, etc.) ¿cuáles son los beneficios de usar css como: -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; Sobre solo usar: box-shadow: 3px 3px 5px 6px […]