Join Joseph Lowery for an in-depth discussion in this video Incorporating radial gradients, part of Creating Photo Card Titles with HTML5.
A linear gradient, one that follows along a line from one color to another,…doesn't require much explanation.…But what's a radial gradient?…As the name implies--not too clearly, but it's there--…with a radial gradient we transition from one color to another along a radius.…In this lesson, we'll insert our code so that the color in the first color…picker, text color, is in the center ring of the text and the gradient color fills…the outer ring. And of course there's a smooth transition between the two.…
Okay let's get to it.…Now all of our infrastructure is already in place, thanks to adding the code for…the linear gradient in the previous lesson.…We only need to add the code to handle the condition if radial gradient is…chosen from the fill type list.…We can put all that code we need in an else-if block.…I'm going to scroll down to where we have our linear gradient code, which starts…on line 288 with a couple of variables, and I'm just going to inject this else-…if clause right in front of the else clause.…
Check out the rest of the HTML5 Projects series.
- Setting up a caption submission form
- Creating basic text entry fields
- Integrating color pickers in the form
- Applying text effects like shadows and gradients