블로그에 적용된 마우스 오버 효과들

2016. 2. 21. 15:57

요즘 블로그의 주제인 음악은 등한시하고 별 상관없는 티스토리 스킨 꾸미기에만 온통 매달리고 있다. -.-;

이번엔 마우스 오버 효과이다. 어떤 특정한 버튼이나 글씨 등을 강조하기 위해 마우스를 올려두면 (마우스 오버) 다양한 효과로 블로그를 꾸밀 수 있다.

제이쿼리를 이용한다거나 CSS 를 이용하는 등 마우스 오버 효과를 내는 방법은 많지만 컴퓨터를 잘 모르는 내겐 너무 어려운 수준이고.. 간단히 CSS 수정만으로 극대의 효과? 를 내는 (극대화 = 쉽고 내 맘에 드는. ㅋㅋ) 것들을 블로그의 이곳 저곳 하나씩 적용해 보았다. 마우스 오버 효과도 쌈빡한 거 한가지로 나중에 통일하는것이 좋을거 같다.

어제 밤에도 인터넷에서 발견한 멋진 마우스 오버 효과를 보고 최근 글 부분에 적용해 보려고 한참을 스킨과 씨름을 했다. 이제까지 너무 많은 실패를 해와서 .. 이번에도 안되나 했다. 그런데 다행히 성공적? 으로 표현되어 기쁜 마음으로 잠자리에 들었다. 아마 못했다면 밤새 이거 붙들고 '왜 나는 안될까?' 하며 머리 싸매고 낙담했을지도 모른다.

블로그의 맨 위 상단부터 SONYLOVE 블로그 이름 부분은 마우스를 올려두면 색깔이 바뀐다. 중간에 아이콘 폰트는 마우스 오버시 폰트 크기를 크게 하도록 했다. 오른쪽 사이드바의 카테고리 부분은 박스 쉐도우 효과를(+ 카테고리에도 최근글과 같은 애니메이션 색상 전환 효과를 적용했다. 정열적인 핑크색으로 ㅋㅋ).. 최근글 부분은 이번에 새로 적용한 하늘색 애니메이션 색상 전환이다. 간단한 색상 바뀜보다 적용하기에 약간 복잡하다. 댓글 달기 버튼에도 적용해보려고 했는데 글씨가 깜빡이는 문제가 있어서 댓글 부분은 간단한 색상 바꾸기로만 적용해놨다.

+ 방명록과 본문 댓글에 댓글 버튼을 양 옆으로 대문처럼 갈라지며 안에 글이 나타나는 마우스 오버 효과로 변경해서 적용했다. 안에 숨겨진 글을 손쉽게 바꿔가며 기분을 나타내기도 좋다. 완전 내 스타일..ㅋㅋ