El efecto brillante cosido se usa generalmente en el diseño de sitios web clásicos o con temas retro. También puede llamarlo efecto Denim si usa el color azul para el efecto, ya que se parece al clásico denim original. Es uno de los mejores efectos para comprender el concepto de gradiente radial y propiedad discontinua del borde.
Enfoque: el enfoque es simple, usaremos la propiedad discontinua para el efecto de puntada y el degradado radial para el efecto de brillo. El siguiente código es la implementación del enfoque anterior.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,
initial-scale=1.0">
<title>Stiched Effect</title>
<style>
body{
margin: 0;
padding: 0;
background: green;
}
.geeks{
position: absolute;
top: 35%;
left: 30%;
font-size:80px;
color: whitesmoke;
background: radial-gradient(
rgb(64, 245, 64), green);
padding:20px 10px;
border-radius: 30px;
border: 2px dashed white;
}
</style>
</head>
<body>
<button class="geeks">
GeeksforGeeks
</button>
</body>
</html>
En el ejemplo anterior, tenemos un elemento <h1> y primero lo alineamos al centro de la página y luego aplicamos la propiedad de degradado radial para darle un efecto de brillo y la propiedad de borde discontinuo para darle un efecto de puntada. Border-radius es completamente opcional y su uso depende de las preferencias personales.
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