Web Designer Wall의 Nick La씨는 CSS3를 사용함에 있어서 기본적으로 이해해야 하는 항목들에 대하여 정리하고 새롭게 추가된 text-shadow, box-shadow 그리고 border-radius 속성들에 대한 사용법을 자세히 설명했습니다.
RGBA
색상 값으로 RGB 컬러와 투명도를 의미하는 A를 입력할 수 있습니다. (0 = 투명, 1 = 불투명)
RBGA는 색상을 필요로 하는 모든 CSS 속성들 즉, 글꼴, 보더, 배경, 그림자 색상 등에 적용될 수 있습니다.
Text Shadow
텍스트에 그림자가 비치는 효과는 x-offset, y-offset, blur, 그리고 색상 순으로 구성됩니다.
x-offset에 입력된 값 만큼 그림자가 왼쪽에 위치하고 y-offset에 위치한 값 만큼 그림자가 아래에 위치합니다. 그림자 색상에도 RGBA 값을 사용할 수있다는 사실을 잊지 마세요.
또 다른 방법으로는 쉼표(,)로 구분하여 여러개의 그림자를 지정할 수도 있습니다. 다음 예제는 글씨가 움푹 패인듯한 효과를 만들어 낸 것입니다.(1px 상단 및 하단 1px)
text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
Border Radius
보더의 둥글기는 기존의 padding 또는 margin 속성의 사용법과 유사합니다. (예: border-radius: 20px) 이 속성은 브라우저 마다 설정하는 방법이 다릅니다. webkit 앤진을 사용하는 사파리, 크롬 브라우저에서는 "-webkit-"을 속성의 이름 앞에 작성해야하고 파이어폭스는 "-moz-"를 작성해야 합니다.(최근 크롬과 오페라 브라우저에서는 더이상 "-webkit-"같은 구분자를 사용하지 않아도 인식하기 시작했습니다.)
각 모서리마다 다른 값을 지정할 수도 있습니다. 이 방법은 브라우저마다 속성 이름이 통일되지 않았기 때문에 추천하지 않습니다.
Box Shadow
상자에도 그림자 효과를 부여할 수 있습니다. "x-offset, y-offset, blur, 색상" 순으로 텍스트 그림자 속성을 지정하는 방법과 동일합니다.
다시 말하지만, 한개의 요소에 한개 이상의 그림자 효과를 적용할 수 있습니다. 다음 예제는 3가지 그림자 효과를 하나의 요소 선언한 것입니다.
조금 아쉽지만 background 속성의 그라디언트 사용방법이 누락되었군요. 이것도 대박인데...
CSS3의 기본적인 사용방법 - Firejune Blog
