El texto recortado se utiliza como encabezado de fondo de la página web. El texto recortado crea un aspecto atractivo en la página web. Para crear un texto recortado utilizaremos únicamente HTML y CSS. Mostramos el texto recortado y luego hacemos que el texto se mezcle del fondo de un elemento con el padre del elemento. Se requiere la propiedad mix-blend-mode de CSS para hacerlo. Divida este artículo en dos secciones creando una estructura y luego aplicaremos CSS en esa estructura.
Creación de la estructura: en esta sección, solo crearemos la estructura del texto recortado utilizando HTML.
- Código HTML:
HTML
<!DOCTYPE html> <html> <head> <title> Creating Cutout text with HTML and CSS </title> </head> <body> <div class="container"> <!-- Cutout text --> <h1 class="text">GeeksforGeeks</h1> <p> "A Computer Science Portal<br> for Geeks" </p> </div> </body> </html>
Diseño de la estructura: en esta sección, aplicaremos algunas propiedades de CSS en la estructura de texto recortada creada. La propiedad mix-blend-mode de CSS jugará el papel principal y otras cosas dependen totalmente de su conocimiento de diseño.
- Código CSS:
HTML
<style>
/* container class styling */
.container {
/* Background image */
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200218123727/background8.png");
background-size: cover;
height: 360px;
position: relative;
text-align: center;
}
/* Cutout text class styling */
.text {
background-color: black;
color: white;
font-size: 68px;
font-weight: bold;
margin: 0 auto;
padding: 15px;
border: 5px solid gray;
position: absolute;
top: 25%;
left: 23%;
mix-blend-mode: multiply;
}
.text:hover {
}
/* Styling p tag element */
p {
position: absolute;
left: 58%;
top: 58%;
color: white;
text-align: right;
font-style:italic;
}
</style>
Solución final: en esta sección combinaremos el archivo HTML y CSS y crearemos un texto recortado para el encabezado de la página web.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Creating Cutout text with HTML and CSS
</title>
<style>
/* container class styling */
.container {
/* Background image */
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200218123727/background8.png");
background-size: cover;
height: 360px;
position: relative;
text-align: center;
}
/* Cutout text class styling */
.text {
background-color: black;
color: white;
font-size: 68px;
font-weight: bold;
margin: 0 auto;
padding: 15px;
border: 5px solid gray;
position: absolute;
top: 25%;
left: 23%;
mix-blend-mode: multiply;
}
.text:hover {
}
/* Styling p tag element */
p {
position: absolute;
left: 58%;
top: 58%;
color: white;
text-align: right;
font-style:italic;
}
</style>
</head>
<body>
<div class="container">
<!-- Cutout text -->
<h1 class="text">GeeksforGeeks</h1>
<p>
"A Computer Science Portal<br>
for Geeks"
</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA