hover효과2 [CSS] 마우스오버할 때 형광펜 효과 주기 (highlight text when hover) 티스토리 메인을 보다 보면 하단에서 이런 걸 볼 수 있다. 문장 하나하나에 마우스를 가져가 보면 각 문장의 굵은 글씨에 마치 형광펜을 칠하는 것처럼 밑줄이 쫙! 만들기 쉬우면서도 깔끔하고, 눈에 잘 띄는 디자인이라 형태는 약간씩 달라도 메뉴나 제목에 hover 할 때 종종 응용해서 사용하곤 했다. See the Pen highlight text when hover by shynaunum (@shynaunum) on CodePen. 티스토리에서는 각 문장에 링크를 달아 클릭하면 다른 페이지로 이동하지만 링크는 딱히 달아줄 게 없으니깐 빼버리고, 귀퉁이의 숫자도 빼고 심플하게 재현해봤다. 각 문장에 마우스를 올려보면 흐릿했던 문장이 진해지면서 굵은 글자 부분에만 밑줄이 샥~ 티스토리에서는 굵은 글자 부분을 .. 2020. 11. 28. [티스토리 스킨 편집] top 버튼 꾸미기(CSS3 animation) 지금 사용 중인 스킨은 티스토리에서 만든 스킨 중 Book Club. 이 스킨의 하단(footer) 오른쪽을 보면 페이지가 아무리 길더라도 클릭 한 번에 페이지 맨 위로 갈 수 있는 버튼이 하나 있다. 여기에 마우스를 올려보면 이렇게 버튼 색깔이 바뀌는 것은 좋긴 하나, 크기도 작고, 페이지를 최하단까지 내려야 이 버튼을 볼 수 있기 때문에 나는 이걸 좀 더 내 취향에 맞게, 쓰기 편하게 바꿔보려 한다. (Home 키가 없는 키보드 특성상 commnad + 위 화살표를 눌러야 하는데 귀찮다. 그냥 클릭 한 번으로 끝내고 싶다.) 우선 이번에 수정할 내용 첫 번째로는 간단하게 페이지 어느 부분에서도 간편하게 맨 위로 갈 수 있도록 스크롤을 하거나 창 크기를 조정해도 항상 그 위치에 고정하는 것. 그리고 마.. 2020. 10. 12. 이전 1 다음
