시작하기

첫 프로젝트 만들어보기

transparent-gradient는 Node.js를 요구합니다.
npm 으로 간편하게 프로젝트에 설치 해주세요.

$ npm i transparent-gradient

JS 에 활용

transparent-gradient에서 1.3.5버젼부터 TGradient로 바뀌었습니다.
기존 함수명에 너무 길었기 때문에 TGradient로 사용해주세요.

import { TGradient } from "transparent-gradient"

new TGradient (target, direction)

import 를 통해 함수를 불러와주세요.
TGradient는 두개의 파라미터를 가집니다. target은 그라디언트를 사용할 html 요소고 direction은 그라디언트의 방향입니다.

사용법

방향 조절

사용법	방향	설명
new TGradient(target)	default	new TGradient(target) 기본적으로 default는 right 입니다.
new TGradient(target,'right')	right	new TGradient(target,'right')는 오른쪽 방향으로 그라디언트가 생깁니다.
new TGradient(target,'left')	left	new TGradient(target,'left')는 왼쪽 방향으로 그라디언트가 생깁니다.
new TGradient(target,'top')	top	new TGradient(target,'top')는 위쪽 방향으로 그라디언트가 생깁니다.
new TGradient(target,'bottom')	bottom	new TGradient(target,'bottom')는 아래 방향으로 그라디언트가 생깁니다.

transparent-gradient를
사용해야 하는 이유

이런 문제점이 있었어요 😅

L사 백화점 app 프로젝트를 진행중 디자이너가 blur에 투명을 서서히 주는 그라디언트로 디자인 시안을 주었습니다.
google, stackoverflow등 모든 곳에서 예시들은 흰색 바탕에 흰색 그라디언트를 주거나, 배경 이미지의 평균 색상 값을 가져와 가짜 투명 그라디언트를 만드는 식으로 작용 했습니다.
그러나 내가 같이 일하는 디자이너의 시안은 이미지가 배경이고 글씨에 투명을 넣어주어야하는 작업이었습니다.
이것을 내가 해결했을 때, 나는 해결하였지만 다른 앱 개발자, 웹 퍼블리셔 와 프론트 엔드들은 굉장히 힘이 들어 했습니다.
나는 그런 이들을 위해서 npm 으로 transparent-gradient를 배포하기로 결심 했습니다.