Menu
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); } </style> </head> <body> <h1>Gradient Editor</h1> <form> <input type="text" id="firstValue">orientation</input><br /> <input type="text" id="firstColor">first color</input><br /> <input type="text" id="secondColor">second color</input><br /> </form> <button type="button" onclick="renderButton()">Render</button> <div id="mainHolder">Content</div> </body> </html> So to recap, the user will specify their 3 values, which get passed to the function 'renderButton();'. What line can I use to change the 3 values of the CSS3 gradient so that the user can make their own custom gradient boxes? I'm assuming its only a line or two that I will need.
P.S. I realize this example only works in Firefox. I just want to get the concept down before working on different browsers.
340
The linear-gradient() function sets a linear gradient as the background image. To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
Thanks to the new @property defined in the CSS Properties and Values API Level 1 specification we can now have transition with custom properties (aka CSS variables).
To add a gradient overlay to a text element, we need to set three different CSS properties to the text we want to style: background-image: <gradient> background-clip: text. text-fill-color: transparent.
SVG provides for two types of gradients: linear gradients and radial gradients. Once defined, gradients are then referenced using 'fill' or 'stroke' properties on a given graphics element to indicate that the given element shall be filled or stroked with the referenced gradient.
Start with something like the following:
var dom = document.getElementById('mainHolder'); dom.style.backgroundImage = '-moz-linear-gradient(' + orientation + ', ' + colorOne + ', ' + colorTwo + ')'; If you need to support more browsers than Firefox, this will need to be done in combination with either browser-sniffing or some Modernizr-like feature detection.
Below is an example of how this can be done, using feature-detection similar to Modernizr (tested in Firefox, Chrome, Safari, Opera).
// Detect which browser prefix to use for the specified CSS value // (e.g., background-image: -moz-linear-gradient(...); // background-image: -o-linear-gradient(...); etc). // function getCssValuePrefix() { var rtrnVal = '';//default to standard syntax var prefixes = ['-o-', '-ms-', '-moz-', '-webkit-']; // Create a temporary DOM object for testing var dom = document.createElement('div'); for (var i = 0; i < prefixes.length; i++) { // Attempt to set the style dom.style.background = prefixes[i] + 'linear-gradient(#000000, #ffffff)'; // Detect if the style was successfully set if (dom.style.background) { rtrnVal = prefixes[i]; } } dom = null; delete dom; return rtrnVal; } // Setting the gradient with the proper prefix dom.style.backgroundImage = getCssValuePrefix() + 'linear-gradient(' + orientation + ', ' + colorOne + ', ' + colorTwo + ')'; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
