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 |
|---|---|---|
| Drop-Cap Effect in CSS | 90 | |
| Embedded Audio in HTML5 | 183 | |
| Embedded Videos in HTML5 | 84 | |
| Lists and Links | 106 |
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Enroll in these four OWASP courses: Avoiding Hacker Tricks, Forgery and Phishing, Proactive Controls, and Threats Fundamentals. Also learn a basic introduction to web design where you can implement these OWASP security measures.
Suggested Courses
Next Video:Introduction to CSS (Part 2)