4:18
In this tutorial viewers will learn how to define a gradient in CSS.
Video Steps
1. Create a new HTML document with an internal stylesheet.
2. Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you specify a direction and start and end colors.
3. Create a new div in CSS and name it Gradient2. Define the background as "linear-gradient(45deg, #ee3668, black, rgba(255,0,0,1))" This is an example of multiple color stops and transparency.
4. Create a new div in CSS and name it Gradient3. Define the background as "radial-gradient(#ee3668 10%, white 45%, black)". Ensure you specify colors and percentages. This is an example of a radial gradient with defined color stops.
5. Style the h1 element to be white text.
6. In the HTML, type the tag for the Gradient div. Inside the Gradient div, type some text inside an h1 tag. Do the same for the other divs.
0 Comments
Suggested Videos
| Title | Views | Activity |
|---|---|---|
| Embedded Videos in HTML5 | 84 | |
| Using Google Font API in CSS | 69 | |
| Introduction to CSS (Part 1) | 80 | |
| Introduction to HTML (Part 2) | 151 |
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Suggested Courses
Next Video:Rounded Corner Effect in CSS