En este artículo, vamos a crear una ilusión de imágenes debajo de la imagen principal. Este es un artículo simple, podemos lograr nuestro objetivo solo usando HTML y CSS.
Enfoque: Cree un div principal en el que hayamos agregado una etiqueta de encabezado y luego use los selectores en CSS para crear los efectos.
Código HTML:
- Primero, creamos un archivo HTML (index.html).
- Después de crear el archivo HTML, le daremos un título a nuestra página web usando la etiqueta <title>. Debe colocarse dentro de la etiqueta <head>.
- Luego vinculamos el archivo CSS que proporciona todo el efecto de animaciones a nuestro html. También se coloca dentro de la etiqueta <head>.
- Llegando a la sección del cuerpo de nuestro código HTML.
- En primer lugar, estamos dando encabezado a nuestra página.
- Dentro del encabezado, cree 3 intervalos para almacenar los datos.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1> <span>geeks</span> <span>for</span> <span>geeks</span> </h1> </body> </html>
Código CSS: CSS se usa para dar diferentes tipos de animaciones y efectos a nuestra página HTML para que parezca interactiva para todos los usuarios. En CSS, tenemos que recordar los siguientes puntos:
- Restaura todos los efectos del navegador.
- Utilice clases e identificadores para dar efectos a los elementos HTML.
- ¡Uso de selectores para seleccionar diferentes elementos!
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: #000;
color: teal;
}
h1{
width: 3em;
height: 1em;
font-size: 6em;
position: relative;
white-space: nowrap;
color: transparent;
}
h1 span{
position: absolute;
background-color: rgb(7, 138, 138);
color: #000;
}
span:nth-child(odd){
transform: skew(50deg,-20deg) scaleY(0.75);
}
span:nth-child(even){
transform: skew(-5deg,-20deg);
}
span:nth-child(1){
bottom: 1em;
left: 0.5em;
}
span:nth-child(2){
top: 0.5em;
left: 2em;
}
span:nth-child(3){
top: 2em;
left: 2.5em;
}
Producción:
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA