[그래픽 처리] CSS3/글자 그림자/그림 그림자/box-shadow/text-shadow/변형
CSS3를 통해 글자와 그림에 그림자, 반투명, 회전, 애니메이션 등의 다양한 효과를 넣을 수 있습니다.
[1] 그림자
box-shadow 속성을 이용하면 블록 요소에 그림자를 추가할 수 있습니다.
'-webkit-' : iPhone/iPad/Android용 표준 브라우저의 렌더링 엔진에서 동작하고자 할 때 사용
'-moz-' : Firefox에서 동작하고 싶을 때 사용
'-webkit-' : iPhone/iPad/Android용 표준 브라우저의 렌더링 엔진에서 동작하고자 할 때 사용
'-moz-' : Firefox에서 동작하고 싶을 때 사용
-webkit-box-shadow:[inset](X방향)(Y방향)(번짐효과) #(그림자의 색);
첫 번째 인수인 'insert'생략이 가능한데, 지정하게 되면 그림자를 블록의 안쪽에 렌더링할 수 있습니다.
<style>
.box{
-webkit-box-shadow: 5px 5px 10px #CC9999; //WebKit용
-moz-box-show: 5px 5px 10px #CC9999; //Firefox용
}
</style>
.box{
-webkit-box-shadow: 5px 5px 10px #CC9999; //WebKit용
-moz-box-show: 5px 5px 10px #CC9999; //Firefox용
}
</style>
'insert' 다음에는 X방향 거리(수평 오프셋), Y방향 거리(수직 오프셋), 번짐 효과(blur), 그림자 색을 지정합니다.
아래의 코드는 <div> 태그로 지정한 블록에 그림자를 추가한 프로그램입니다.
'sbox' 배경색을 'orange'로 지정하였습니다.
'#CC9999'색으로 X,Y 방향 5px shadow를 주고 10px blur 효과를 주었습니다
만약 글자에 그림자를 추가하려면 text-shadow 속성을 이용합니다.
box-shadow와 비슷한데, text-shadow는 ' -webkit-'를 지정하지 않하도 됩니다.
box-shadow 속성은 그림파일에도 그림자를 추가할 수 있습니다.
아래 코드는 그림 파일에 흰색 테두리를 지정해 주었고 연두색 그림자를 추가하는 프로그램입니다.
[2] 변형
CSS3의 transform 속성을 이용하면 그림이나 글자의 각 요소를 손쉽게 변형시킬 수 있습니다.
-webkit-transform: 조작
transform 속성에 지정할 수 있는 조작
형식 | 의미 |
rotate(deg) | 회전 (단위는 deg로 각도 지정, 10deg혹은 -10deg등) |
scale(sx[,sy]) | X축[,Y축]으로 확대/축소(단위는 배율. 1혹은 0.5 등) |
skew(ax[,ay] | X축[,Y축]으로 비틀기(단위는 deg로 각도를 지정) |
translate(x[,y]) | X축[,Y축]으로 이동(단위는 px) |
matrix(a,c,b,d,tx,ty) | 변형 행렬로 조작을 지정 |
다음 코드는 그림 파일에 그림자를 추가하고 회전시키는 프로그램입니다.
rotate(deg) 를 사용하였습니다.
이와 같이 그래픽 처리를 통해 그림자와 글자에 그림자를 넣고 변형까지 자유롭게할 수 있습니다.
이 외에도 CSS3에는 애니메이션 기능이 있으므로 이 기능에 대해서도 다음에 알아보도록 하겠습니다.
이 외에도 CSS3에는 애니메이션 기능이 있으므로 이 기능에 대해서도 다음에 알아보도록 하겠습니다.
'HTML5' 카테고리의 다른 글
[그래픽 효과] 그라데이션(gradient)/color-stop() (0) | 2012.02.13 |
---|---|
[그래픽 처리] 둥근 모서리/border-radius (0) | 2012.02.13 |
[그래픽 처리] CSS3 애니메이션/HTML5 애니메이션/animation-timing-function (0) | 2012.02.13 |
[그래픽 처리] 애니메이션/setInterval() (0) | 2012.02.10 |
[그래픽 처리] 변형 행렬의 저장과 복구/회전/save()/restore()/rotate() (0) | 2012.02.10 |
[그래픽 처리] 변형 행렬의 이동과 확대/축소/translate()/scale() (0) | 2012.02.10 |
[그래픽 처리] 변형 행렬 메서드/setTransform()/transform()/rotate()/scale()/translate()/save()/restore() (0) | 2012.02.10 |