gradientes de reflexión usando CSS en el navegador Android

Question

que tengo un poco de CSS para la visualización de una reflexión sobre un elemento que usa webkit-degradado a desaparecer:

.foo { -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)), color-stop(0.7, transparent)); } 

• En los navegadores que soportan webkit-box-reflejar como cromo, esto muestra un reflejo del elemento que gradualmente se desvanece como se esperaba.
• En los navegadores que no lo admiten en absoluto, no se muestra ninguna reflexión.

Sin embargo, en el navegador de Android, se muestra una reflexión, pero no se desvanece.

¿Hay alguna manera de conseguir Android a cualquiera:

1. fundido de salida de la reflexión, o
2. no mostrar el reflejo en absoluto.

Sé que podría usar javascript para detectar el navegador y cambiar el estilo en consecuencia, pero preferiría una solución de solo CSS.

Answer 1

CSS no está diseñado para manejar cosas como esa. En otras palabras: no, no es posible.

Answer 2

Tengo problemas similares tratando de hacer las cosas con gradientes de fondo en el navegador de Android, y parece completamente de base

Desafortunadamente la respuesta anterior es correcta, no hay una manera de dividir su declaración en una buena forma progresivamente mejorada. Puede usar JavaScript/modernizr como mencionó, y al menos establecer una clase (s) de soporte para que no tenga que voltear el estilo dentro del código.

Puede intentar reproducir este efecto con un elemento de lienzo HTML, utilizando drawImage con su imagen y transformándola. Aunque el lienzo puede ser lento en el webkit para dispositivos móviles.

Buena suerte

Answer 3

hacen gradientes funcionan en absoluto en el navegador de Android? si lo hacen, asegúrese de estar utilizando la versión correcta. Hay un viejo formato de webkit que quizás necesite usar. De lo contrario, simplemente use modernizr para ocultarlo en lugares que no admiten degradados.

Answer 4

Sin un archivo de ejemplo o un enlace, es un poco difícil ver lo que necesita.

También jugué con algunas cosas de reflexión hace unos meses y no encontré nada que pudiera hacer lo que describes. Tengo algunos pasos para obtener lo que desea, fuera del código. Recomiendo que el elemento que desea reflejar sea un PNG sobre un fondo transparente, para comenzar.

Los pasos: 1. Tomar la imagen en su programa de manipulación de imágenes favorito (Ex. Photoshop)

1. doble o ampliar la imagen de la lona de la cantidad necesaria para incluir la reflexión en la dirección apropiada
2. Duplicar la capa (Capa de Photoshop/Capa duplicada)
3. Refleja la imagen.(Photoshop-Capa/Rotación de la imagen/lienzo tirón (su dirección))
4. Mover la capa duplicada de forma que aparece como un espejo con la función Mover
5. Seleccione la herramienta Marqués, y establecer el desenfoque del borde hasta alrededor 50% del ancho de la imagen original.
6. Arrastre el cursor sobre la capa "reflejada", no se preocupe si dice que las líneas de selección no estarán visibles, a menos que no indique nada. Si dice que no se seleccionó nada, reduzca el desenfoque del borde a aproximadamente el 25% y vuelva a intentarlo.
7. Una vez que tenga una selección, ya sea visible o no, elimine el área seleccionada. Esto debería darle un aspecto "reflejado".
8. Si lo desea, agregue un fondo en una capa debajo de todo lo demás.
9. Guarde su imagen como un archivo jpg si no tiene un fondo transparente o un png si lo hace. Úselo en lugar de la imagen que estaba reflejando y desapareciendo con el código. Esto será principalmente compatible con el navegador.