CSS Text Reflection Effect
In CSS text reflection refers to an effect that creates a mirrored or flipped copy of an element, appearing as a reflection beneath the original content. This effect can be used to simulate reflections on surfaces, such as water or glass, in a graphical user interface.
However, it’s essential to note that CSS does not have a built-in property specifically named “reflection.” Creating a reflection effect typically involves using CSS properties like transform, opacity, and pseudo-elements (::before or ::after) to achieve the desired visual effect. Additionally, the linear-gradient property in combination with background-image or mask-image can be employed to simulate reflective effects.
This is a basic demonstration, and the actual implementation of a reflection effect may vary based on the specific design requirements and desired visual outcome. Advanced effects might involve additional CSS properties and techniques to achieve more realistic or complex reflections.
Here’s an example demonstrating how to create a basic reflection effect using CSS:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS reflection text effect</title>
<!-- Link to your CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<body>
<h1 data-text="Techmidpoint">Techmidpoint</h1>
</body>
</body>
</html>CSS
body {
font-family: Helvetica;
background: radial-gradient(#3faee1, #259fd7);
height: 100vh;
}
h1 {
position: absolute;
top: 20%;
left:50%;
transform: translate(-50%, -50%);
color: #FFF;
font-size: 10rem;
}
h1:before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
transform-origin: bottom;
transform: rotateX(180deg);
line-height: 1em;
background: linear-gradient(0deg, #FFF 0, transparent 90%);
background-clip: text;
color: transparent;
}
For More Tutorials Please Click Here
