Question

Create a div element with a width and height of 500px. create a diagonal linear gradient...

Create a div element with a width and height of 500px. create a diagonal linear gradient using the colors of the rainbow- red orange yellow green blue indigo violet. Then in seperate program create a radial gradient with 3 colors, the width and height are 500px and the graident starts at the bottom-left corner.

HTML

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "linearGradient.html" is created, which contains following code.

linearGradient.html :

<!DOCTYPE html>

<html lang="en">

<head>

<!-- title for web page -->

<title>Linear Gradient</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- internal stylesheet -->

<style>

/* style rule for div */

div{

height: 500px;

width: 500px;

background:linear-gradient(to bottom right ,red,orange, yellow, green, blue, indigo, violet);

}

</style>

</head>

<body>

<div></div>

</body>

</html>

======================================================

Output : Open web page linearGradient.html in the browser to get the screen as shown below

Screen 1 :linearGradient.html

********************************************

Question 2:

Here a new web page with name "radialGradient.html" is created, which contains following code.

radialGradient.html :

<!DOCTYPE html>

<html lang="en">

<head>

<!-- title for web page -->

<title>Radial Gradient</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- internal stylesheet -->

<style>

/* style rule for div */

div{

height: 500px;

width: 500px;

background-image: radial-gradient(circle at bottom left,maroon,pink,purple);

}

</style>

</head>

<body>

<div></div>

</body>

</html>

======================================================

Output : Open web page radialGradient.html in the browser and will get the screen as shown below

Screen 1 :radialGradient.html

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
Suppose you are conducting an experiment consisting of rolling a twelve sided die, spinning a wheel...
Suppose you are conducting an experiment consisting of rolling a twelve sided die, spinning a wheel with equal sections in the colors of the rainbow (red, orange, yellow, green, blue, indigo, violet), and flipping a coin. What is the probability of getting a 5 or higher on the die roll, landing on a primary color on the wheel, and getting heads on the coin flip?
Create a webpage with CSS Box Model: Create a basic web page using the 5 required...
Create a webpage with CSS Box Model: Create a basic web page using the 5 required html tags. Add paragraph tags and enclosed them with a div element. Using the CSS Box Model, style the div element to have a total width of 350px and a height of 250px. It should have 10px padding on all sides, a gray border of 5px on all sides, and 15px margins on both sides but none on the top and bottom. Add a...
What I need to do :) Go to the code_scroll.css file and create a style rule...
What I need to do :) Go to the code_scroll.css file and create a style rule for the section element with the id container with the following styles: 1. Set the width of the element to 900 pixels and the height to 370 pixels. 2. Horizontally center the element by adding a 10 pixel top/bottom margin and set the left/right margin to auto. 3. Place the element with relative positioning, setting the top value to 30 pixels and the left...
TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error...
TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error in the JavaScript file? Find error message in console in a browser’s developer tool. Fix that error and reload the web page in browser. What is the change in the content displayed in the web page after fix the syntax error in the JavaScript code? Replace the line#18 statement (el.textContent = '$' + total;) in the JavaScript code with    el.textContent = '$' + total.toFixed(3);...
convert to python 3 from python 2 from Tkinter import * # the blueprint for a...
convert to python 3 from python 2 from Tkinter import * # the blueprint for a room class Room(object): # the constructor def __init__(self,name,image): # rooms have a name, exits (e.g., south), exit locations (e.g., to the south is room n), # items (e.g., table), item descriptions (for each item), and grabbables (things that can # be taken and put into the inventory) self.name = name self.image = image self.exits = {} self.items = {} self.grabbables = [] # getters...
Compile and execute the application. You will discover that is has a bug in it -...
Compile and execute the application. You will discover that is has a bug in it - the filled checkbox has no effect - filled shapes are not drawn. Your first task is to debug the starter application so that it correctly draws filled shapes. The bug can be corrected with three characters at one location in the code. Java 2D introduces many new capabilities for creating unique and impressive graphics. We’ll add a small subset of these features to the...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT