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
0 Comments
Suggested Videos
| Title | Views | Activity |
|---|---|---|
| Box Shadow Effect in CSS | 151 | |
| Embedded Videos in HTML5 | 84 | |
| Introduction to HTML (Part 1) | 115 | |
| Introduction to jQuery (Part 1) | 853 |
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Without even knowing it, most of us are using web applications on a daily basis. In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
Suggested Courses
Next Video:Introduction to jQuery (Part 2)