linear-gradients | 易学教程

iOS Find Color at Point Between Two Colors

阅读更多关于 iOS Find Color at Point Between Two Colors

问题 I have a problem: I need to be able to take two colors and make a 'virtual gradient' out of them. I then need to be able to find the color at any point on this line. My current approach is this: if (fahrenheit < kBottomThreshold) { return [UIColor colorWithRed:kBottomR/255.0f green:kBottomG/255.0f blue:kBottomB/255.0f alpha:1]; } if (fahrenheit > kTopThreshold) { return [UIColor colorWithRed:kTopR/255.0f green:kTopG/255.0f blue:kTopB/255.0f alpha:1]; } double rDiff = kTopR - kBottomR; double

Are “top” and “to top” the same direction for linear gradients?

阅读更多关于 Are “top” and “to top” the same direction for linear gradients?

问题 Browser implementations of linear-gradient() have evolved to support both top and to top as anchor values. Are they the same direction or opposites? 回答1: They are opposites . to top uses the first color argument at the bottom of the element, while top uses the first color argument at the top. Here's a fiddle. MDN has the full details and history. 回答2: They are not the same direction; they are opposites. to top is an abbreviation for "bottom to top", whereas top means "start from the top". 1

Is it possible to use gradients in emails?

阅读更多关于 Is it possible to use gradients in emails?

问题 Is it possible to use gradients on elements in newsletter emails, using CSS? Is the full property supported? 回答1: In short, no. Email clients very rarely support HTML5 or CSS3, and so it will break in any clients that don't. You could always have a fallback, but the load time won't change too much, and adding CSS3 simply adds more code to keep track of. I would recommend using image tags and hosting the images on your server, and that's if you really have to use gradients at all. With email,

2d color gradient plot in R

阅读更多关于 2d color gradient plot in R

问题 I want to produce a 2d color gradient rectangle like the ones in the picture below on the right hand side. How can I do this in R? Using colorRamp or RColorBrewer or other functions/packages I can produce nice 1D dolor ramps. But how do I do this for 2D including several colors in the corners, like e.g. the upper right rectangle? What I want to get is e.g. the following two gradient types: BTY: I completely forgot to mention that I found the above chart here (produced by Luca Fenu). 回答1:

Blurry linear gradient stops in chrome

阅读更多关于 Blurry linear gradient stops in chrome

问题 If I am using a linear gradient with multiple stops like this: div { border: 1px solid black; width: 100px; height: 2000px; display: inline-block; background-image: linear-gradient(to bottom, #383937 0, #001500 35px, #ffffff 35px, #b0b0b0 150px, #ffffff 150px, #ffffff 100%); } Firefox Problem free. Chrome The transitions between gradient colors are blurry. I am reusing a position to define a new color, so on position 35, the color goes from #001500 to #ffffff instantly (or at least should).

Blocky gradient effect in CSS3

阅读更多关于 Blocky gradient effect in CSS3

Is it possible to make the below gradient look more "blocky", so that instead of switching from green to red gradually, it's done in steps like the below picture? Desired effect: Currently: #gradients { background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #00FF00), color-stop(0.5, #FFFF00), color-stop(1, #FF0000)); background-image: -o-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%); background-image: -moz-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000 100%); background-image: -webkit-linear-gradient(right, #00FF00 0%, #FFFF00 50%, #FF0000

How to add border to a container with transparent gaps in between

阅读更多关于 How to add border to a container with transparent gaps in between

Here is an image of the design which I am trying to achieve with only CSS. How do I achieve such border for the container div so that I can place transparent logo and text in between the gaps. This design will go on a video background. The black background is just for illustration purpose. So far I have tried to achieve something like this as a test: body { background: black; } p { color: #ffffff; font-size: 16px; text-align: center; padding: 30px; } .steps-frame-1 { margin-top: 60px; width: 50%; height: 200px; margin-left: auto; margin-right: auto; } .steps-frame-1 { border: 0; position:

Cross browser text gradient in pure css without using background image [closed]

阅读更多关于 Cross browser text gradient in pure css without using background image [closed]

问题 I have tried a lot for text gradient. I have found the code for safari and chrome but it is not compatible in other browsers. I want to make it work without using the background image. If u have any proper solution, kindly provide. 回答1: I found the best way to do this is to use SVG gradients, it's easy to do and doesn't require any images, below is some code that creates a simple text gradient using SVG. <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <linearGradient id="grad1"

SVG gradient using CSS

阅读更多关于 SVG gradient using CSS

问题 I'm trying to get a gradient applied to an SVG rect element. Currently, I'm using the fill attribute. In my CSS file: rect { cursor: pointer; shape-rendering: crispEdges; fill: #a71a2e; } And the rect element has the correct fill color when viewed in the browser. However, I'd like to know if I can apply a linear gradient to this element? 回答1: Just use in the CSS whatever you would use in a fill attribute. Of course, this requires that you have defined the linear gradient somewhere in your SVG

Using JavaScript to edit CSS gradient

阅读更多关于 Using JavaScript to edit CSS gradient

I am working on editing CSS gradients through JavaScript in Firefox. I have input boxes where the user can put 1. Orientation 2. 1st Color 3. 2nd Color Here is the html <html> <head> <title>Linear Gradient Control</title> <script> function renderButton(){ var orientation = document.getElementById("firstValue").value; var colorOne = document.getElementById("firstColor").value; var colorTwo = document.getElementById("secondColor").value; //alert(orientation); //alert(colorOne); //alert(colorTwo); }; </script> <style> #mainHolder { width:500px; background: -moz-linear-gradient(left, green, red);