그림을 쓰지 않고 멋진 sticky notes 만들기

CSS 댓글 달기

끈적이 노트(sticky notes)라 함은, 주로 웹에서 알림 글이나 주의를 요하는 글의 내용을 담아두는 배경으로 많이 사용되는데 (개인적론 웹사이트 대문에 twitter feed 표시용으로 사용하고 있다), 요넘을 사용할 경우엔 몇 가지 주의사항이 있다.

우선, 이 배경 그림을 쓸 때는 글 내용에 맞는 크기의 이미지를 미리 마련해 두어야 한다는 것이다. 나중에 글 내용이 길어지거나 줄어들기라도 하는 날엔 그 크기에 맞게 이미지 편집기에서 불러와 조물락 다듬어 주어야 할 경우도 생긴다. 그리고, 여기에 끈적이의 구석이 약간 말려 올라간 그림자 효과까지 줄라 치면, 투명 영역이 들어간 png 파일을 사용해야 하는데, 요넘을 그대로 사용하면 IE6에서 보기 흉한 흔적을 남겨서 이를 위한 불필요한 꼼수를 부려야 하는 골칫거리도 있다.

이런 상황에서 훌륭한 대안으로 사용될 수 있는 것이 바로 우리의 수퍼스타 CSS3이다.
CSS3를 쓰면서 얻을 수 있는 이점은 위에서 말한 부작용도 없거니와, CSS 선언 단 몇 줄로 이미지 사용을 배제하면서 더 빠르고 접근성 높은 사이트를 만들 수 있고, 물론 오래된 브라우저들에서도 “degrades well” 한 결과를 보여준다.

여기서 소개할 요령은, 얼마전 공개된 WWDC 2010 Session Videos에 있는 Internet and Web 세션 중, Session 503 – CSS Effects, Part 1_ UI Elements and Navigation 영상에 나와있는 내용의 일부분이다.

구조를 보면, 끈적이를 포함하는 div과 그 안에 끈적이 배경과 노트 내용이 들어가는 div으로 구성되어 있다.

<div id="sticky_container">
  <div id="sticky">Check out these great HTML5 <a href="http://www.apple.com/html5/">demos!</a></div>
</div>

#sticky_container div에 선언된 CSS를 보면, 기본적인 위치와 크기 지정 외에 CSS Transforms를 써서 약간 기운 효과를 주었다.

#sticky_container {
  /* Rotate the stick 5 degrees counter-clockwise, from the top right. Applied here instead of in #sticky so that the top shadow is cropped off. */
  -webkit-transform: rotate(-5deg);
  -webkit-transform-origin: top right;
  -o-transform:rotate(-5deg);
  -o-transform-origin: top right;
}

Firefox는 3.5 버전부터 CSS transforms을 지원하고 있는데, 여기서 빠진 이유는 div을 둘러싸는 스크롤바에게 영향을 미쳐서 대신 끈적이 div에 선언되어 있다.

다음은 끈적이 스타일로, 여기엔 border-radius와 background-image에 적용된 CSS Gradients 그리고 box-shadow가 3단 콤보로 적용되었다.

#sticky {
  /* Use custom border radii to give the sticky note shape some subtle curves. */
  border-top-right-radius: 160px 10px;
  border-bottom-left-radius: 160px 10px;
  border-bottom-right-radius: 160px 20px;
 
  /* Use vendor-prefixed names since the standardized CSS syntax for browsers where the standard prefix hasn't yet been adopted */
  -webkit-border-top-right-radius: 160px 10px;
  -webkit-border-bottom-left-radius: 160px 10px;
  -webkit-border-bottom-right-radius: 160px 20px;
  -moz-border-radius-topright: 160px 10px;
  -moz-border-radius-bottomleft: 160px 10px;
  -moz-border-radius-bottom-right: 160px 20px;
 
  /* A radial gradient from 20% opaque black to transparent gives the surface of the sticky a lighting effect. */
  background-image: -webkit-gradient(radial, center top, 200, center top,300,  from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.9))),
                    -webkit-gradient(linear, center top, left bottom, from(rgba(0, 0, 0, 0.15)), to(transparent));
  background-image: -moz-radial-gradient(center top, circle cover, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.9)),
                    -moz-linear-gradient(150px 0px, rgba(0, 0, 0, 0.15), transparent);
 
  /* A shadow gives the sticky more depth, making it look like the bottom edge is raised. */
  -webkit-box-shadow: 10px 8px 25px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 10px 8px 25px rgba(0, 0, 0, 0.4);
  box-shadow: 10px 8px 25px rgba(0, 0, 0, 0.4);
 
  /* Equivalent to the -webkit-transform applied to #sticky_container. Applied here because -moz-transform affects scrollbar visibility. */
  -moz-transform: rotate(-5deg);
  -moz-transform-origin: top right;
}

이렇게 해서 완성된, 끈적이 노트의 모습. ⇒ Imageless Sticky Notes Demo 페이지
Safari, Google Chrome, Firefox, Opera에서 모두 근접한 끈적이 모양을 보여준다. (아쉽게도 아직까지 Opera는 CSS Gradients를 지원하지 않는다.) 물론, IE에선 여전히 사각형의 노란색 네모 바탕만 보여주지만, 모양만 그렇지 담고 있는 내용은 그대로다.

이렇듯, CSS3는 웹 디자인에 있어 전과 다른 색다른 상상력을 요구하기도 하지만 동시에 더 많은 가능성을 제시해 주기도 한다.
마지막으로 다음의 페이지는 위 예시를 포함하는 Apple에서 공개한 예제인데 CSS3로 표현할 수 있는 여러 멋진 효과를 보여준다. ⇒ CSS Site of Awesomeness
WebKit 계열 브라우저에서 제일 만족할 만한 효과를 보여주며, 이미지는 단 하나도 사용되지 않아서, cache가 적용되지 않은 페이지의 처음 로딩시 문서 전체 크기는 86KB 정도 밖에 되질 않는다. 8)

꼬리표:

관련된 주제의 글

댓글을 남겨 주세요