# box-shadows > Mini librería CSS de sombras. Latest version **1.0.0** (published 2021-04-26) · MIT license · 0 weekly downloads ## Install ```sh npm install box-shadows pnpm add box-shadows yarn add box-shadows bun add box-shadows ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2021-04-26 | | First published | 2021-04-26 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Franco Andrés Sánchez | | Maintainers | franqsanz | | Keywords | CSS, JavaScript | ## Links - npm: https://www.npmjs.com/package/box-shadows - Repository: https://github.com/Franqsanz/box-shadows.css - Homepage: https://github.com/Franqsanz/box-shadows.css#readme - Issues: https://github.com/Franqsanz/box-shadows.css/issues - npm.io page: https://npm.io/package/box-shadows ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 1.0.0 (latest) — 2021-04-26 ## README [![GitHub License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) # BoxShadows.css ![header](./img/img.png) Mini librería `CSS` de sombras. ### Instalación ```sh npm i box-shadows ``` O descarga el archivo desde la web: [https://cssshadows.netlify.app/](https://cssshadows.netlify.app/) ### Modo de uso **1. Ejemplo con Styled Components:** ```js 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}; `; ``` **2. De forma tradicional:** La forma de utilizar esta librería es como cualquier archivo `CSS`. Solo debes enlazarlo en el ``. Ejemplo: ```HTML ``` **❗ ATENCIÓN ❗** > Solo hay **clases** no puedes usar `id`. Entonces debes llamar los `class` desde las etiquetas que utilizes. Por ejemplo un `
`. ### Color de la sombra - `#CACACA` - `rgb(202, 202, 202)` - `hsl(0, 0%, 79%)` ### Tipos de clases disponibles - Clases con efecto `Blur`. - Clases con efecto `Solid`. - Clases con efecto `Multi Colors`. ### Significado de las letras Estás letras hacen referencia a la posición de la sombra. Las verás en las clases que están de ejemplo más abajo. | Letra | Significado | | ----- | ----------- | | C | Center | | L | Left | | R | Right | | T | Top | | B | Botton | En las sombras multi colores poseen dos posiciones, por ejemplo: `left-top`, osea posicionada arriba a la izquierda. #### Clases efecto `Blur` Los números que contienen las clases hacen referencia a la cantidad de píxeles de `blur`. Ejemplo: ```HTML
``` ![sample1](./img/botton-30.png) | Clases | | ----------- | | `sw-b-10-c` | | `sw-b-10-l` | | `sw-b-10-r` | | `sw-b-10-t` | | `sw-b-10-b` | | `sw-b-20-c` | | `sw-b-20-l` | | `sw-b-20-r` | | `sw-b-20-t` | | `sw-b-20-b` | | `sw-b-30-t` | | `sw-b-30-l` | | `sw-b-30-b` | | `sw-b-30-r` | | `sw-b-30-c` | | `sw-b-40-c` | | `sw-b-40-t` | | `sw-b-40-l` | | `sw-b-40-r` | | `sw-b-40-b` | | `sw-b-50-c` | | `sw-b-50-t` | | `sw-b-50-l` | | `sw-b-50-r` | | `sw-b-50-b` | #### Clases efecto `Solid` Los números que contienen las clases hacen referencia a la cantidad de píxeles de `Solid`. Ejemplo: ```HTML
``` ![sample2](./img/solid.png) | Clases | | ----------- | | `sw-s-10-c` | | `sw-s-10-l` | | `sw-s-10-r` | | `sw-s-10-t` | | `sw-s-10-b` | | `sw-s-20-c` | | `sw-s-20-l` | | `sw-s-20-r` | | `sw-s-20-t` | | `sw-s-20-b` | #### Clases efecto `Multi Colors` Estás clases contienen varias capas de sombras multi colores _(Experimental)_. Ejemplo: ```HTML
``` ![sample2](./img/multi-colors.png) | Clases | | ------------------ | | `sw-s-mlt-clr-r-t` | | `sw-s-mlt-clr-l-t` | | `sw-s-mlt-clr-r-b` | | `sw-s-mlt-clr-l-b` | | `sw-s-mlt-clr-t` | | `sw-s-mlt-clr-b` | --- ### Licencia [MIT](LICENSE) --- _Source: https://npm.io/package/box-shadows · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._