이 데모를 만들고 쉽게 튜토리얼로 만들 수 있게 도와준 라이언 도허티에게 특별한 감사를 전합니다.

이번 데모에서는 Firefox 3.6에 새롭게 추가된 그라데이션(gradient) 기능을 사용하는 간단한 예를 살펴볼 것입니다(관련글 보기). gradient와 기존의 CSS 속성을 사용하여 양각화와 빗면 처리가 된 멋진 모양의 버튼을 만들 것입니다. 이 버튼은 다음 버전의 Personas 사이트에서 사용하려고 개발됐습니다.

버튼을 만드는데 CSS 기반의 메소드를 사용하면 웹 사이트 개발자에게 큰 이점이 있습니다. 즉, 텍스트가 바꼈을 때마다 이미지를 새로 만들 필요가 없으며, 개별 이미지들을 다운로드 할 필요하 없기 때문에 페이지가 더 빨리 뜨게 됩니다. 그리고, 텍스트를 쉽게 현지화 할 수 있습니다. 이 데모의 경우에는 접근성 관점에서도 향상이 있을 수 있는데, 버튼의 텍스트로 가 포함된 내용을 사용할 수 있기 때문입니다.

이 데모의 최종 버전을 바로 보거나, 이 글대로 단계별로 따라가 봄으로써 내용을 확인할 수 있습니다.

버튼 만들기

버튼은 안에 링크를 가진 직사각형의 공간입니다. 다음과 같은 간단한 HTML로 버튼을 만들 것입니다.

<p style="width: 300px;">
    <a class="linear" href="http://getpersonas.com">
      <span>Get Personas for Firefox</span>
      <span class="info">It's free and installs in seconds</span>
    </a>
</p>

이 HTML은 폭이 고정된 문단(<p>) 엘리먼트를 만듭니다. 버튼의 내부는 실제로 텍스트를 포함한 간단한 <a> 링크입니다.

일단 버튼에 설정한 폭이 유효하려면 <a>를 블럭 엘리먼트처럼 동작하도록 설정해야합니다. 그래서 내부의 텍스트를 분리된 별개의 부분의 아니라 하나의 엘리리먼트의 일부분으로 나타나게(flow) 합니다.

display: block;

좀 더 멋진 글꼴과 스타일을 지정합니다.

font-family: Helvetica, Arial, sans-serif;
font-weight: bold;

font-size: 138.5%;
 
text-align: center;
text-decoration: none;

텍스트 주위로 공간(padding)을 추가하고 모서리를 둥글게 만듭니다.

padding: 10px;
-moz-border-radius: 10px;

다른 브라우저를 위해 버튼 주위로 경계(border)를 지정하고 배경 색을 설정합니다(물론 IE는 예외입니다. 이와 관련하여 아래에 있는 내용을 확인하세요).

border: 1px solid #659635;
background: #99ca28;

또한 텍스트에 색을 지정하고, 버튼 상에 텍스트가 돋으라지게 보이게 멋진 드롭 새도우(drop shadow)를 추가합니다.

text-shadow: -1px -1px 2px #777777;

color: #ffffff;

이제 -moz-linear-gradient CSS 속성을 사용하여 멋진 빗면 처리(bevel)를 해 주는 그라데이션을 지정할 수 있습니다.

background: -moz-linear-gradient(top, #CFE782 0%,

                                      #9BCB2A 2%,
                                      #5DA331 97%,
                                      #659635 100%);

구문은 매우 간단합니다. top 은 상단에서 시작해서 하단으로 그라데이션 된다는 의미입니다. 구문의 나머지 부분은 경계색(color stops)을 정의합니다. 이 부분은 두 가지 색 이상이 교차하면서 변하도록 지정할 수 있는데, 빗면 처리(bevel) 효과는 하나의 색에서 다른 색으로 비 선형 변화가 필요하기 때문에 이 예제에도 사용됐습니다.

위의 코드는 시작 색을 지정하고(0%),빗면 효과를 지정(2%)한 후에 변화의 대부분을 지정(97%)하고 경계색을 지정(100)한 것입니다. 이렇게 지정을 하면 마치 위에서 빛을 비춘거 같은 효과를 얻을 수 있습니다.

IE와 관련하여:

우리의 좋은 친구인 인터넷 익스플로러에 대한 간결한 메모. Firefox와 Safari 이전 버전들은 background: -moz-linear-gradient 같이 어떻게 처리해야할지 모르는 속성을 만났을 때 우아하게도 배경에 영향을 미치지 않는 식으로 처리합니다. 하지만, IE는 단지 흰색 배경을 보여줍니다. 이러한 문제에 대한 한가지 가능한 대안으로 뒤쪽에 IE를 위한 background: 를 포함시켜 원래 스타일시트가 로딩된 후에 로딩되는 별도의 스타일시트에 두는 것입니다. 아마 이 외에도 다른 방법들이 있을 것입니다. 하지만, 여기에서 논의할 문제는 아닙니다.

원저자: Christopher Blizzard – 원문으로 가기