DEV Community

loading...
Cover image for Cree una mini librería CSS de sombras

Cree una mini librería CSS de sombras

franqsanz profile image Franco Andrés Originally published at gdevtown.netlify.app ・2 min read

Me puse a crear un proyecto de fin de semana (que no lo hice en un fin de semana 🙃), se trata de una librería CSS de sombras, se me ocurrió porque tenía curiosidad de como crear una.
Es algo básico pero siempre se aprende algo nuevo al crear proyectos.

Como funciona

Hay dos formas de usar esta librería:

  1. De forma tradicional descargando un archivo .css
  2. Instalando desde npm.

Echemos un vistazo a lo tradicional:

Enlazamos el archivo como cualquier otro archivo .css

<head>
 <link rel="stylesheet" href="./shadows.min.css">
</head>
Enter fullscreen mode Exit fullscreen mode

Esta librería solo contiene clases, entonces hacemos lo siguiente:

<div class="sw-b-30-b"></div>

<!--
  Está clase contiene una sombra tipo blur de 30px posicionada en la línea inferior del elemento,
  el nombre completo sería así: "shadows-blur-30-botton".
-->
Enter fullscreen mode Exit fullscreen mode

Para saber todas las clases que existen puedes leer la Documentación.

Hay tres tipos de sombras:

  • Efecto Blur.
  • Efecto Solid.
  • Efecto multi sombra(experimental).

Echemos un vistazo al paquete npm:

Decidí crear un paquete porque me pareció interesante poder usarlo con Styled Components o otro framework de CSS-in-JS.

Instalamos el paquete:

npm install box-shadows
Enter fullscreen mode Exit fullscreen mode

Acá un ejemplo con Styled Components:

import styled from "styled-components";
import { sw_b_20_b } from "box-shadows";

const Card = styled.div`
  width: 200px;
  height: 200px;
  box-shadow: ${sw_b_20_b};
`;
Enter fullscreen mode Exit fullscreen mode

Conclusión

Seguramente existen otros proyectos parecidos y que estén mejor desarrollados, en mi caso solo fue crear algo por solo curiosidad.
De todas formas me gustó hacer esto.

Enlaces

Sitio web
Documentación
Paquete npm

Saludos!

Discussion (1)

Collapse
aleavellaneda1 profile image
Forem Open with the Forem app