저자 : Alex Walker
- FF3.6에서 지원되는 CSS3 속성
1. multiple background images
2. -moz-background-size 속성
3. CSS gradients
- 향상된 display:table rendering
올해말에 배포되어지는 Firefox 3.6버전에서 위의 내용과 같은 CSS3의 특징들을 사용할 수 있을 것이다.
1. Multiple Background Images
multiple background images라는 개념은 정말 훌륭한 방법이고, layout작성시 몇가지 trick을 사용하여
의미없는 태그를 줄일 수 있다.
기본적인 문법은 매우 쉽다. background-images속성에 하나의 이미지만 사용하는 것이 아니라 최대 4개까지 이미지를
사용할 수 있다.
또한 각각의 이미지에 background-repeat과 background-position속성을 줄 수 있다.
#multi {
background-image: url(old-paper2.jpg); /*FF,Opera, not support browser*/
background-image: url(old-paper.png), url(old-paper2.jpg);
background-repeat: no-repeat; /*FF,Opera, not support browser*/
background-repeat: no-repeat, no-repeat;
background-position: top left; /*FF,Opera, not support browser*/
background-position: top left, bottom right;
border:1px #963 solid; /*FF,Opera, not support browser*/
border-color:#D8CCA7 #999 #633 #9A804E
}
두번째 정의한 이미지가 먼저 읽혀 지고 그 다음에 두번째 이미지가 읽혀지게 된다.
현재 이 기능을 지원하는 브라우져는 Safari4.0, Chrome3.0, FF3.6 alpha이다.
다음 URL로 확인해 볼 수 있다.
http://www.sitepoint.com/examples/css3/multi.html
그렇다면 지원 안되는 브라우져에서는 어떻게 해결할 수 있을까?
위의 코드에서 주석문과 같이 FF3.5이하, Opera와 지원되지 않는 브라우져에서는 comma를 사용하지 않는 single background를 사용하고
IE에서는 위와 같은 방식으로 해결 되지 않기 때문에 핵을 사용하여 해결해주어야 한다.
<!--[if IE]>
<style type="text/css">
#multi {
background-image: url(old-paper2.jpg);
background-repeat: no-repeat;
background-position: top left;
}
</style>
<![endif]-->
이렇게 대체하는 방식으로 사용하는것은 유용하고 가치 있는 것이라고 생각하지만, 각각의 의도에 따라 달라 질 수 있다고 생각한다.
지원되지 않는 이전 버전의 브라우져에서 기본적인 동작이 가능하고 새로운 브라우져에서는 다양하고 화려한 디자인을
경험하게 한다라면 새로운 브라우져를 사용하는 사용층이 늘어날 것이라고 기대한다.
2. Background-size
background-size는 css background image의 size를 변경시킬 수 있다.
CSS3의 속성이고 지원하는 브라우져는 Chrome/Safari, Opera, FF3.6 alpha에서 지원하고 있다.
background-size속성은 background-image의 이미지의 크기를 변경시킬 수 있다.
코드는 다음과 같다.
body {
background-image: url(background_image.jpg); /*IE, not support browser*/
background-size: 50% 50%; /* w3c spec */
-moz-background-size: 50% 50%; /* firefox css*/
-webkit-background-size: 50% 50%; /* safari/chrome */
-o-background-size: 50% 50%; /* opera css */
}
다음 URL로 확인해 볼 수 있다.
http://www.sitepoint.com/examples/css3/css3-background-size.html
background-size가 지원되지 않는 IE와 같은 브라우져에서는 가장 기본속성을 보여주게 하고
background-size가 지원되는 브라우져에 맞게 브라우져 핵을 써서 적용시켰다.
3. CSS Grandients
CSS background gradients는 FF3.6 alpha, safari4, chrome3버전에서만 지원하고 있다.
background-image와 같이 사용된다.
div#cssgradient2 {
background-image: -moz-linear-gradient(top, bottom,from(#A1D004),to(#6B9A00));
background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0.00, #A1D004),color-stop(1.00, #6B9A00));
}
mozilla(FF), Webkit(Safari/Chrome)의 코드는 동일하지 않다. gradient를 설정하지 시작과 마지막 color값을 동일하게 요구한다.
(위치값은 - top, left, right, bottom등으로 설정해주면 된다.)
Webkit과 Mozilla는 방성형이나 직선형태의 gradients로 사용할 수 있다. 이 속성은 이러한 과장을 조금씩 변경되도록 다루고 있다.
Mozilla는 두개의 속성값을 분리(-moz-linear grandient(), -molz-radial-gradient())하여 다루고 있고,
Webkig은 하나의 속성값에서 parameter로 다루고 있다.(-webkig-grandient-(radial,...))
여기에서 간단한 예를 볼 수 있다.
http://www.sitepoint.com/examples/css3/gradient.html
CSS gradients는 최소 두개의 색깔을 요구한다. 두가지 method는 grandient를 변경시킬 여러개의 컬러값을 설정하는것을 허용한다.
무지개 gradient를 표현하는 코드는 다음과 같다.
/* fallback */
background: #F66 url(rainbow-gradient.jpg);
/*mozilla gradient*/
background-image: -moz-linear-gradient(left, right,
from(red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
to(violet));
/* webkit gradient */
background-image: -webkit-gradient(linear,
left top, left bottom,
color-stop(0.00, red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(60%, blue),
color-stop(76%, indigo),
color-stop(1.00, violet));
흥미롭게도, IE는 무지개는 표한할 수 없지만 간단한 gradients를 filter속성을 사용하여 IE5부터 표현할 수 있다.
filter: progid:DXImageTransform.Microsoft.gradient(
enabled='true',
startColorstr=#A1D004,
endColorstr=#6B9A00,
GradientType=0
);
위의 코드에서 두가지를 아는 것이 필요하다.
첫째, 이 코드가 깔끔하지는 않지만 시작과 마지막 컬러값을 설정한 것을 볼 수 있다.
둘째, GradientType parameter는 gradient의 방향을 설정하다. 0으로 설정하면 수직 gradient이고 1은 수평이다.
대신 비스듬한 gradient는 ie에서 설정이 불가능하다.
CSS gradient를 사용함으로서 매력적인 3가지 이유이다.
1. 이미지를 사용하지 않고, contents의 양에따라 적절하게 표현하고, 비율에 맞춰 표현할 수 있다.
2. CSS gradients는 매율 효율적이고, 크고, 유연하고, 코드로 라인의 tone등을 설정 할 수 있고, 유저가 느끼는 페이지 로딩시간을
더 빠르게 느끼게 할 수 있다.
3. CSS gradients는 복잡한 tone이나 image가 할 수 없는 여러가지 표현들을 쉽고 빠르게 보여줄 수 있다.
FF, Chrome, Safari는 gradient의 지원을 완벽하게 하고 있다. IE는 간단한 표현이 가능한 gradient를 지원하고 있다.
원문 : http://articles.sitepoint.com/article/css3-infinity-beyond
최근 덧글