Cree una mini librería CSS de sombras

3405 단어 cssshowdevwebdevjavascript
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.

꼬모 기능



Hay dos formas de usar esta librería:
  • De forma tradicional descargando un archivo .css
  • 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>


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


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

    Hay tres tipos de sombras:
  • Efecto Blur.
  • 이펙토 솔리드.
  • Efecto multi sombra(실험적).

    • Echemos un Vistazo al paquete npm:



    CSS-in-JS의 프레임워크에서 스타일이 지정된 구성 요소에 대해 결정합니다.

    인스탈라모스 엘 파케테:

    npm install box-shadows


    스타일이 지정된 구성 요소:

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


    결론



    Seguramente Existing 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.

    끈



    Sitio web
    Documentación
    Paquete npm

    살루도스!
    Swift - LeetCode - K 개의 정렬 링크 통합
    스파르탄 365 2주차 (3) 오큰수

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage