El efecto Stencil es un efecto de texto clásico que ha surgido en la última década. Este tipo de efecto generalmente se usa en sitios web donde la interfaz de usuario no es una preocupación principal. Se pueden encontrar ejemplos de tales diseños en sitios web de descarga de películas donde la interfaz no es la mejor, ya que la principal preocupación es el funcionamiento del sitio web. Es posible que el desarrollador del sitio web no quiera desperdiciar recursos en el diseño y la construcción de un sitio web atractivo.
Enfoque: el enfoque consiste en utilizar las propiedades CSS de webkit-stroke para crear un trazo/contorno alrededor del texto.
Sección HTML: En esta sección, se declara el texto que se debe estilizar. El texto se declara en una etiqueta de encabezado para este ejemplo.
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> Stencil Effect </title> </head> <body> <h1>Geeks</h1> </body> </html>
Sección CSS: siga los pasos para crear el efecto de plantilla requerido:
- Paso 1: aplique estilo básico al texto, como tamaño de fuente, familia o color, según sea necesario. El texto también se puede transformar a mayúsculas para una mejor visibilidad.
- Paso 2: use la propiedad -webkit-text-fill-color para hacer que el texto sea transparente. Esto se puede hacer configurando la propiedad en «transparente».
- Paso 3: use la propiedad -webkit-text-stroke-width para establecer el ancho del trazo o el contorno del texto. Esta propiedad se puede establecer en el valor requerido con una unidad adecuada.
Sugerencia: se recomienda mantener el ancho lo más bajo posible para que el texto se vea más agradable a la vista.
CSS
h1 {
font-family: sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 6em;
color: black;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
}
Código completo: es la combinación de las dos secciones de código anteriores.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stencil Effect</title>
<style>
h1 {
/* Apply basic styling to
the text */
font-family: sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 6em;
color: black;
/* Make the text fill
transparent */
-webkit-text-fill-color: transparent;
/* Set the stroke width
of the text */
-webkit-text-stroke-width: 2px;
}
</style>
</head>
<body>
<!-- Define the text
to be styled -->
<h1>Geeks</h1>
</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