조희대의 개인사이트
Anything Personal, Something Useful
태그: , ,

CSS ICON

CSS ICON은 CSS만 가지고 다양한 아이콘들을 만드는 프로젝트이다. CSS 가지고 이런 것도 가능하다니 놀랍다!

.mouse.icon {
  color: #000;
  position: absolute;
  margin-left: 4px;
  margin-top: 1px;
  width: 11px;
  height: 17px;
  border: solid 1px currentColor;
  border-radius: 6px;
}
.mouse.icon:before {
  content: '';
  position: absolute;
  top: 6px;
  left: -1px;
  width: 13px;
  height: 1px;
  background-color: currentColor;
}
.mouse.icon:after {
  content: '';
  position: absolute;
  top: -1px;
  left: 5px;
  width: 1px;
  height: 7px;
  background-color: currentColor;
}
<div class="mouse icon"></div>

참고문헌

2020년 2월 11일 화요일 오전 2:32:26 EST

헉 ㅋㅋ – so

2020년 2월 12일 수요일 오전 12:34:26 EST

심지어 애니메이션도 하고 있더군요. 쩝 – hcho

이 칸을 비워 두세요.