Some More Styles: Opacity
Some More Styles: Opacity
OPACITY
The opacity property is used to set the transparency of an element. This can take a
value ranging from (0.0 - 1.0). The lower the value, the more transparent the element will
become.
will show the element like this when opacity gets applied:
So, when adding transparency to the background of an element, all of its child elements
will also inherit the same transparency. This makes the text inside transparent as well.
You can use the 'rgba()' property to provide color along with opacity.
Look at the example below where we set opacity along with color using rgb() property:
#box {
width: 100px;
height: 100px;
background-color: rgb(255, 0, 0);opacity: 0.6;
}
With rgba(), you can give the opacity value, along with the rgb values:
#box {
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0, 0.6);
}
1
Try this on your own!!
TRANSITION
The transition property is used to change the value of a property to some other value over
a given duration. You can provide multiple transitions to a single element by using a
comma.
You’ll learn about transitions in a lot more detail, later in the course.
2
EXTRA:
You can see other 'transition-timing-function' value from the below link :
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
BOX SHADOW
The box-shadow property is used to produce a shadow-like effect for an element. You can
● h-offset - this is a required value. It sets the horizontal point of the start of the
● v-offset - this is also a required value. It sets the vertical point of the start of the
● blur - this option is optional. This blurs the shadow. The higher the number, the
● spread - this option is also optional. This sets the size of the shadow. The value can
● color - this option is also optional. This sets the color of the shadow. The default
3
Now, you can see 2 shadows -
We can provide inner shadow using the 'inset' option, which is optional. This option
For example:
<html>
<head>
<style>
#box{
height: 100px;
width: 100px;
background-color: aliceblue;
box-shadow: 0px 0px 5px 12px inset black;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
Output: You can see that now the shadow is set using the inset option.