제목에 그림자 효과내기

게시자: 대문 demun 카테고리: 티스토리스킨수정/제목 2010.05.13 09:00
간단하게 css 몇글자만으로 그럴뜻한 그림자효과를 줄수 있습니다.
한가지 IE 6,7,8 은 지원을 하지 않아서 사용을 안했는데요. 그래도 요즘은 파이어폭스나 크롬을 많이 사용하기 때문에 사용하면 좋습니다. 안한것보다 좋다는 이야기죠^^;

많은 부분에 적용하는것보다 포스트의 제목부분에 적용하면 좋습니다. 여러가지 꾸미는 방법이 있겠지만 간단이 그림자만 넣어보겠습니다.

파이어폭스 본 화면
크롬으로 본 화면


오페라로 본 화면

역시 좋습니다. 하지만 안되는것도 있다는점은 알아두세요.
IE 6.0 로 본 화면


IE 7.0 로 본 화면

먼저 html에서 제목에 해당하는 부분을 찾아야 합니다.
치환자인 _article_rep_title_ 를 찾기를 통해서 찾아보세요.
공지사항에도 잇고 블로그 본문에 해당하는 부분도 있어서 두어개 정도 나올겁니다.

아래부분에 div class="titleWrap" 가 있으면 그 부분에 본문 제목에 해당하는 부분입니다.
<!--
그곳에 <h2><a href="[#\#_article_rep_link_##]">[#\#_article_rep_title_##]</a></h2> 처럼 되있다면 h2 에 해당하는 부분에 그림자효과를 주면 됩니다
-->

간단하게 블로그 제목부분을 찾아서 아래처럼 지정을 해줍니다. 제 스킨에 적용된거 모두를 써보겠습니다.

#entry h2 a{
    font:24px NanumGothic Bold;
    color:#333;
    height:40px;
    padding:10px 0;
    text-shadow:2px 2px 2px #888888; //이 한줄이 그림자를 만듭니다. 이 한줄만 추가해주세요.
}

2px는 위,오른쪽,아래,왼쪽 입니다. 대략 2px정도만 주면 됩니다. 그리고 색을 지정하면 됩니다. #888 은 회색계열이니 그냥 넣어도 될겁니다. 보기에 그럴뜻합니다.

좀더 그림자를 넣거나 꾸미고 싶으면 아래 링크를 참고하세요.아주 다양한 효과를 주는것을 볼수 있습니다.
http://php.quicoto.com/how-to-css3-text-shadow/
http://www.webguru.pe.kr/zbxe/824433
http://www.css3.info/preview/text-shadow/

직접 연습삼아 어떤 효과를 줄수 있는지 웹에서 확인할수 있습니다. 미리해보시고 적용을 해보는것도 좋을듯 합니다.
http://www.westciv.com/tools/shadows/

티스토리 스킨 편집에 관련한 글
블로그 타이틀 이미지 롤오버 효과내기 => http://demun.tistory.com/1611
검색창 꾸미기 => http://demun.tistory.com/1604
댓글 배경 꾸미기 => http://demun.tistory.com/1602
댓글창 이미지 넣기 => http://demun.tistory.com/1601

댓글