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 |
|---|---|---|
| Custom List Bullets in CSS | 246 | |
| Embedded Audio in HTML5 | 184 | |
| Introduction to CSS (Part 1) | 80 | |
| How to set up a global email signature in Office 365 and add it only to new emails | 2,212 |
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
- C
- HTML
- Miscellaneous
- Math / Science
- Security
- *Coding, *data science
This article covers 3 key tips for entering the IT field and resources to leverage in order to pursue the path you wish to run towards. These tips apply to those especially without a background in IT at any age. On your mark, get set....go!
- Computer Games
- Game Programming
- Experts Exchange
- HTML
- Miscellaneous
- Personal Development, PC, Hardware, *Education, *Online training
Suggested Courses
Next Video:Using Google Font API in CSS