지금 바로 쓸수 있는 CSS3

CSS(Cascading Style Sheets)는 마크업(HTML)을 자유롭게 표현할 수 있는 웹디자인 언어이다. 현재 CSS Level3는 표준화 작업중이다. 사실 CSS를 공부하려할때 어디서 부터 시작해야 되는지, 혹은 어떻게 이용해야 하는지 궁금해 하는 분들이 많다. CSS3 는 아직 공식적으로 웹표준 권고안이 아니지만 몇몇 브라우저들은 벌써부터 몇가지 기능들을 미리부터 제공하고 있다.특히 jQuery의 DOM Selector를 보면 CSS3 Spec에 명시된 내용을 미리부터 관련 표현들을 사용하고 있다. 그래서 몇가지 CSS3 의 새로운 기능을 미리 살펴보고자 한다. ( 본 포스트는 디자인스팟에서 제공하는 팁을 참조하여 작성하였다. )

 Speaking In Styles : The Fundamentals of CSS for Web Designers에서 언급한 향상된 디자인이라  스타일이 렌더링이 되지 않았을때 대체할수 있도록 비주얼적으로 어필할수 있도록 사용성을 향상시킬수 있는것을 말한다.

각설하고, 몇가지 CSS3 속성으로 아래와 같은 효과들을 얻는 팁을 소개한다.

• 디자인 향상 예제 : border-radius를 이용하여 박스의 테두리를 둥글게 표현할때 좀더 디자인적으로 어필할 수 있으나 이러한 코너링이 제대로 렌더링 되지 않아도 여전히 해당 웹사이트를 사용할 수 있게 처리한다.
  
  
• 사용성 체감 디자인예제:  백그라운드나 엘리먼트들의 RGBA(Red, Green, Blue, Alpha) 색상값을 이용해 상위 레이어에 위치한 , 즉 z-index값이 높은 요소들을 불투명하게 표시함으로써 아래에 배치된 개체를 미리 볼수 있는 기능을 제공해 줌으로써 사용성을 배가 시킬수 있게 처리한다.

아래 6가지 CSS3 속성값들을 이용하여 지금 바로 여러분의 사이트를 좀더 다양하게 표현해 보자

아래 이미지는 스타일을 적용하기 전의 원본 디자인 표현이다.

최종소스 다운로드 : 지원브라우저 : 사파리4이상, 파이어폭스3.5 이상, 구글크롬1.0 이상

css3_sample.zip

1 투명한 칼라효과

지원브라우저 : 사파리4, 파이어폭스3.0.5, 구글크롬1

RGBA는 텍스트, 백그라운드, 보더, 음영과 관련된 컨트롤들에  특정한 칼라값을 채워넣는 것이다. 보통 색깔값은 #FFFFFF와 같이 16진수형 표현으로 사용되거나 red, blue, navy,orange등과 같이웹에 암묵적으로 명시된 칼라값들을 사용하나 RGB는 0~255까지 범위값으로 표현한다.  추가적으로 A 는 투명도를 표현하는것으로 0(투명transparent)~(불투명:opaque)로 표현한다.

rgba(0-255,0-255,0-255,0-1)

[이미지출처 : 웹디자이너월]

브라우저에 다음과 같이 사용할 수 있다.

.topbox {

    color: rgb(235,235,235);

    color: rgba(255,255,255,0.75);

    background-color: rgb(153,153,153);

    background-color: rgba(0,0,0,0.5);

    border-color: rgb(235,235,235);

    border-color: rgba(255,255,255,0.65);

}

IE에서는 지원되지 않으나 조건(if IE)로 gradient를 구현할수 있다.

<!--[if IE]>

.pretty-box {

    background:transparent;

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000050,
          endColorstr=#00000050);

    zoom:1;

}

<![endif]-->

2  둥근 모서리 효과

지원브라우저 : 사파리3, 파이어폭스1, 구글크롬1

테두리의 코더값은 아래와 같이 radius값으로 지정해 줄수 있다.

border-radius:값

브라우저 호환을 위해 다음과 같이 표현한다.

-webkit-border-radius: 10px;   (사파리나 크롬)

-moz-border-radius: 10px;     (파이어폭스)

border-radius: 10px;

각각 지정해 주려면 다음과 같이 하면 된다.

CSS3	Mozilla	WebKit
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius
border-radius	-moz-border-radius	-webkit-border-radius

3. 텍스트 음영(Drop Shadow효과)

지원브라우저 : 사파리3, 파이어폭스3.0.5, 구글크롬1

특정 텍스트 하단에 음영을 추가하기 위해서는 다음과 같이 좌/우측, 위/아래, offset값과, blur효과, 칼라값등과 같이 표현하다.

text-shadow: x y blur color;

[이미지출처 : 웹디자이너월]

음영을 조절하기 위해 다음과 같이 표현한다.

text-shadow: -2px 2px 10px rgba(0,0,0,.5);

