How to create reflection effect using HTML and CSS ?
Last Updated :
10 Jul, 2020
The reflection effect is one of the coolest effects that one can use in his/her website. It is a type of informal effect so it is highly recommended not to use it any professional project. You can use it in your personal projects and maybe your portfolio to show your creativity. In this effect, we try to imitate a realistic reflection effect like it is being reflected from water.
Approach: The approach is to create a rotated string at the bottom of the original string and then changing its opacity and background to make it look like the reflection of the original string. Let us look at the implementation of the above approach.
HTML Code: In this section, “h2” tag is created with the text wrapped in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width,
initial-scale=1.0" />
<title>
Text Reflection
using HTML and CSS
</title>
</head>
<body>
<h2 data-text="GeeksforGeeks">
GeeksforGeeks
</h2>
</body>
</html>
|
CSS Code:
- Step 1: Apply a radial background which is lighter at the center and darker at the corners.
- Step 2: Apply some basic styling like size, color, etc to the heading.
- Step 3: Now use the after selector and rotate the original text on X-axis keeping the origin as bottom.
- Step 4: Apply “webkit” property to cut the rotated text into cuts. It will make the upper
portion of the text visible , as shown in the output image.
- Step 5: Now apply the transparent color and decrease the opacity of the rotated text.
Note: Make sure to decrease the opacity according to your background. If you are using a darker
background, decrease the opacity by 0.1-0.2 and if you are using a lighter background then decrease it by 0.6-0.8.
<style>
body
{
background-image: radial-gradient(#013220,#008000);
height: 100vh;
}
h2 {
position: absolute;
top: 30%;
left: 30%;
text-transform: capitalize;
color: white;
font-size: 50px;
}
h2::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
transform-origin: bottom;
transform: rotateX(180deg);
line-height: 0.85em;
background-image: linear-gradient(0deg, #ffffff 0, transparent 95%);
-webkit-background-clip: text;
color: transparent;
opacity: 0.7;
}
</style>
|
Complete Code: It is the combination of the above two sections of code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Reflection using HTML and CSS</title>
<style>
body
{
/* Radiel gradient defined by its center*/
background-image: radial-gradient(#013220,#008000);
height: 100vh;
}
h2 {
position: absolute;
top: 30%;
left: 30%;
text-transform: capitalize;
color: white;
font-size: 50px;
}
h2::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
/* Change the position of transformed element */
transform-origin: bottom;
/* Rotates around x-axis */
transform: rotateX(180deg);
line-height: 0.85em;
/* linear-gradient defined by up,down,left ,right ,diagonal */
background-image: linear-gradient(0deg, #ffffff 0, transparent 95%);
-webkit-background-clip: text;
color: transparent;
opacity: 0.7;
}
</style>
</head>
<body>
<h2 data-text="GeeksforGeeks">GeeksforGeeks</h2>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...