[CSS] 그림자, 그라데이션 css 생성 사이트

#css boxShadow #gradient #auto

 

안녕하세요. Gi_1입니다.

그림자, 그라데이션 사용 방법은 알지만 웹 접근성 고려해서 css 작성하기 너~~무 귀찮고 비효율적이에요.

 

그림자, 그라데이션 css 생성 사이트 소개 해 드리려고 합니다.

 

 

1. 그림자

그림자 생성 사이트에 접속 해 보시면, 처음 뜨는 팝업 창 은 꺼주세요.

 

 

 

 

상단에 있는 직사각형으로 실제 그림자 적용 모습을 파악 하실 수 있고,

각도, 거리, 블러, 색상, 불투명도를 지정할 수 있습니다.

 

 

 

하단에 내려 보시면 아래와 같이 생성된 CSS가 있는데, 이것을 복사하여 사용 하시면 적용 끝!

수기로 작성 하는 것 보다, 사이트 즐겨찾기 해 두시고 작성 하는게 더욱 빠릅니다.

 

 

하단에 더 살펴 보자면, box-shadow를 통한 더 많은 기능을 소개 해 주고 있습니다.

참고 하시어 지원하는 브라우저 확인 하시고 적용 해주셔도 괜찮을 것 같습니다.

 

 

2. 그라데이션 사이트 01

 

우선 그라데이션 생성 사이트에 접속 해 주시면, 아래와 같은 사이트가 나오는데 하나씩 전체적으로 살펴 보겠습니다.

 

 

왼쪽은 색상을 설정, 위치 조정, 색상 추가, 색상 삭제, 불투명도 등을 설정할 수 있습니다.

오른쪽 상단에는 그라데이션 방향과 사이즈를 설정 할 수 있는데, 방향만 설정해 주시면 됩니다.

이후 오른쪽 하단에 마우스를 갖다 대시면 copy라는 문구가 나오는데 복사->붙여넣기 하여 적용 해 주시면 됩니다.

 

 

 

상단에 있는 검은색 연필 모양을 누르면 불투명도를 선택 할 수 있고,

하단에 있는 연필 모양을 누르면 색상,위치 등을 설정 할 수 있습니다.

 

 

 

추가를 하려면 표시된 부분 ( 그라데이션의 빈 부분 )에 마우스를 갖다 대시면 모양이 +로 바뀌는데 그냥 클릭 하시면 됩니다.

 

 

2. 그라데이션 사이트 02

조금 불편한 점은, 위치를 바꾸고자 했는데 자꾸 추가가 되는 경우가 있었습니다.

 

그래서 다시 검색하여 알아낸 사이트가 있는데,

사이트 바로가기를 클릭 해 주시면 됩니다.

 

 

 

사용 방법은 비슷합니다. 그라데이션에 마우스를 갖다 대어 추가 할 수 있고, 왼쪽부터 순서대로 오른쪽 하단에 출력 됩니다.

그 이후 하단에 copy가 생성 되는데 사용 하시면 됩니다.

 

단지, 저는 광고가 자주 나오는 것을 싫어하여 상단의 사이트를 더 자주 이용하는 편 입니다.

 

편하신 대로 사용하시면 될 것 같습니다 ㅎ 감사합니다.