A common imaging technique is to apply a gradient overlay to an image. This can be accomplished on a webpage but a gradient has to be in a div over the video. This exercise shows how to accomplish this.
- [Instructor] In this exercise,…we're going to do something you may not be expecting,…and that is apply a gradient overlay to a video.…As designers, we're all pretty comfortable…with applying gradient overlays…to images in, say, Photoshop, or overlaying a gradient…on top of a background image in a web page.…Applying the same technique to video is a bit trickier,…because you can't use CSS to put a video in the background.…Instead, you have to render the gradient in its own div,…on top of the video.…
Let's see how all of this works.…And to get yourself started, open the gradient.html file…found in your chapter download.…So I'm going to pop over to my code editor,…which is Brackets, and we'll get started.…The first thing we need to do, of course,…is to create the div that will hold the gradient.…So, right here, on line 59, right on the comment,…just select it, and we'll enter the div.…So it's div id equals gradient,…and we'll close the div, just like that, there we go.…
And we got that done.…Now that we've given the div an id,…
- Key video formats used to publish on the web
- Encoding video that's optimized for online delivery
- HTML5 native video embedding and interaction
- Styling video components with CSS
- Captioning video
- Preparing video for social media
- Using Dynamic Link
Skill Level Beginner
Design the Web: HTML Background Videowith Chris Converse28m 35s Intermediate
Web Video: Develop Your Video Presencewith Rick Allen Lippert41m 54s Intermediate
Web Video: Makeup Techniqueswith Rick Allen Lippert25m 47s Intermediate
Exercise files1m 11s
1. Web Video Formats
2. Encoding Video
3. HTML5 and Video
4. Video and CSS
5. Playing with Video
Next steps1m 23s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.