[CSS3]

css3 preview

Borders[W3C definition]
border-color

border-image
border-radius
box-shadow

border-color :
value : <color>|transparent||inherit
투명효과도 되고 좋군요. FireFox에서는 다른 특성(점층효과)이 있습니다.

border-image :
border를 image icon 같은 걸로 쌀 수 있어요. 사면 line, 모서리 4개, 중앙까지 9개의 제어 포인트가 있습니다.
중앙은 fill 키워드를 쓰면 채워집니다. 참고.

border-radius :
border 모서리를 라운딩 처리할 수 있네요. div를 여러 개 사용하던 기존 코딩을 많이 줄일 수 있습니다.
top-left|top-right|bottom-left|bottom-right : x value, y value
이런 식으로 사용할 수 있습니다. value는 box 모델 대비 비율이네요. em 적당한 듯.
각각 모서리 곡률을 적당히 주면 원,타원 등도 만들 수 있겠네요.
모서리 바깥은 마우스 이벤트가 작동하지 않는답니다.

box-shadow :
css2에서 element 2개를 겹쳐 그리라고 했던 shadow. css3에 표준으로 들어오나 했는데...
http://www.w3.org/TR/css3-background/ '6.2. The ‘box-shadow’ property' 에, 더 논의가 필요한 부분이라 빠졌다고 나와 있다.
여기 를 참조하면, vertical, horizontal은 +/- value를 가지며 +일 경우 우 하단, -일 경우 좌 상단으로 shadow가 이동한다.

Backgrounds[W3C definition]
background-origin
background-clip
background-size
multiple backgrounds

multiple backgrounds :
background 이미지를 여러 개 쓸 수 있습니다. 샘플을 IE,Opera에서 열면 배경에 아무것도 안 나옵니다. FF, Chrome에서는 잘 되는군요. Opera에서 안 되는 게 의외입니다만 아직 표준은 아니니까요.
예전에는 배경 이미지가 큰 경우에 DIV로 구획을 나누고 이미지를 잘라서 각각 넣었었죠. 이제 DIV 나누는 수고는 덜겠네요. 그래도 이미지는 잘라야 할 것 같습니다. 아니면 이미지를 코드로 바꾸어 보내는 방법도 있죠. 브라우저가 지원해야 하지만요.


Text
text-shadow
text-overflow
word-wrap

text-shadow :
text를 이중으로 겹치고 상하좌우로 이동하는 효과를 줍니다. 글자 색도 줄 수 있고 merge시킬 수도 있습니다.
.textShadow{text-shadow: horizontal vertical merge정도 color}
h v m c, h v m c 식으로 반복할 수 있습니다.
이런 식으로도 쓸 수 있네요.