CSS3 embossing, highlight, gradient effect

text embossing effect

<주요 속성 요약>

#test1 {

     color: #ccc; font-size: 55px; font-weight: bold; background-color: #b38f00;

     text-shadow: 0 1px 0 #fff, 0 -1px 0 #000; 

     border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;

}

<속성 설명 >

- 첫번째 : X좌표     - 두번째 : Y좌표     - 세번째 : 블러     - 네번째 : 색상

box highlight effect

<주요 속성 요약>

#test2 {

     color: #ccc; font-size: 55px; font-weight: bold; background-color: #bbb;

     text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

     border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;

   box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;

     -moz-box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;

     -webkit-box-shadow: 4px 4px 4px #555, -4px -4px 4px #555, 4px -4px 4px #555, -4px 4px 4px #555;

}

<속성 설명>

- 첫번째 : X좌표     - 두번째 : Y좌표     - 세번째 : 블러     - 네번째 : 색상

linear gradient effect

<주요 속성 요약>

test3 {                    

     background: -moz-linear-gradient(90deg, #1a1a1a, #808080);

     background: -webkit-gradient(linear, 0 0, 0 100%, from(#808080), to(#1a1a1a));

}

<속성 설명 -moz-linear-gradient>

- 첫번째 : 각도. 0deg 왼쪽에서 시작, 90deg 아래에서 시작

- 두번째 : 시작 색     - 세번째 : 끝나는 색

<속성 설명 -webkit-gradient>

- 첫번째 : 타입 (radial or linear)

- 두번째 : 해당 타입이 적용될 영역의 %단위, 오른쪽 밑

- 세번째 : 해당 타입이 적용될 영역의 %단위, 왼쪽 위

- 네번째 : 시작 색     - 다섯째 : 끝나는 색