# 3D Effects
A 3D effect can be applied on the charts to give it depth. There are several techniques to achieve this.
# 3D Bars
To make the bars look like 3D bars is pretty simple. It can be done using CSS box-shadow
property:
#custom-effect tbody td {
margin-inline-start: 10px;
margin-inline-end: 20px;
box-shadow:
1px -1px 1px lightgrey,
2px -2px 1px lightgrey,
3px -3px 1px lightgrey,
4px -4px 1px lightgrey,
5px -5px 1px lightgrey,
6px -6px 1px lightgrey,
7px -7px 1px lightgrey,
8px -8px 1px lightgrey,
9px -9px 1px lightgrey,
10px -10px 1px lightgrey;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Open in:
Or using :before
and :after
psedo-elements with skew
property.
#custom-effect tbody td {
margin-inline-start: 10px;
margin-inline-end: 20px;
}
#custom-effect tbody td:before {
content: '';
position: absolute;
top: -10px;
right: -10px;
width: 100%;
height: 10px;
transform: skewX(-45deg);
transform-origin: top;
background-color: lightgrey;
}
#custom-effect tbody td:after {
content: '';
position: absolute;
top: -4px;
right: -10px;
width: 10px;
height: 100%;
transform: skewY(-45deg);
transform-origin: top;
background-color: lightgrey;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Open in:
# 3D Cylinders
To make the bars look like 3D cylinders yuo can use the border-radius
property:
#custom-effect tbody td {
margin-inline-start: 20%;
margin-inline-end: 20%;
border-radius: 50% / 12px;
background:
radial-gradient(ellipse 60% 15px at bottom, grey 50px, transparent 50px) bottom,
radial-gradient(ellipse 60% 15px at top, lightgrey 50px, transparent 50px) top,
linear-gradient(grey, darkgrey, lightgrey);
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
Open in:
# Tilt Chart
Another way to make your chart look 3D is to tilt the entire <table>
with css skew()
.
#custom-effect {
margin: 1.5rem auto;
transform: skewY(20deg);
}
#custom-effect tbody td {
margin-inline-start: 10px;
margin-inline-end: 20px;
box-shadow:
1px -1px 1px lightgrey,
2px -2px 1px lightgrey,
3px -3px 1px lightgrey,
4px -4px 1px lightgrey,
5px -5px 1px lightgrey,
6px -6px 1px lightgrey,
7px -7px 1px lightgrey,
8px -8px 1px lightgrey,
9px -9px 1px lightgrey,
10px -10px 1px lightgrey;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Year | Progress |
---|---|
2016 | 20 |
2017 | 40 |
2018 | 60 |
2019 | 80 |
2020 | 100 |
Open in:
Or tilting the other way the cylinder bars with a nice linear gradient and some shades:
#custom-effect {
margin: 1.5rem auto;
transform: skewY(-8deg);
}
#custom-effect tbody td {
margin-inline-start: 20%;
margin-inline-start: 20%;
margin-inline-end: 20%;
border-radius: 50% / 12px;
background:
radial-gradient(ellipse 60% 15px at bottom, grey 50px, transparent 50px) bottom,
radial-gradient(ellipse 60% 15px at top, lightgrey 50px, transparent 50px) top,
linear-gradient(grey, darkgrey, lightgrey);
box-shadow: 2px 2px 5px grey;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Open in:
# Chart Reflection
We can also use the webkit reflect effect to highlight the chart
#custom-effect {
height: 200px;
margin: 0 auto 100px;
-webkit-box-reflect:
below
3px
-webkit-gradient(
linear,
left top,
left bottom,
from( transparent ),
color-stop( 10%, transparent ),
to( rgba( 255, 255, 255, 0.25 ) )
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Year | Progress |
---|---|
2016 | 20 |
2017 | 40 |
2018 | 60 |
2019 | 80 |
2020 | 100 |
Open in: