CSS 3 Degradado n píxeles desde la parte inferior - Webkit/Safari

¿Hay alguna manera de crear un degradado con una parada n píxeles desde el borde inferior del elemento?CSS 3 Degradado n píxeles desde la parte inferior - Webkit/Safari

Por ejemplo, con Moz/Firefox que se vería así:

-moz-linear-gradient(center bottom , #f00 2%, #d00 31px)

También hay que señalar que este gradiente tiene un gradiente compañero a hacer lo mismo a la parte superior de la caja. Entonces realmente el css se ve así para FF y necesito reproducirlo para webkit:

background-image: 
     -moz-linear-gradient(center top , rgba(255,0,0,0.75) 2%, rgba(255,0,0,0) 31px), 
     -moz-linear-gradient(center bottom , rgba(255,0,0,0.75) 2%, rgba(255,0,0,0) 31px);

Fuente

2011-01-16 prodigitalson

No puede hacer eso con la sintaxis actual de webkit. Buenas noticias! Habrá una nueva propiedad -webkit-linear-gradient (recién anunciada en el blog de webkit) que básicamente coincide con la sintaxis -moz y le permitirá hacer esto. Esta sintaxis debe convertirse en la sintaxis definitiva de CSS3, por lo que podrá eliminar completamente el -webkit y -moz en algún momento. (La propiedad antigua -webkit-gradient continuará funcionando indefinidamente, pero no se favorece en el futuro.)

Fuente

2011-01-17 05:46:22

En realidad, vi ese informe de errores y revisé el parche de este mes ... solo esperaba que hubiera algo que me faltaba en la sintaxis actual. También para cualquier otra persona que esté interesada en implementar la nueva sintaxis en v528 + (Nightly Build). – prodigitalson

¿Has probado algo como esto?

-webkit-gradient(linear, center bottom , #f00 2%, #d00 31px)

espero que le ayuda a this site más.

Fuente

2011-01-16 20:41:44 kajo

El problema es 'color stop' sólo toma porcentajes (o notación decimal de un precentage), no es un valor definitivo Mientras tanto, el 'punto 'no parece figurar en la posición de parada, solo la dirección, es decir. todas las definiciones de px se toman desde la parte superior del cuadro. No puedo calcular un porcentaje porque el gradiente no debe ser proporcional; siempre debe detenerse exactamente a 31px del fondo de la caja, ya sea que la caja tenga 10px de alto o 1000px de altura. Puedo usar una imagen, pero estoy tratando de mantener el CSS lo más consintiente posible. – prodigitalson

Puede usar -webkit-background-size para medir el degradado en píxeles y background-position para colocarlo en la parte inferior.

Fuente

2011-01-17 19:36:51

hmmm que posiblemente podría funcionar ... lo investigaré. ¡GRACIAS! – prodigitalson

No del todo seguro de lo que fueron después, pero me las arreglo para dejar un gradiente de píxeles mediante el uso de esta -

background-size:100% 31px; background-repeat:no-repeat;

Fuente

2012-08-16 15:50:44 seanjacob

¡Tienes razón! ¡Gracias! He aquí un JSFiddle de trabajo http://jsfiddle.net/cfTwf/ – ProblemsOfSumit

esto funcionó para mí también –

CSS 3 Degradado n píxeles desde la parte inferior - Webkit/Safari

Respuesta

Cuestiones relacionadas