CSS3 속성을 몇개 적용해봤습니다.

CSS3는 HTML5와 더불어 최신 웹 브라우저들이 함께 채용하고 있는 스타일 표준입니다. CSS3는 HTML5와 크게 관계 있는 부분은 없지만 현대적 웹 기술에 있어서 꼭 알아야할 웹 기술 요소입니다. CSS3는 현재 표준작업중이고 선택자에 대한 부분은 거의 완료되었다고 합니다.

실전 HTML5 가이드에 보면 많은 실전 가이드가 나오는데요. 그중에 이왕이면 많은 브라우져가 지원하고, 간단하게 스킨에 적용할수있는거 몇가지만 테스트격으로 한번 적용해봤습니다.

HTML5와 CSS3에 보면 정말 다양한 속성들이 있는데요......조금 다른 이야기지만 이전에 포터블 브라우져를 만들때 플러그인을 따로 제작하거나 적용해서 제작하곤 했는데요. html5와 css3만 지원된다면 어지간한 플러그인은 필요없을 정도로 대단합니다.

몇가지 적용된부분을 알려드리겠습니다.
참고로 브라우져에서 확인하려면 최신버젼에서보야 할겁니다. 캡쳐를해서 간단이 소개해봅니다.

text-shadow

지원브라우져 : 크롬,사파리,오페라,파이어폭스,익스플로러
IE 브라우저를 제외한 모든 브라우저가 이미 text-shadow 속성을 지원하고 있다. blur 값은 생략할 수 있는데 생략하는 경우 기본값은 blur 스타일이 전혀 지정되지 않은 '0'이다. IE는 DropShadow Filter를 사용할 수 있지만 그림자의 blur 값이 '0'과 같은 표현으로 처리되고 blur 값을 지정 할 수 없는 단점이 있다. IE 브라우저 버전간 호환(버그 해결)을 위해 display 속성을 block 또는 inline-block 으로 지정하고 zoom:1 속성을 추가로 부여해야 한다.

제 스킨에서 블로그 제목에 해당하는 부분에 한번 적용을 해봤습니다.
적용된 코드는 아래와 같습니다. 하이라이팅 된곳을 잘 보시면 됩니다.
#entry h2 {
  font-size : 1.6em;
  text-shadow:3px 3px 0 #ccc;
  filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=3, OffY=3, Color=#cccccc, Positive=true);
  display:inline-block; zoom:1;
  letter-spacing:3px
}

각 브라우져에서 한번 보죠.

크롬

ie6

ie8



잘 보이시나요. ie 까지 모두 되니 보이실겁니다.
그다음은 text-overflow 입니다.

text-overflow

지원브라우져:크롬,사파리,오페라,익스플로러
Firefox 브라우저는 아직 지원하지 않고 있지만 IE는 이미 IE6 버전부터
지원하고 있다. Firefox 브라우저는 overflow-hidden 속성에 의하여 넘치
는 부분이 말 줄임표 없이 잘린다.

저의경우 사이드바의 ul li a 에 해당하는 부분에 적용을 시켜봤습니다.
리스트의 배경이미지로 적용된부분인데요. 아마도 넘치지가 않으니 큰 차이는 없을겁니다.
사이드바에 클래스를 지정해서 적용했는데요. 코드는 아래와 같습니다.하이라이팅 된곳을 잘 보시면 됩니다.

.widget ul li a {
padding : 0 0 0 12px;
background : url(./images/list-right.gif) no-repeat left 3px;
text-overflow:ellipsis; 
-o-text-overflow:ellipsis;
}

재미있는 부분은 바로 gradient 입니다. 이미지를 사용하지 않고도 그라이언트효과를 줄수가 있지요.

gradient

지원브라우져 : 크롬, 사파리, 파이어폭스, 익스플로러

웹킷(크롬, 사파리)과 파이어폭스 및 IE의 속성 및 값 선언 방식이 모두 다름에 유의한다. 웹킷은 (타입, X시작점 Y시작점, X종료점 Y종료점, 시작색, 종료색) 형식으로 선언하고 파이어폭스는 (시작점, 시작색, 종료색) 순
으로 선언한다. gradient를 지원하지 않는 브라우저를 위하여 기본 배경색을 지정해두어야 함에 유의한다. IE는 IE 전용 Gradient Filter를 사용한다.

저의경우 footer에 적용을 해봤습니다.


크롬

익스플로러

파이어폭스 3.7버젼


안되는 브라우져를 염두해두고 배경색을 일단 지정해둡니다.
코드는 아래와 같습니다.하이라이팅 된곳을 잘 보시면 됩니다.
#footer {
  background-color:#75d2f1;
  background:#75d2f1 -webkit-gradient(linear, 0% 0%, 0% 100%,from(#75d2f1), to(#0081A7));
  background:#75d2f1 -moz-linear-gradient(top, #75d2f1, #0081A7);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#75d2f10E, endColorStr=#0081A7);
  clear : both;
  color : #fff;
  overflow : hidden;
  padding : 5px 0;
  width : 960px;
}

재미있는 것은 아래처럼도 꾸밀수 있습니다.


transition

지원브라우져 : 크롬, 사파리, 오페라

메뉴 버튼에 마우스를 올리면 플래시 메뉴와 같은 부드러운 움직임이 발생한다. transition 속성의 값으로는 어떤 속성을 몇 초간 진행할 것인지 정의한다. 어떤 속성을 transition 할 것인지 지정하지 않으면 기본 값 all이 지정되어 모든 속성을 transition 시킨다. 파이어폭스 브라우저는 3.7 버전부터 지원을 기대할 수 있다.

가이드에보면 파이어폭스 3.7버젼부터 지원을 기대한다고 했는데 3.7버젼으로 해본결과 적용되지 않았습니다.
이 기능은 이전에 자바스크립트로 적용을 해야만 하는 부분이였습니다. 이걸 간단하게 css로 적용하니 얼마나 대단합니까^^;

이 부분은 메뉴부분에 적용을 해봤씁니다. 아마도 지원 브라우져로 보시면 메뉴부분이 플래시처럼 움직이는것을 보실수 있을겁니다.

빨강색부분에 마우스를 갖다대어보세요. 아마도 플래시처럼 움직이는것을 보실수 있을겁니다.


메뉴부분에 적용한 코드는 아래와 같습니다.
#navRight a {
  float : left;
  color : #fbfbfb;
  display : block;
  font-size : 12px;
  margin:0;
  padding : 10px 15px;
  -o-transition:0.2s; 
  -webkit-transition:0.2s;
}
#navRight a:hover {
  background-color : #2c343f;
  color : #fff;
  padding:15px 20px;
  margin:-6px; 
  opacity:0.8;
}

하이라이팅 된곳을 잘 보시면 됩니다.
여기까지 한번 적용을 해보았습니다. 이번 html5 와 css3에보면 자바스크립트나 플러그인으로 해야하는 부분을 많이 해소하는것을 볼수있습니다. 정말 대단한거 같아요. 많은것이 있지만 아직 제가 공부를 더 해야하고 완전이 숙지를 하지 못한부분이여서 간단한것만 한번 적용을 해봤습니다.
개    개