Articles of css3

Texto borroso después de usar la transformación CSS: scale (); en Chrome

Parece que ha habido una actualización reciente de Google Chrome que causa texto borroso después de hacer una transform: scale() . Específicamente, estoy haciendo esto: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } Si visita […]

Webfont Smoothing y Antialiasing en Firefox y Opera

Tengo algunos webfonts personalizados integrados en mi sitio y uso cosas como //-webkit-text-stroke-width: .05px; //-webkit-text-stroke-color: white; -webkit-font-smoothing: antialiased; para diseñar mi salida de renderizado Esto funciona bien en Safari y Chrome. Obtuve bordes más nítidos y líneas más delgadas. ¿Hay alguna forma de hacer cosas así en Firefox? ¿O Opera?

Voltea una tarjeta 3D con CSS

Estoy tratando de hacer un efecto de inversión de tarjeta 3D con CSS de esta manera. La diferencia es que quiero usar solo CSS para implementarlo. Aquí está el código que probé: /*** LESS: ***/ .card-container { position: relative; height: 12rem; width: 9rem; perspective: 30rem; .card { position: absolute; width: 100%; height: 100%; div { […]

Variable Sass en la función CSS calc ()

Estoy tratando de usar la función calc() en una hoja de estilo Sass, pero estoy teniendo algunos problemas. Aquí está mi código: $body_padding: 50px body padding-top: $body_padding height: calc(100% – $body_padding) Si uso la literal de 50px lugar de mi variable body_padding , obtengo exactamente lo que quiero. Sin embargo, cuando cambio a la variable, […]

La animación CSS3 no funciona en safari

Tengo un poco de animación CSS3 que funciona perfectamente en todos los navegadores que soportan CSS3 excepto Safari. ¿No es extraño? Ok, aquí está mi código: HTML CSS .landing .board .right { width: 291px; height: 279px; background: url(‘../images/landing/key-pnl.png’); bottom: 16px; right: 250px; position: absolute; } .landing .board .right .key-arm { position: absolute; left: 44px; top: […]

Mi pie de página flota

He estado probando varias soluciones de pie de página “adhesivas” durante la mayor parte de los tres días sin éxito. Intento ubicar el pie de página en la parte inferior de la ventana del navegador en instancias en las que no hay suficiente contenido para abarcar toda la altura de la ventana. Por favor. Ayuda. […]

Esquinas redondeadas transparentes en Google Map

Necesito hacer mi google map V3 un círculo completo. Utilizo un radio de borde CSS3, pero funciona correctamente solo en Firfox, otros solo lo dejan rectangular. Aquí están los códigos: … y CSS: .map.mapCircle { width: 476px; height: 476px; } .mapCircle>div>div:first-child { -moz-border-radius: 238px; -webkit-border-radius: 238px; border-radius: 238px; } Sí, lo sé, podría usar algunas […]

Mantener la relación de aspecto de div según la altura

Necesito mantener el ancho de un elemento como un porcentaje de su altura . Entonces, a medida que la altura cambia, el ancho se actualiza. Lo contrario se puede lograr utilizando un valor de% para el relleno de la parte superior, pero el relleno de la izquierda como un porcentaje será un porcentaje del ancho […]

Segmentos en un círculo usando CSS3

Sé que puedes hacer un círculo en CSS3 usando el hack de radio de borde. Pero, ¿hay alguna forma de hacer que tengan segmentos como esta imagen? ¿Hay alguna forma de hacerlo a través de HTML y CSS pero no de JS?

Efecto de desvanecimiento CSS3

a { float: left; width: 32px; height: 32px; text-align: left; text-indent:-9999px; background: url(‘../img/button.png’) no-repeat 0 0; -webkit-transition: background 300ms ease-in 2s; /* property duration timing-function delay */ -moz-transition: background 300ms ease-in 2s; -o-transition: background 300ms ease-in 2s; transition: background 300ms ease-in 2s; -webkit-transition-property: background; -webkit-transition-duration: 300ms; -webkit-transition-timing-function: ease-in; -webkit-transition-delay: 100ms; -moz-transition-property: background; -moz-transition-duration: 300ms; -moz-transition-timing-function: […]