마우스오버1 [CSS] 마우스오버할 때 형광펜 효과 주기 (highlight text when hover) 티스토리 메인을 보다 보면 하단에서 이런 걸 볼 수 있다. 문장 하나하나에 마우스를 가져가 보면 각 문장의 굵은 글씨에 마치 형광펜을 칠하는 것처럼 밑줄이 쫙! 만들기 쉬우면서도 깔끔하고, 눈에 잘 띄는 디자인이라 형태는 약간씩 달라도 메뉴나 제목에 hover 할 때 종종 응용해서 사용하곤 했다. See the Pen highlight text when hover by shynaunum (@shynaunum) on CodePen. 티스토리에서는 각 문장에 링크를 달아 클릭하면 다른 페이지로 이동하지만 링크는 딱히 달아줄 게 없으니깐 빼버리고, 귀퉁이의 숫자도 빼고 심플하게 재현해봤다. 각 문장에 마우스를 올려보면 흐릿했던 문장이 진해지면서 굵은 글자 부분에만 밑줄이 샥~ 티스토리에서는 굵은 글자 부분을 .. 2020. 11. 28. 이전 1 다음
