[그래픽 처리] CSS3/글자 그림자/그림 그림자/box-shadow/text-shadow/변형

[그래픽 처리] CSS3/글자 그림자/그림 그림자/box-shadow/text-shadow/변형

CSS3를 통해 글자와 그림에 그림자, 반투명, 회전, 애니메이션 등의 다양한 효과를 넣을 수 있습니다.

[1] 그림자

box-shadow 속성을 이용하면 블록 요소에 그림자를 추가할 수 있습니다.
'-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>

'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에는 애니메이션 기능이 있으므로 이 기능에 대해서도 다음에 알아보도록 하겠습니다.