1.0.0 • Published 5 years ago

box-shadows

Licence

MIT

Version

1.0.0

Deps

Size

8 kB

Vulns

Weekly

Summary Dependency Versions

BoxShadows.css

header

Mini librería CSS de sombras.

Instalación

npm i box-shadows

O descarga el archivo desde la web: https://cssshadows.netlify.app/

Modo de uso

1. 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};
`;

2. De forma tradicional:

La forma de utilizar esta librería es como cualquier archivo CSS. Solo debes enlazarlo en el <head>.

Ejemplo:

<head>
  <link rel="stylesheet" href="./shadows.min.css">
</head>

ATENCIÓN

Solo hay clases no puedes usar id.

Entonces debes llamar los class desde las etiquetas que utilizes. Por ejemplo un <div>.

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:

<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".
-->

sample1

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`