CSS properties related to transparency

Articles

This article explains the CSS properties related to transparency.

You can learn about the usage and syntax of opacity, z-index, and clip-path properties.

YouTube Video

HTML for Preview

css-opacity.html

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-opacity.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties Related to Transparency</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>CSS Properties Related to Transparency</h2>
20        </header>
21        <article>
22            <h3>opacity</h3>
23            <section>
24                <header><h4>opacity: 1</h4></header>
25                <section class="sample-view">
26                    <div class="opaque-box">Opaque</div>
27                </section>
28                <header><h4>opacity: 0.5</h4></header>
29                <section class="sample-view">
30                    <div class="semi-transparent-box">Semi-transparent</div>
31                </section>
32                <header><h4>opacity: 0</h4></header>
33                <section class="sample-view">
34                    <div class="transparent-box">Transparent</div>
35                </section>
36                <header><h4>transition: opacity 2s ease-in-out</h4></header>
37                <section class="sample-view">
38                    <div class="opacity-transition-box">Opacity with Transition (Fade out on hover)</div>
39                </section>
40                <header><h4>Parent & Child Element</h4></header>
41                <section class="sample-view">
42                    <div class="opacity-parent">
43                        Parent Element & <span class="opacity-child">Child Element</span>
44                    </div>
45                </section>
46            </section>
47        </article>
48        <article>
49            <h3>z-index</h3>
50            <section>
51                <div class="z-index-box1">1</div>
52                <div class="z-index-box2">
53                    <div class="z-index-box2-1">2-1</div>
54                    2
55                </div>
56                <div class="z-index-box3">3</div>
57            </section>
58        </article>
59        <article>
60            <h3>clip-path</h3>
61            <section>
62                <h4>Clip-path Property Examples</h4>
63                <header><h4>clip-path: circle(50% at 50% 50%)</h4></header>
64                <section class="sample-view">
65                    <div class="clip-path-circle">Circle</div>
66                </section>
67                <header><h4>clip-path: ellipse(50% 30% at 50% 50%)</h4></header>
68                <section class="sample-view">
69                    <div class="clip-path-ellipse">Ellipse</div>
70                </section>
71                <header><h4>clip-path: polygon(50% 0%, 100% 100%, 0% 100%)</h4></header>
72                <section class="sample-view">
73                    <div class="clip-path-polygon">Polygon</div>
74                </section>
75                <header><h4>clip-path: inset(10% 20% 30% 40%)</h4></header>
76                <section class="sample-view">
77                    <div class="clip-path-inset">Inset</div>
78                </section>
79                <header><h4>clip-path: url(#myClip)</h4></header>
80                <section class="sample-view">
81                    <div class="clip-path-url">Url</div>
82                </section>
83            </section>
84            <svg width="0" height="0">
85                <clipPath id="myClip">
86                    <circle cx="50" cy="50" r="40" />
87                </clipPath>
88            </svg>
89        </article>
90    </main>
91</body>
92</html>

Filter effects

`opacity` Property

 1.opaque-box {
 2    background-color: skyblue;
 3    opacity: 1; /* completely opaque */
 4    border: 1px solid black;
 5}
 6
 7.semi-transparent-box {
 8    background-color: skyblue;
 9    opacity: 0.5; /* semi-transparent */
10    border: 1px solid black;
11}
12
13.transparent-box {
14    background-color: skyblue;
15    opacity: 0; /* completely transparent */
16    border: 1px solid black;
17}
18
19.opacity-transition-box {
20    background-color: orange;
21    transition: opacity 2s ease-in-out;
22    border: 1px solid black;
23}
24
25.opacity-transition-box:hover {
26    opacity: 0; /* Fade out on hover */
27}
28
29.opacity-parent {
30    background-color: blue;
31    opacity: 0.5;
32}
33
34.opacity-child {
35    background-color: red;
36}

The opacity property is used to set the transparency of an element. This property specifies the opacity of the entire element, with values closer to 0 being more transparent and values closer to 1 being more opaque. The opacity property can be combined with animations to create fade-in and fade-out effects.

The opacity property affects not only the element it's set on but also its child elements. This means that if a parent element is set to be semi-transparent, its child elements will inherit that transparency.

In this example, the settings are configured as follows.

When the opacity property is set to 1, the element is fully opaque, just like a normal element.
When the opacity property is set to 0.5, the element becomes semi-transparent.
When the opacity property is set to 1, the element becomes completely transparent and is not visible at all.
The transition property is set to opacity, so when the mouse cursor hovers over the element, it fades out and becomes fully transparent after 2 seconds.
If the parent element has an opacity property of 0.5, the child elements also become semi-transparent.

`z-index` Property

 1.z-index-box1 {
 2    position: relative;
 3    width: 100px;
 4    height: 100px;
 5    background-color: red;
 6    top: 10px;
 7    left: 10px;
 8    z-index: 1; /* Displayed in the foreground */
 9}
10
11.z-index-box2 {
12    position: relative;
13    width: 100px;
14    height: 100px;
15    background-color: blue;
16    top: -100px;
17    left: 90px;
18    z-index: 0; /* Displayed in the background */
19}
20
21.z-index-box3 {
22    position: relative;
23    width: 100px;
24    height: 100px;
25    background-color: green;
26    top: -160px;
27    left: 80px;
28    z-index: 2; /* Displayed in the frontmost layer */
29}
30
31.z-index-box2-1 {
32    position: relative;
33    width: 50px;
34    height: 50px;
35    background-color: skyblue;
36    top: 0px;
37    left: 0px;
38    z-index: 4;
39}

The z-index is a property used in CSS to control the stacking order of elements. This property specifies whether an element should appear in front of or behind other elements.

In the red box, the z-index is set to 1, so the element appears in front of other elements.
In the blue box, the z-index is set to 0, so the element appears behind the red box.
In the green box, the z-index is set to 2, and it appears at the frontmost position.
In the light blue box, the highest z-index of 4 is specified, but since the parent element has a z-index of 0, it does not appear at the frontmost position.

Basic Mechanism

The z-index property takes a numerical value, where elements with higher numbers are displayed in front of those with smaller numbers. By default, elements without a specified z-index stack according to the order they appear in the HTML.

However, for the z-index to take effect, the element must have its position property set to either relative, absolute, fixed, or sticky. If the position is static, then the z-index has no effect.

Values

If a positive integer is given to z-index, the element is displayed more towards the front. The larger the number, the more it is displayed in front of other elements.
- If z-index is set to 0, it maintains the default stacking order.
- If z-index is set to 1, the element is displayed one layer in front of other elements.
If a negative integer is given to z-index, the element is displayed more towards the back. The smaller the number, the more it is displayed behind other elements.
- If z-index is set to -1, the element is displayed one layer behind other elements.

Notes

z-index depends on the z-index of the parent element. When a parent element has a z-index specified, the relative stacking order within that parent element is applied. This is called a stacking context. Therefore, even if a child element has a high z-index, if the parent element's z-index is low, it will not appear in front of other elements.

The `clip-path` Property

The CSS clip-path is a property used to clip elements into specific shapes. Normally, elements are displayed as rectangular boxes, but with clip-path, elements can be displayed in complex shapes such as circles or polygons. It is a very useful tool for creating visual designs or interactive effects.

The clip-path property restricts the display area of an element and hides the parts outside the specified shape. Next, we will explain how to specify commonly used shapes.

Main Clipping Shapes

`circle()`

1.clip-path-circle {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: circle(50% at 50% 50%);
6}

circle() clips an element into a circular shape. You can control the shape by specifying the center and radius of the circle.

The first 50% is the radius of the circle (as a percentage of the element's width or height).
The subsequent at 50% 50% is the center position of the circle (as a percentage of the element's width and height).

Here, it specifies a circle with a radius half of the element's dimensions, centered in the element.

`ellipse()`

1.clip-path-ellipse {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: ellipse(50% 30% at 50% 50%);
6}

ellipse() clips an element into an elliptical shape. You specify the radii of the width and height, as well as the center position.

The first 50% 30% are the radii of the width and height.
The subsequent at 50% 50% is the center position of the ellipse.

In this example, it specifies an ellipse centered in the element, with a width of 50% and a height of 30%.

`polygon()`

1.clip-path-polygon {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
6}

polygon() forms a polygon by connecting a specified set of vertices. Each vertex is specified with relative coordinates within the element.

In this example, it specifies three vertices (top center, bottom right, bottom left) and clips into a triangle. polygon() is very flexible and can create any shape.

`inset()`

1.clip-path-inset {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: inset(10% 20% 30% 40%);
6}

inset() clips inward from the outer edges of an element. Define a rectangle by specifying the distance from each of the four sides.

The 10% is the distance from the top edge.
The 20% is the distance from the right edge.
The 30% is the distance from the bottom edge.
The 40% is the distance from the left edge.

This specification creates a rectangle that shrinks inside the element.

`clip-path` using SVG

 1/*
 2<svg width="0" height="0">
 3  <clipPath id="myClip">
 4    <circle cx="50" cy="50" r="40" />
 5  </clipPath>
 6</svg>
 7*/
 8.clip-path-url {
 9    width: 100px;
10    height: 100px;
11    background-color: green;
12    clip-path: url(#myClip);
13}

CSS clip-path can use not only primitive shapes but also clip complex shapes using an SVG <clipPath> element.

In this example, a circular clip path defined in SVG with the id of myClip is applied to an HTML element.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

`object-fit` and `object-position` Properties CSS Properties Related to Filter Effects

CSS properties related to transparency

YouTube Video

HTML for Preview

Filter effects

opacity Property

z-index Property

Basic Mechanism

Values

Notes

The clip-path Property

Main Clipping Shapes

circle()

ellipse()

polygon()

inset()

clip-path using SVG

YouTube Video

`opacity` Property

`z-index` Property

The `clip-path` Property

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` using SVG