uiGradients - Beautiful colored gradients
uiGradients is a handpicked collection of beautiful color gradients for designers and developers.
uigradients.com
설명
이 웹사이트는 그라데이션을 만들 때 상당히 유용하다.
그라데이션은 하나의 색상에서 다른 색상으로 넘어갈 때의 단계 또는 그러한 색체 기법을 뜻한다.
위에 사진을 보면 알 수 있듯이 왼쪽에서 오른쪽으로 갈 때 색상이 변하고 그 중간에는 두 다른 색상을 선을 긋는 확실한 경계가 없다.
이것을 그라데이션이라고 표현한다.
TMI: 영어로 그라데이션은 Gradation, Gradient라고 표현한다. 구글링으로 보았을 때는 두 단어의 뜻은 크게 다르지않게 보이지만, Gradient는 수학적 의미가 큰 것으로 보인다.
사용법
사이트에 들어가자마자 그라데이션 샘플을 보여준다.
간단한 UI로 인해 바로 알 수 있듯이 화살표를 누르면 다른 샘플들을 볼 수 있다
Shift 혹은 좌측상단에 위치한 Show all gradients를 누르면 원하는 색상을 카테고리 형식으로 볼 수 있다.
원하는 색상을 찾았다면 이제는 사용을 해야한다.
화면 상단에 16진수법으로 표현돼있는 컬러코드를 볼 수 있다.
클릭만하면 복사가된다.
CSS
button {
width: 100px;
height: 100px;
background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
}button background에 그라데이션을 준다면
위에 코드처럼 표현할 수 있다.
'linear-gradient'는 그라데이션을 주기위한 함수이다.
'to right'은 그라데이션의 방향을 의미한다. 저 자리를 공석으로 두면 위에서 아래로 향하는 기본값으로 설정된다.
나머지 3개의 16진수는 색상을 의미하고 순서대로 진행된다.
This website, uiGradients, helps us to use gradation colour without our creativity.
You can get hexademical number to use in CSS as I mentioned.
The only thing that you should do is,
1. Go to the website,
2. Choose any gradation that you want to use,
3. Copy and Paste the hexademical number that the website is givin',
4. Use'em wherever you want, CSS I recommend.