<

Alpha Transparency in CSS

Posted on
6,215 Points
115 Views
1 Endorsement
Last Modified:
Published
Experience Level: Beginner
3:17
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

1
0 Comments

Suggested Videos

Title Views Activity
Drop-Cap Effect in CSS 90
Embedded Audio in HTML5 184
Embedded Videos in HTML5 84
Introduction to HTML (Part 1) 115
Find out what you should include to make the best professional email signature for your organization.
Presenting data tables with the ability to interact with the DIVs or cells of information and allowing the first column and the first row to remain in place while scrolling through the data. No HTML tables... just DIVs in columns

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month