그림자

text-shadow: 값

생성도구 사용 css3 text shadow 기능을 제공하는 사이트를 통하여 테스트 후에 이 값을 읽어와 사용하면 보다 편리 합니다.

글자 뿐만 만 아니라 박스등에도 설정이 가능합니다.

그라디에이션

text-shadow

예제코드: ./sample/shadow01.html

첫번째 : x축 그림자 (+/-) 두번째: y축 그림자 (+/-) 세번째: 번지는 그림자 크기 네번째: 색상

포토샵 반영하기

rgb+알파 값을 색상으로 정의 합니다. 검정색의 알파값 50% 라고 하면 rgba()를 입력합니다.

포토샵의 distance값을 x, y 그림자로 입력합니다.

size 값을 세번재 번지는 그림자 크기로 입력을 합니다.

여러개의 그림자 설정하기

콤마(,)를 통하여 여러개의 그림자를 동시에 적용할 수 있습니다.

text-shadow: 설정1, 설정2, 설정3;

실습: 무지개 그림자 만들기

예제코드: ./sample/shadow02.html