linear-gradients

问题 TL;DR -webkit-linear-gradient is breaking -moz-linear-gradient So hear's the conundrum, I'm using the Jquery Slider plugin with two handles on it and I have a gradient as the background color to give the outside ranges some color. What I'm trying to do is update the percentages on the gradients when the slider moves. It works in Chrome / Safari, but not in Firefox when both the -moz and -webkit tags are used. The value is being pulled from the position of the first slider. When I only have

问题 I want to set a custom drawable with a linear gradient as the background drawable of the bar in my SeekBar . I am creating the LinearGradient in the second statement in the following snippet, and doing it like so: // Creating the drawable: ShapeDrawable shapeDrawable = new ShapeDrawable(new RectShape()); Shader linearGradientShader = new LinearGradient(0, 0, 300, 20, new int[] { Color.RED, Color.BLUE }, new float[] { 0, 1 }, Shader.TileMode.CLAMP); shapeDrawable.getPaint().setShader

问题 I want the bottom of my background-color to be another colour. I'm sure it involves a linear-gradient ? but unsure on how to implement it Sample code : .background{ height:100px; width:200px; background-color: #11143b; background: linear-gradient(top, red, red 70%, transparent 70%, transparent 100%); } <div class="background"> </div> How I eventually want the above code to look : Any help would be appreciated. 回答1: Simply like this: .background{ height:100px; width:200px; background: linear

问题 Been looking for a way to fade a scroll in top and bottom. I know the way where you use 2 png in top and bottom, problem is that only seems to be usefull when scroll in on a solid color page. But i want it to happen on page where the there is a background image.. Any ideas? if its even possible? JS, HTML5, CSS? Here is a picture to describe the effect: 回答1: This might be what you're looking for. DEMO JSFiddle HTML <div class="wrap"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

问题 I need to reflect text with CSS and add gradient to it. Here is an example of what I want. But I do not want fade-out png image with alpha transparency as body has a background . https://jsfiddle.net/9318Ltkp/ .slogan { font-size: 30px; line-height: 121px; position: relative; float: right; margin-right: 115px; text-transform: uppercase; color: #f00; } .slogan::after { position: absolute; z-index: 1; right: 0; bottom: -26px; left: 0; display: block; content: 'comming soon'; transform: scaleY(

问题 I've implemented a hover effect on a h1 element (see code and pen below), but the effect is behaving strangely on mouse out and sort of flickering before going back to it's original state. Any ideas how to make it transition back to it's original color as smoothly as it fades in on hover? Thanks in advance. https://codepen.io/lobodemon/pen/YOXKNJ h1 { transition: 0.5s; } h1:hover { background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); background-size: 400% 400%; color

问题 I've seen vertical columns created in pure CSS with something like this: div { height: 300px; background: linear-gradient(to right, #a2ea4c 200px, #07aa91 200px, #07aa91); } <div></div> Is it possible to make a horizontal header of a fixed size in a similar manner as the above i.e. using only CSS? ** EDIT ** The below is a minimal example of what I'm trying to do. I wan't to set the background gradient on the html tag in order to have different overscroll colors on the top and bottom of the

问题 I have problem with linear-gradient in Mozilla Firefox 16. On screenshow bad thing is visible (bad - light line at the bottom of block). Code: <a href="#">Button Text</a> And CSS part: a { background: -moz-linear-gradient(center top , #88EB52, #3CA82D); border: 1px solid #399A29; border-radius: 4px 4px 4px 4px; color: #FFFFFF; display: block; float: left; font-size: 16px; font-weight: bold; line-height: 54px; margin-bottom: 20px; margin-top: 20px; text-align: center; text-decoration: none;

问题 I've decided to completely drop support for IE6 and IE7 in my website, redirecting it's users to a text-only warning page. However I still support IE8 and IE9. I am achieving this using CSS3 PIE, and border-radius works in both (IE8/9), box-shadow works in both, however I also rely on linear-gradient. I have heaps of tags in use to achieve this: background: #E6E6E6; /* fallback */ background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7)); /* old webkit */ background:

问题 I want to animate the center of a linear gradient, so that at the beginning the whole drawable is color1 and at the end the whole drawable is color2 and in between the center of the gradient moves from left to right. GradientDrawable gd = new GradientDrawable( GradientDrawable.Orientation.LEFT_RIGHT, new int[] {color1, color2}); gd.setCornerRadius(0f); gd.setGradientCenter(x, 0); view.setBackgroundDrawable(gd); The problem is that setGradientCenter doesn't make any difference. According to