Gradients don’t support transitions yet (although the current spec says they should support like gradient to like gradient transitions via interpolation.). If you want a fade-in effect with a background gradient, you have to set an opacity on a container element and ‘transition` the opacity. (There have been some browser releases that supported transitions on … Read more
Ok I have managed to solve this using a selector. See code below: main_header.xml: <?xml version=”1.0″ encoding=”utf-8″?> <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”50dip” android:orientation=”horizontal” android:background=”@drawable/main_header_selector”> </LinearLayout> main_header_selector.xml: <?xml version=”1.0″ encoding=”utf-8″?> <selector xmlns:android=”http://schemas.android.com/apk/res/android”> <item> <shape> <gradient android:angle=”90″ android:startColor=”#FFFF0000″ android:endColor=”#FF00FF00″ android:type=”linear” /> </shape> </item> </selector> Hopefully this helps someone who has the same problem.
Yes. You can use rgba in both webkit and moz gradient declarations: /* webkit example */ background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(50,50,50,0.8)), to(rgba(80,80,80,0.2)), color-stop(.5,#333333) ); (src) /* mozilla example – FF3.6+ */ background-image: -moz-linear-gradient( rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95% ); (src) Apparently you can even do this in … Read more
Visual examples help with this kind of question. Boilerplate In order to create a gradient, you create an xml file in res/drawable. I am calling mine my_gradient_drawable.xml: <?xml version=”1.0″ encoding=”utf-8″?> <shape xmlns:android=”http://schemas.android.com/apk/res/android”> <gradient android:type=”linear” android:angle=”0″ android:startColor=”#f6ee19″ android:endColor=”#115ede” /> </shape> You set it to the background of some view. For example: <View android:layout_width=”200dp” android:layout_height=”100dp” android:background=”@drawable/my_gradient_drawable”/> type=”linear” … Read more
The border-image property can accomplish this. You’ll need to specify border-style and border-width too. border-image: linear-gradient(#f6b73c, #4d9f0c) 30; border-width: 4px; border-style: solid; Read more on MDN.
Apply the following CSS: html { height: 100%; } body { height: 100%; margin: 0; background-repeat: no-repeat; background-attachment: fixed; } Edit: Added margin: 0; to body declaration per comments (Martin). Edit: Added background-attachment: fixed; to body declaration per comments (Johe Green).
Multiple backgrounds! body { background: #eb01a5; background-image: url(“IMAGE_URL”); /* fallback */ background-image: url(“IMAGE_URL”), linear-gradient(#eb01a5, #d13531); /* W3C */ } These 2 lines are the fallback for any browser that doesn’t do gradients. See notes for stacking images only IE < 9 below. Line 1 sets a flat background color. Line 2 sets the background image … Read more