In the last article, we completed learning pseudo-elements in CSS and now it's time to move into 'real' world 😃. In today's article, we are going to learn about making elements transparent using CSS.
Let's begin...
filter: alpha(opacity = x),
where takes value in range 0 to 100 with lower value represents more transparent. Here is an example...
That's all for today. Now with the help of opacity and pseudo-classes, you can create really beautiful web elements. In the next article, we are going to create a beautiful navigation bar which we can pin at top of our website.
Till then #keepCoding.
Let's begin...
Make Images Transparent
The opacity property is used to make images transparent. It takes value in range 0.0 to 1.0. A lower value represents a more transparent image. Although this opacity is property works in all browsers, for Internet expolrer(version 8 or earlier), use:filter: alpha(opacity = x),
where takes value in range 0 to 100 with lower value represents more transparent. Here is an example...
Combine Pseudo and Real
As we have already learned pseudo-class :hover, we will use it to style our image. We will put a default value of opacity to 0.4 and will change to 1.0 when hover class is active.Text on Image
So heading says it all.- Create a div element, set your favorite image as it's background.
- Create another div, make it a little bit transparent. Write test inside it. This div must be inside the previous div and should be aligned properly.
That's all for today. Now with the help of opacity and pseudo-classes, you can create really beautiful web elements. In the next article, we are going to create a beautiful navigation bar which we can pin at top of our website.
Till then #keepCoding.
Comments
Post a Comment