Join Chris Converse for an in-depth discussion in this video Creating a semitransparent gradient with CSS, part of Creating a Responsive Homepage Marquee.
- View Offline
- Now we're gonna add a semi-transparent gradient to the overlay div we injected earlier so that we can read the text at the bottom of the screen. So let's go back to our CSS file. Let's hit a few returns. Let's target that overlay element, so .marquee .overlay [, add a few more lines and add an ]. Now all the modern browsers support the straight linear gradient properties set to the background image. So what we're gonna be doing is we're gonna be setting up a background image, setting up linear gradient, we're gonna set up the color black with 0% opacity, and then black with a 70% opacity, then we're going to start the first color at 45 degrees, and end the second color at 70 degrees.
That's gonna give us a semi-transparent gradient over top of our image. Now if you're concerned about supporting IE9 or earlier versions of Internet Explorer, then you'll need to do something different. One option is you could create graphics that have the gradient in them in a tool like Photoshop, and then save out the JPEG where the bottom part of the image is darker. Or the other option is you can use the gradient editor at a website called colorzilla.com, but they use a technique that combines SVG and CSS to create a semi-transparent gradient in IE9.
So again, if you need to support IE9, then I would recommend one of these two options. So back in our CSS file, let's start adding some properties to the overlay class. So we'll start with position. We'll set this to absolute. Then we'll set a left property of 0 pixels, then a top property of 0 pixels. Next we'll specify a width. We'll set that to 100%, then a height to 100%, then we'll set background-image.
The gradient property's gonna be linear-gradient (, we'll specify the color in rgba, so 0,0,0, then 0 for the opacity. We'll set the position to 45%, then , then rgba again, 0,0,0 for black, and then .7 for 70%. Then we'll also set the position to 70% as well. Then we'll come down and add background size at 100%.
Save your CSS. Let's go back to the browser, and let's hit reload. Now we'll see our gradient showing up above our photograph, but still behind the panel content container. Now with this in place, next we'll start styling and positioning the navigation.
- Creating SEO-friendly markup for the marquee data
- Adding and populating an HTML debug area
- Creating a marquee timer
- Injecting HTML markup
- Creating navigation buttons
- Halting animations based on user interaction
- Loading and cross-fading content
- Styling the marquee with CSS
- Using media queries for more precise responsiveness