Gradient
-
그라디언트 효과는 css3에서 처음 소개된 기능으로 옛날브라우저(익스10버전 이하)에서는
지원되지 않는다.
-
모던 브라우저 초기 버전에서는 그라디언트 효과를 내기 위해 브라우저
접두사를 사용했다. -
브라우저 접두사란 속성 중 호환이 어려운 속성들을 브라우저마다 호환해주기 위해 붙이는
키워드로 '벤더프리픽스'라고도 부른다.벤더프리픽스: 벤더프리픽스는 호환해야하는 속성값의 앞에 쓴다.
[종류]
-webkit- : 크롬과 사파리를 호환한다.
-moz- : 파이어폭스 브라우저를 호환한다.
-o- : 오페라 브라우저를 호환한다.
-IE- : 익스버전을 호환한다.
[예시]
background-image: -moz-linear-gradient(값);
background-image: -webkit-linear-gradient(값);
background-image: -o-linear-gradient(값);
background-image: -IE-linear-gradient(값);
선형 그라디언트
-
선형 그라디언트는 수직이나 수평 또는 대각선 뱡향으로 색상이 일정하게 변하는것을 말한다.
-
선형 그라디언트를 구현하기 위해서는 liner-gradient라는 함수로 색상을 구현한다.
[기본형]
linear-gradient(각도 to 방향, color-stop, color-stop);
- 각도 : 색상이 시작할 위치를 말한다. 0도(top위치)부터 시작하여
시계방향으로 돌아가며 적용된다. 만약 음수값을 쓰면 반시계 방향으로 적용된다.
- 방향 : 그라디언트가 적용될 방향. to left / to top / to right / to bottom으로 방향을
적용할 수 있다.
- colorstop : 색상 중단점, 먼저 쓰여진 컬러가 시작 색상이 된다. 여러 색상을 추가하고
싶다면 ,로 구분하여 여러 색을 출력하면 된다. 각 색상마다 부포할 위치를
정하고 싶다면 색상코드 뒤에 한칸 띄고 %를 쓰면 된다.원형 그라디언트
-
그라디언트를 원형으로 표현할때 사용한다. radial-gradient함수를 이용해 구현한다.
[기본형]
background-image : radial-gradient(모양 크기 at위치, color-stop color-stop);
- 모양 : 모양은 정원을 뜻하는 circle과 타원을 뜻하는 ellipse가 있다. 기본값은 ellipse이고
박스의 넓이 높이에 따라 타원 모양이 결정된다. circle은 박스 모양과 상관없이 정원
으로 표현된다.
- 크기 : 그라디언트의 크기를 지정할 수 있다. 아래 값을 입력할 수 있지만 잘 쓰지는 않는다.
1. closest-side
2. closest-corner
3. farthest-side
4. farthest-corner - 기본값
box-shadow
-
사진이나 카드 또는 박스에 그림자 효과를 주기 위해 사용한다.
[기본형]
box-shadow : 수평거리 수직거리 흐림정도 번짐정도 색상 inset(=프레임 안에 없으면 밖에);
- 수평거리 : 박스의 오른쪽 또는 왼쪽으로 그림자를 이동시킨다.
- 수직거리 : 박스의 위쪽이나 아래쪽으로 그림자를 이동시킨다.
- 흐림정도 : 기본값은 0이며 그림자의 진함 정도를 뜻한다.
값이 커질수록 부드러운 그림자로 표시된다. px로 표현하고 음수는 쓸 수 없다.
- 번짐정도 : 양숫값을 사용하면 모든 방향으로 그림자가 퍼져서 그림자가 박스보다 커진다.
반대로 음숫값을 쓰면 모든 방향으로 그림자가 축소된다. 기본값은 0이다.
- 색상 : 한 가지 색상만 지정할 수도 있고 공백으로 구분하여 여러 색을 쓸 수도 있다.
기본값은 검정색이다.
- inset : 안쪽 그림자를 만든다. 만약 생략하면 기본값인 바깥쪽 그림자가 생성된다.text-shadow
: 글자에 그림자 효과를 주는 속성
-
글자에 그림자를 주고 싶을 때 사용한다. 속성값은 번짐정도를 제외하면
box-shadow와 동일하다.[기본형]
text-shadow : 수평거리 수직거리 번짐정도 색상;
