Geek Answers Handbook

CSS reflection gradients in android browser

I have CSS to display a reflection of an element that uses -webkit-gradient to fade out:

.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)); }
  • In browsers that support -webkit-box-reflect, such as chrome, this displays a reflection of the element, which gradually disappears as expected.
  • In browsers that do not support it at all, reflection is not displayed.

However, the reflection in the Android browser is displayed, but it does not disappear.

Is there any way to get Android:

  • the reflection goes out, or
  • do not show reflection at all.

I know that I could use javascript to detect the browser and change the style accordingly, but I would prefer only for the CSS solution.

+5
4

, , .

, , . , , , . , , PNG , .

: 1. (, Photoshop).

  • , .
  • (Photoshop-Layer/Duplicate Layer)
  • . (Photoshop-Layer/Rotation/Flip Canvas ( ))
  • , ""
  • Marquis 50% .
  • "", , , , , . , , 25% .
  • , , . "" .
  • .
  • jpg, png, . , . .
+1

CSS . : , .

0

, - Android,

, , . JavaScript/modernizr, , , .

canvas HTML, drawImage . canvas webkit.

.

0
source

Do gradients do at all in the android browser? if they do, make sure you are using the correct version. The old webkit format can be used there. If not, just use modernizr to hide it in places that don't support gradients.

0
source

More articles:


All Articles