글제목에 그림자 등 장식효과 붙이기

프로그램/알림글, 블로그 유지 관리 .☞ 펌보다 링크

출처는 MS사이트입니다.


CSS를 사용하여 재미있는 텍스트 효과를 추가하는 방법

https://msdn.microsoft.com/ko-kr/library/jj680149(v=vs.85).aspx

text-shadow 


여러 가지 예시가 나오는데, 그 중 제일 앞에 나오는 섀도우 효과만 코드를 따서 붙여 봤습니다.


그래서 지금 바뀐 것.

이런 제목이

 

이렇게 바뀌었습니다. 오른쪽은 커서가 올라간(hover) 경우.

제목줄에 글링크를 이대로 둘 지 지울 지 생각 중.



text-decoration 을 이용할 때. 

https://www.w3schools.com/cssref/css3_pr_text-decoration-style.asp

https://css-tricks.com/styling-underlines-web/

깔끔한 밑줄효과. 형광펜 등.


text-decoration은 안 쓰고, a 태그가 붙은 텍스트나 다른 오브젝트에 border 속성을 써서 형광펜 밑줄효과내기.

http://qing.one/1062


제목칸 자체에 대고 할 때는 box-shadow

https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow

https://msdn.microsoft.com/ko-kr/library/gg589484(v=vs.85).aspx


제목이 두 줄 이상 나오는 글도 있어서, 깔끔하게 색연필을 그려주는 디자인을 생각하고 있습니다. 본문 링크를 지금처럼 점선 밑줄을 해도 되자만, 전공서적의 본문 밑줄처럼 깔끔하게 그어주는 팁도 있던데, 나중에 레이아웃을 한 번 갈아엎게 되면 해봐야겠습니다. :)


이 글과 같은 분류 글목록으로 가기 / 최신글목록으로 가기
트랙백이 없고, 댓글이 없습니다.
☞ 링크/트랙백관련

댓글을 달아 주세요