linear-gradients | 易学教程

How to use SVG gradients to display varying colors relative to the size of the colored region

阅读更多关于 How to use SVG gradients to display varying colors relative to the size of the colored region

问题 I'm using SVG and D3 to create bar graphs and have a question concerning how to color them. I've searched many questions on this site and others and haven't yet found anyone with the same issue. I would like each bar to start at the bottom with one color, (yellow, e.g.) and, as the bar gets taller, progressively mix in more of the second color, (red, e.g.), so that the bars at their maximum potential height would be only the second color. In this example, the tops of the bars that are half

How to make diagonal circle border gradient?

阅读更多关于 How to make diagonal circle border gradient?

问题 I have a problem with CSS3. I don't know how to make a diagonal round gradient border like that: I found something like this: .box { width: 250px; height: 250px; margin: auto; background: #eee; border: 20px solid transparent; -moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%); -webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%); border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%); border-image-slice: 1; } <div class=

Change text color black to white on overlap of bg

阅读更多关于 Change text color black to white on overlap of bg

I have a div that is positioned absolute with a background color gradient. I have this text on it that I want to change to the color white as I scroll the text up. I'm using the 'mix-blend-mode' property to achieve this currently but I can't find any setting that will turn the text from black to white. Has anyone done this before or can think of a trick I can do? .bg-container { position: fixed; top: -30px; left: 0; width: 100px; height: 100px; } .gradient-background { position: absolute; top: 0; left: 0; width: 100px; height: 200px; background-image: linear-gradient(to bottom, rgb(100, 182,

Is it better to use images or CSS to keep performance of a webpage or application as high as possible?

阅读更多关于 Is it better to use images or CSS to keep performance of a webpage or application as high as possible?

问题 My project's creative designer and I have had some amicable disagreements as far as whether it is better to use slices of his comp or rely on the browser's rendering engine to create certain aspects of the user experience. One specific example is with a horizontal "bar" that runs the entire width of the widget. He created a really snazzy gradient that involves several stops of different colors and opacities, and he feels that the small size of the image is preferable or at least comparable to

How can I correctly add a shadow and a gradient to my shape?

阅读更多关于 How can I correctly add a shadow and a gradient to my shape?

I want to make the following design: I tried with :after and :before but it does not work. Here’s my current code: .design { background: #ea053a; display: inline-block; height: 155px; margin-left: 33px; margin-right: 40px; position: relative; width: 228px; } .design:before { border-top: 43px solid #ea053a; border-left: 50px solid transparent; border-right: 50px solid transparent; margin-right: 40px; content: ""; height: 0; left: 0; position: absolute; top: 55px; margin-top: 100px; width: 128px; } <div class="design"></div> ( fiddle ) How could I leave it the same as the original design and

Linear gradient in Chrome and Safari browsers

阅读更多关于 Linear gradient in Chrome and Safari browsers

I am having trouble showing a linear gradient in Safari and Chrome. In Firefox it shows up fine. I am trying: background: -webkit-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent; background: -moz-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent; background: -ms-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent; background: -o-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent; Thanks you for your help. Zoltan Toth Try this - http://jsfiddle.net/fwkgM/1/ background-color: #9e9e9e;

Set Background Gradient on Button in Swift

阅读更多关于 Set Background Gradient on Button in Swift

I have no idea how to set the background gradient on a button (without making the background gradient an image). This is so different from Android. Here's a class I have to define a returnable gradient scheme: import UIKit extension CAGradientLayer { func backgroundGradientColor() -> CAGradientLayer { let topColor = UIColor(red: (0/255.0), green: (153/255.0), blue:(51/255.0), alpha: 1) let bottomColor = UIColor(red: (0/255.0), green: (153/255.0), blue:(255/255.0), alpha: 1) let gradientColors: [CGColor] = [topColor.CGColor, bottomColor.CGColor] let gradientLocations: [Float] = [0.0, 1.0] let

Change text color black to white on overlap of bg

阅读更多关于 Change text color black to white on overlap of bg

问题 I have a div that is positioned absolute with a background color gradient. I have this text on it that I want to change to the color white as I scroll the text up. I'm using the 'mix-blend-mode' property to achieve this currently but I can't find any setting that will turn the text from black to white. Has anyone done this before or can think of a trick I can do? .bg-container { position: fixed; top: -30px; left: 0; width: 100px; height: 100px; } .gradient-background { position: absolute; top

Reproducing SVG gradient equivalent to CSS gradient with linear-gradient

阅读更多关于 Reproducing SVG gradient equivalent to CSS gradient with linear-gradient

You can create CSS gradients in modern sites with something as simple as: background-image: linear-gradient(red, orange); The goal is to recreate this gradient in SVG, so what percentages are being used by default for each CSS stop? We tinkered with different percentages (e.g., 50/50, 25/75) with the code below, but none of these experiments produced the same gradient. The closest was 10/90, but could someone confirm the default percentages used if you omit them? div { height: 100px; background-color: red; background-image: linear-gradient( red 50%, orange 50% ); } When you have 2 colors the

White line appears at end of gradient filled div at specific browser widths

阅读更多关于 White line appears at end of gradient filled div at specific browser widths

I have a div with id #gradient_div with a background-image set to linear-gradient . I'm getting a gap between the end of the linear-gradient and the end of the div #gradient_div only at certain browser window widths. As I stretch and shrink the browser window this white line disappears and reappears. It seems like it has something to do with the margin: When I have the margin set to margin: 0 1%; , the while line appears at specific window widths. At 1% the white line appears whenever the window width ends in the range of 68-92 ex: 4 68 px-4 92 px, 5 68 px-5 92 px, 6 68 px-6 92 px, etc. For