2. 레이어에 배경넣기
* 배경색 넣기 :
* 배경 이미지 넣기 :
* 배경 이미지 반복
:
- repeat : 반복 / repeat-x : 가로 반복 / repeat-y : 세로 반복 / no-repeat : 반복 없음
* 배경 이미지 위치 설정
:
- Left / Center / Right. Top / Center / Bottom
- 속성값 입력 예시: background-position: Left Center;(좌측 중앙 이미지 고정)
3. 레이어에 테두리 넣기
* 테두리 넣기 :
- px : 테두리 두께, 실선 : solid, 점선 : dashed
* 원하는 부분에 테두리 넣기 :
- border-top(상), border-bottom(하), border-left(좌), border-right(우)
- 속성값 입력 예시 : border-top:1px solid #cecece (상단에만 1px두께의 테두리)
* 테두리 둥글게 하기 : 다양한 브라우저에서 활용하기 위해 다음의 사항을 모두 입력해야 함.
-moz-border-radius-위/아래-좌/우: 둥근 정도px;
-khtml-border-위/아래-좌/우-radius: 둥근 정도px;
-webkit-border-위/아래-좌/우-radius: 둥근 정도px;
border-위/아래-좌/우-radius: 둥근 정도px;
- 위 : top / 아래 : bottom / 좌 : left / 우 : right
- 속성값 입력 예시 : border-bottom-left-radius : 10px ;(좌측 하단 10px 모깎기)
4. 레이어에 그림자 넣기
box-shadow: x_offset y_offset blur #cecece;
-moz-box-shadow: x_offset y_offset blur #cecece;
-webkit-box-shadow: x_offset y_offset blur #cecece;
-o-box-shadow: x_offset y_offset blur #cecece;
- x offset : 그림자의 가로 위치(10px이라면 레이어 우측으로 10px만큼 떨어진 곳에 그림자 생김)
- y offset : 그림자의 세로 위치
- blur : 어느정도의 번짐 효과를 줄 것인지
- color : 원하는 그림자의 색상 입력
- 속성값 입력 예시 : box-shadow: 0px 0px 15px #cecece;(레이어 바로 아래에 15px블러 그림자)
5. 현 블로그에 사용중인 예 살펴보기
#float_up {
width:980px;
height:48px;
margin: 0 auto;
padding:0;
background-color:#ffffff;
border:1px solid #e0e0e0;
box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-o-box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-moz-border-radius-bottom-left: 10px;
-khtml-border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottom-right: 10px;
-khtml-border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
}