Las hojas de estilo en cascada, conocidas cariñosamente como CSS, son un lenguaje de diseño simple destinado a simplificar el proceso de hacer que las páginas web estén presentables. CSS le permite aplicar estilos a las páginas web. Más importante aún, CSS le permite hacer esto independientemente del HTML que conforma cada página web.
En este artículo, aprenderemos sobre el efecto de contorno en el texto.
Efecto de contorno:
La propiedad de contorno permite dibujar una línea alrededor del elemento, fuera del borde.
Propiedad utilizada:
- webkit-text-fill-color: esta propiedad se utiliza para rellenar el texto con color.
- webkit-text-stroke-width: esta propiedad se utiliza para definir el ancho del contorno.
- webkit-text-stroke-color: esta propiedad se utiliza para definir el color del contorno.
Acercarse:
- En primer lugar, crearemos una estructura simple de un archivo HTML y agregaremos algunas propiedades CSS para que se vea bien.
- En el último paso, agregaremos las 3 propiedades anteriores para hacer el contorno del texto.
Ejemplo 1: En el siguiente ejemplo, haremos uso de las tres propiedades anteriores para hacer el contorno del texto.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body
{
text-align:center;
}
h1{
/* Will override color (regardless of order) */
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>A Computer Science portal for geeks.</h3>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, utilizaremos las propiedades webkit-text-fill-color, webkit-text-stroke-width y webkit-text-stroke para hacer un contorno del texto.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body
{
text-align:center;
background-color:lightgrey;
}
h3{
/* Will override color (regardless of order) */
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
h1{
color:green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>A Computer Science portal for geeks.</h3>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA