This video tutorial explains how to use the Gradient Tool in Adobe Illustrator to combine two or more colours to make a gradient effect. We will look at how to make linear gradients and radial gradients as shown below. Gradients can combine multiple colours or different shades of the same colour.
Watch the video below to see how you can use gradients in your own Illustrator drawings and illustrations.
The code below shows how to use linear and radial gradients to fill rectangle shapes.
The three shapes will look like this (linear gradient on top left, radial gradient on top right, image pattern on bottom left side):
Watch the video below and then scroll down to see the sample code.
Here is the code:
<!DOCTYPE html> <html> <head> <title>Gradients and patterns</title> <style> #myCanvas{ background-color: white; border: 1px solid black; } </style> <script> var patternImage = new Image(); patternImage.src = "pattern.png"; function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); var gradient = ctx.createLinearGradient(0,0,150,0); // x1, y1, x2, y2 gradient.addColorStop(0, "red"); gradient.addColorStop(0.5, "yellow"); gradient.addColorStop(1, "green"); ctx.fillStyle = gradient; ctx.strokeStyle = "blue"; ctx.fillRect(0,0,150,75); ctx.strokeRect(0,0,150,75); var gradient2 = ctx.createRadialGradient(350,100,0,350,100,200); // ctx.createRadialGradient parameters are x1, y1, r1, x2, y2, r2 gradient2.addColorStop(0, "yellow"); gradient2.addColorStop(1, "blue"); ctx.fillStyle = gradient2; ctx.strokeStyle = "blue"; ctx.fillRect(250,0,200,200); ctx.strokeRect(250,0,200,200); var pattern = ctx.createPattern(patternImage, "repeat"); ctx.fillStyle = pattern; ctx.strokeStyle = gradient; ctx.lineWidth = 20; ctx.fillRect(20,150,200,200); ctx.strokeRect(20,150,200,200); } window.onload=draw; </script> </head> <body> <canvas id="myCanvas" width="500" height="400"> </body> </html> |
Next tutorial: Simple animations using JavaScript
In this tutorial we will have a look at the parent/child relationship in CSS. All elements in an HTML document can be both parents and children, except for the body which can only be a parent. A div can be a child of the body or another div. A paragraph, heading, or other element can also be a child of the body or another div.
For example, if you place a <h1> heading inside a div, then the div is the heading’s parent and the body would be the div’s parent. This is called the parent/child relationship in CSS. We can use child selectors in CSS to apply styles to elements that are a child of another element such as a div or table. The image below illustrates the parent/child relationship in CSS.
The video below shows how to use child selectors in CSS to apply styles to child elements in an HTML web page. Watch the video below and then scroll down to see the HTML and CSS code.
Here’s the HTML code:
<!DOCTYPE html> <html> <head> <title>Child selectors</title> <meta charset="utf-8"/> <link rel="stylesheet" href="resources/stylesheet7.css" type="text/css"/> </head> <body> <div> <p>This paragraph has a parent div.</p> </div> <p>This paragraph does not have a div as a parent.</p> <div id="myparagraph"> <p>This paragraph is a child of another div.</p> </div> <p>This is another paragraph without a parent div.</p> </body> </html> |
And here’s the CSS code:
p{ color:blue; } div p{ color:red; } #myparagraph p{ color:green; } |
This video tutorial explains how to use a motion tween tint colour effect to fade objects in Adobe Flash CS6. Click here to watch the video on YouTube or view it below.
You can use gradient colours in Adobe Flash CS6 for shapes that you have drawn using the pencil/brush tools or the shape tools. You can create two types of gradients: Linear gradients and Radial gradients. Gradients can combine two or more colours and you can customise the distance between the different colours as well as the angle they follow. You can specify the colour gradient when you create a shape or later on by filling with the paint bucket tool. Watch the video below or click here to view it on YouTube.