여러개 효과를 주려면 아래와같이 콤마(,)로 구현한다.

text-shadow:   

       0 0 10px rgba(0,255,0,.5),

       -10px 5px 4px rgba(0,0,255,.45), 

       15px -4px 3px rgba(255,0,0,.75);

아래 이미지와 같이 표현하기 위해서는

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;  

이 하면 된다.

4. 박스모델의 음영주기

지원브라우저 : 사파리4, 파이어폭스3, 구글크롬1

박스모델에 음영을 주기위해서는 아래와 같이 text-shodow와 같이 표현한다.

box-shadow: x y blur color;

text-shadows와 같이, Mozilla 와 Webkit에서 최종CSS표준에서는 자신만의 문법을 제공한다.

-webkit-box-shadow: 0 0 10px rgb(0,0,0);

-moz-box-shadow: 0 0 10px rgb(0,0,0);

box-shadow: 0 0 10px rgb(0,0,0);

멀티음영을 주려면 아래와같이 공백으로 분리하여 컴마(,)로 멀티표현하여 처리한다.

-webkit-box-shadow: 0 0 20px rgb(0,255,0),
        -10px 5px 4px rgba(0,0,255,.45), 
         15px -20px 20px rgba(255,0,0,.75);

-moz-box-shadow: 0 0 20px rgb(0,255,0),
         -10px 5px 4px rgba(0,0,255,.45), 
         15px -20px 20px rgba(255,0,0,.75);

box-shadow: 0 0 20px rgb(0,255,0),
         -10px 5px 4px rgba(0,0,255,.45), 

         15px -20px 20px rgba(255,0,0,.75);

-moz-box-shadow: 

          -2px -2px 0 #fff,       /*shadow1*/

          2px 2px 0 #bb9595,    /*shadow2*/

          2px 4px 15px rgba(0, 0, 0, .3);  /*shadow3*/

5. 백그라운드이미지 여러개 표현

지원브라우저 : 사파리1.3,  구글크롬1

백그라운드 이미지를 주기위해서 아래 두번째 줄과 같이 콤마(,)로 해당 이미지를 여러개 표현할 수 있다.

background-image: url(astro-127531.png);

background-image: url(astro-127531.png),url(Hubble-112993.png);

background-repeat: no-repeat;

background-position: bottom left;

background-position: bottom left, top right;

background: url(첫번째이미지) 0 0 no-repeat, url(두번째이미지) 10 -20px repeat-x;

6. 박스모델 회전시키기

지원브라우저 : 사파리4, 파이어폭스3.5 구글크롬1

아직 CSS3 표준스펙에는 포함되어 있지 않지만 Webkit과 Mozilla에서는 박스모델 회전을 시키는 속성값이 있다.

-webkit-transform: rotate(-15deg);

-moz-transform: rotate(-15deg);

rotate속성을 지원하지 않는 브라우저에서는 다음과 같이 표현된다.

정리하자면

위의 css3 의 4가지 룰에 대해서 정리하자면 다음과 같다.(순서주의) 

아래소스는 모든 브라우저에서 호환가능하도록 cross-browsing처리하기 위한 표현들이다 css3에 대해 간단하게 처리하기 위해서는 다음과 같이 css reset 기능들을 가지고 있으면 개발시 유용할것 같다.

/*둥근모서리 표현*/

.box_round {

     -moz-border-radius: 12px; /* FF1+ */

     -webkit-border-radius: 12px; /* Saf3+, Chrome */

      border-radius: 12px; /* Opera 10.5, IE 9 */

}

/*박스음영*/

.box_shadow {

  -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */

  -webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */

  box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */

  filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff'); /* IE6,IE7 */

  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff')"; /* IE8 */

}

/*백그라운드 그라디언트*/

.box_gradient {

  background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */

  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444)
                             ,color-stop(1, #999999)); /* Saf4+, Chrome */

  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999');
         /* IE6,IE7 */

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')";
        /* IE8 */

}

/*투명효과*/

.box_rgba {

  background-color: #B4B490;

  background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome */

  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490');
         /* IE6,IE7 */

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490'
                 ,endColorstr='#99B4B490')"; /* IE8 */

}

/*박스모델 회전*/

.box_rotate {

  -moz-transform: rotate(7.5deg);  /* FF3.5+

  -o-transform: rotate(7.5deg);  /* Opera 10.5

  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome

   filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7

   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8

}

/*웹폰트*/

@font-face {

  font-family: 'WebFont';

  src: url('myfont.eot');  /* IE6+ */

  src: local('?'),

        url('myfont.woff') format('woff'),  /* FF3.6 */

        url('myfont.ttf') format('truetype');  /* Saf3+,Chrome,Opera10+ */

}

CSS3 향후지원할 BOX Model 에 대한 흥미로운 포스트가 있어 소개합니다.

• Future of CSS