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)
- 두번째 : 해당 타입이 적용될 영역의 %단위, 오른쪽 밑
- 세번째 : 해당 타입이 적용될 영역의 %단위, 왼쪽 위
- 네번째 : 시작 색 - 다섯째 : 끝나는 색
'Client-Side > HTML, CSS' 카테고리의 다른 글
| HTML5 meta Tag (0) | 2010.06.07 |
|---|---|
| [html]테이블의 올바른 사용법 (0) | 2009.11.17 |
| hover를 위한 li태그와 a태그. (0) | 2009.08.20 |
| div(block element) vs span(inline element) (0) | 2009.03.24 |
| name=contents readOnly (0) | 2006.11.27 |
