How to create reflection effect using HTML and CSS ?
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
HTML Code: In this section, “h2” tag is created with the text wrapped in it.
- 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.
Complete Code: It is the combination of the above two sections of code.