우연히 CSS3 도우미 사이트를 알게 돼서 이런 저런 것을 해보다가, 블로그에도 적용했습니다.

문자에 그림자 드리우기인데, 인터넷 익스플로러를 제외한 대부분 브라우저에서는 보입니다.
적용도 쉽습니다. 적용하고자 하는 문자 또는 연결고리(link)에 아래 속성만 더해주면 됩니다.
text-shadow:5px  5px  7px  #B35F00;

첫 번째 수치는 가로 위치. 숫자가 높을 수록 그림자가 오른쪽으로 갑니다.
두 번째 수치는 세로 위치. 숫자가 높을 수록 그림자가 아래로 갑니다.
세 번째 수치는 그림자 문자의 뭉개짐 정도. 숫자가 높을 수록 글씨를 알아볼 수 없게 뭉개줍니다.
네 번째는 그림자의 색깔.

제목 부분 CSS를 보여드리면 이런 식입니다.
#header .blogTitle  a  { color: #B35F00; font: 38px serif; font-weight:bold; float:left; text-shadow:5px  5px  7px  #B35F00; }

연결고리(links)에도 적용할 수 있습니다. (예제는 제 블로그... )
a:hover         { color:#7D4C2C;  text-decoration:none; text-shadow:2px  2px  2px  #7D4C2C;}

 
신고
  1. Favicon of http://juneoh.net BlogIcon 오상준 2010.08.21 09:22 신고

    CSS3에는 참 신기한 속성들이 많은 것 같아요.
    며칠 전에는 'target-new'라는 것을 발견했는데,
    이것이 무어냐하면, 주소를 누를때 바로 그 주소 이동하는 방법을 정할 수 있는 녀석이라덥디다!
    CSS만으로도 같은 창, 새 창, 새 tab을 선택할 수 있게 한다는 것인데···
    (http://www.w3.org/TR/css3-hyperlinks/#the-target-new)

    햐, 나름 표준 HTML과 CSS에 정통하다고 생각하는 누리 꾸밈꾼(web designer)인데도,
    나날이 새로 기술 발전하는 속도는 따라가기가 참 힘들어지는 것 같아요. ㅜ.ㅜ

    • Favicon of http://juneoh.net BlogIcon 오상준 2010.08.21 09:24 신고

      오잉, 댓글 쓸 때 제 누리집 주소를 적었더니 자동으로 대표 그림이 달리네요!
      이건 어떻게 하신건가요? 신기해라~

    • Favicon of http://myubuntu.tistory.com BlogIcon Mike Sierra 2010.08.22 00:03 신고

      대표 그림달기는 제가 어떻게 한 것은 아니고... 아마도 고유의 기능(?) 아닌가 싶습니다.

+ Recent posts

티스토리 툴바