El efecto de reflejo es uno de los mejores efectos que uno puede usar en su sitio web. Es un tipo de efecto informal por lo que es muy recomendable no utilizarlo en ningún proyecto profesional. Puede usarlo en sus proyectos personales y tal vez en su cartera para mostrar su creatividad. En este efecto, tratamos de imitar un efecto de reflejo realista como si se reflejara en el agua.
Enfoque: el enfoque consiste en crear una string girada en la parte inferior de la string original y luego cambiar su opacidad y fondo para que se vea como el reflejo de la string original. Veamos la implementación del enfoque anterior.
Código HTML: en esta sección, la etiqueta «h2» se crea con el texto envuelto en ella.
<!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>
Código CSS:
- Paso 1: Aplique un fondo radial más claro en el centro y más oscuro en las esquinas.
- Paso 2: aplique un estilo básico como tamaño, color, etc. al encabezado.
- Paso 3: ahora use el selector posterior y gire el texto original en el eje X manteniendo el origen en la parte inferior.
- Paso 4: aplique la propiedad «webkit» para cortar el texto girado en cortes. Hará
visible la parte superior del texto, como se muestra en la imagen de salida. - Paso 5: ahora aplique el color transparente y disminuya la opacidad del texto rotado.
Nota: asegúrese de disminuir la opacidad de acuerdo con su fondo. Si está utilizando un
fondo más oscuro, disminuya la opacidad en 0,1-0,2 y si está utilizando un fondo más claro, disminúyalo en 0,6-0,8.
<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>
Código completo: es la combinación de las dos secciones de código anteriores.
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA