Watch Alpha Transparency in CSS

Posted on
6,195 Points
1 Endorsement
Last Modified:
Experience Level: Beginner
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS

Video Steps

1. Start with a normal styled element, such as a div.

2. Define its "background-color" property as "rgba (255, 255, 255, .5)

3. The numbers in the parentheses symbolize the Red, Green, Blue, and Alpha Transparency values of the color

4. To find the RGB values of a color, you can use Adobe Photoshop in RGB Color mode and use the Color window (Windows > Color)

5. The RGB combination (255, 255, 255) indicates white; (0, 0, 0) would indicate black

6. The Alpha value is for transparency and must be a number from 0 through 1; 0 indicates complete transparency while 1 indicates a completely opaque element so .5 will be 50% transparent

7. Using different numbers for the R, G, and/or B values will result in a colored translucent background


Suggested Videos

Title Views Activity
Corner Ribbon Effect in CSS 329
Drop-Cap Effect in CSS 87
Embedded Audio in HTML5 183
Introduction to CSS (Part 1) 80
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.
Via various tools, systems and automated alerts I generate thousands of emails per day. Using a common method to send these emails makes it easier to standardize these messages. One key feature of these email methods is stylized emails. This article…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month