Spectre Shapes se utilizan para crear diferentes formas para elementos HTML. Esta es una de las utilidades más útiles de Spectre. Para cambiar la forma de cualquier elemento, solo necesita incluir esta clase.
Clase de formas de espectro:
- s-circle: esta clase se utiliza para hacer que el elemento tenga forma de círculo.
- s-redondeado: Esta clase se usa para redondear el elemento
Sintaxis:
<div class="s-rounded"> .... </div>
Ejemplo: el siguiente ejemplo ilustra las formas de espectro usando las dos clases anteriores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>SPECTRE Shape Class</title>
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<style>
div {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Shape Class</strong>
<br>
<div class="bg-success s-circle">Circular</div>
<div class="bg-success s-rounded">Rounded</div>
</center>
</body>
</html>
Producción:
Formas de espectro
Referencia: https://picturepan2.github.io/spectre/utilities/shapes.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA