CSS3 그림자 효과, 투명조절 rgba,box-shadow,text shadow

1) CSS3
색상을 지정할때 rgba값을 주면 투명도를 조절할 수 있다.

마지막 alpha는 %인데, 0은 완전 투명이고 1은 완전 불투명이다. 예제에서는 25%를 지정한 것이다.
CSS3에 추가된 태그들에 무조건 rgba만 사용해야 하는 것은 아니다. 적재적소에 사용하면 참 편리하다.

이렇게 하면, 짠 하고 div에 그림자가 생긴다. 콤마(,)로 구분해서 계속 그림자를 추가할 수 있다.

-webkit-box-shadow: 5px 5px 3px rgba(0,0,0, .3),0 0 3px rgba(0,0,0, .3);
-moz-box-shadow: 5px 5px 3px rgba(0,0,0, .3),0 0 3px rgba(0,0,0, .3);
box-shadow: 5px 5px 3px rgba(0,0,0, .3),0 0 3px rgba(0,0,0, .3);

텍스트에도 그림자를 줄 수 있다.

이렇게 하면 끝. 물론, 아래와 같이 색상을 rgba로 줄 수 있다 (투명도 조절을 위해 -_-b).

text-shadow: 1px 1px 0 rgba(255,255,255, 1);

다음은 박스나 이미지 곡선처리다 (참 많은 편법들이 나왔었지 ㅋ).
기존에 모퉁이를 둥글게 하려면 이미지를 사용해야 했지만, 이젠 CSS3 하나로 해결할 수 있다.

네 모서리 둥글기를 똑같이 하고 싶다면 아래와 같이 간단히 할 수도 있다.

-webkit-border-radius: 8px;
-moz-border-radius: 8px;

CSS3만으로 이미지를 기울일 수 있다.

-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);

이렇게 하면 시계방향으로 30도 기울어진다. 반시계방향으로 하려면 -30deg 값을 주면 된다.
문제는 Google Chrome에서 계단현상이 생긴다. FireFox에서는 살짝 Blur하게 보이고, Safari에서는 깨끗하다 +ㅂ+


확대할 수도 있다.

-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);

이렇게 하면 130% 확대된다. 그냥 확대되는 것이 아니라 다른 컨텐츠 위로 떠올라 확대되는 느낌이다.
다시 말하면 레이아웃을 깨지 않고 개별적으로 적용되는 것.
다만, 원본이미지가 어떠하든 확대된 이미지 해상도는 떨어진다. 지나치게 확대하면 못 알아볼지도;;