From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Working with opacity - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
Working with opacity
Needing to control an element's opacity is a common occurrence in page layout. In CSS we have two primary means of controlling transparency: the opacity property and using the RGBA or HSLA color declarations. So I am going to be working with the opacity.htm file, which is found in the 08_05 directory. Just to give you a heads-up on the structure of the page, if we scroll down, after some descriptive text, we have a section that has three different div tags in it, and they have a class of opacity, alpha, and background. If I just preview that in the browser, you can see what's happening. The div with the background has the image in beside it, and we have a div tag on the left-hand side that we are going to use the opacity property for. Then we have a dig tag on the right- hand side that we are going to use alpha transparency for. Okay. So if I go up into my code, I can see I already have some selectors for those two elements, so we are just going to start adding properties directly to…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
(Locked)
Creating multi-column text6m 36s
-
(Locked)
Using borders to enhance design13m 59s
-
(Locked)
Rounding corners6m 56s
-
(Locked)
Adding drop shadows10m 35s
-
(Locked)
Working with opacity6m 8s
-
(Locked)
Utilizing the background property15m 5s
-
(Locked)
Working with CSS sprites7m 58s
-
(Locked)
Enhancing page design: Lab6m 22s
-
(Locked)
Enhancing page design: Solution8m 38s
-
(Locked)
-