블로그에 CSS3의 Transition이 추가되었습니다.

서서히 변화하는 속성을 즐겨보세요!
라기보다, 뽀대나서(?) 기분 좋네요.


CSS Transition을 확인하시려면 최신의 웹브라우저를 사용하셔야 합니다.
(FF 4+, 크롬은 되고요 오페라 받기 귀찮고 확인하기가 귀찮네요 IE9 받기싫슴돠)


CSS에 적용한 코드는,

*{-webkit-transition: all 500ms cubic-bezier(0.290, 0.000, 0.310, 1.000);
   -moz-transition: all 500ms cubic-bezier(0.290, 0.000, 0.310, 1.000);
     -o-transition: all 500ms cubic-bezier(0.290, 0.000, 0.310, 1.000);
        transition: all 500ms cubic-bezier(0.290, 0.000, 0.310, 1.000);}
와
*:hover{-webkit-transition: all 500ms cubic-bezier(0.290, 0.000, 0.310, 1.000);
   -moz-transition: all 500ms cubic-bezier(0.290, 0.000, 0.310, 1.000);
     -o-transition: all 500ms cubic-bezier(0.290, 0.000, 0.310, 1.000);
        transition: all 500ms cubic-bezier(0.290, 0.000, 0.310, 1.000);}
가 메인이고요, (http://matthewlein.com/ceaser/)
클릭 등에 반응하는 것도 따로 넣어놨습니다.


설명
*은 CSS의 선택자 중 몽땅 선택하는 선택자일테구요,
그 밑에 복잡다단한 코드는 위의 링크해놓은 사이트에서 구한거고요.(이게 Transition)
그다음에 *:hover는 모든 요소에 마우스를 올리면 스타일이 적용되는 거고요. (제 스킨은 이게 핵심이라서요. ㅎㅎ)

잘 기억이 안나는데요, hover 나 일반에 한쪽에만 넣으면 한쪽으로 바뀔때만 Transition이 작동하던 듯 하네요. 즉, 양쪽에 넣으면 올릴때 내릴때 모두 부드럽게 바뀐단 사실.
(글이 두서없네요.)

뱀다리 : CSS 만을 이용해서 카테고리를 가로로 배열하고 메뉴처럼 만들어보려 했으나 잘 안되더군요.
이게 결과물. 바뀌었군요 딴짓좀 해서